首页手记 JS模拟留言板部分动画效果使用了 animate.css
JS模拟留言板部分动画效果使用了 animate.css

标签：
Html5 JavaScript
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>留言板</title>
        <link rel="stylesheet" type="text/css" href="css/animate.css"/>
        <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
            #warp{
                background: url(img/14.jpg) no-repeat center fixed;
                margin: 0 auto;
                width: 500px;
                /*height: 350px;*/
                padding: 30px;
                position: relative;
            }
            #text,#word{
                display: flex;
            }
            #text p,#word p{
                width: 50px;
                height: 40px;
                font-size: 20px;
                line-height: 40px;
            }
            #text input{
                width: 450px;
                height: 40px;
                font-size: 20px;
                outline-style:none;
                opacity: 0.5;
            }
            #word{
                margin-top: 20px;
            }
            #word textarea{
                width: 450px;
                height: 200px;
                font-size: 20px;
                outline-style:none;
                opacity: 0.5;
                color: black;
            }
            #btn{
                margin: 20px 0px 20px 50px;
                width: 70px;
                height: 30px;
                border-radius: 50%;
                font-size: 15px;
                box-shadow: 5px 5px 2px 2px cadetblue;
                /*border: 1px solid black;*/
                background: lightblue;
                text-align: center;
            }
            #btn2{
                width: 50px;
                height: 50px;
                border-radius: 50%;
                font-size: 15px;
                background: black;
                color: white;
                border: 1px solid black;
            }
            #deleteall{
                width: 100px;
                height: 50px;
                border-radius: 50%;
                background: burlywood;
                border: 1px solid royalblue;
                /*opacity: 0.7;*/
                font-size: 15px;
                color: cadetblue;
                box-shadow: 5px 5px 5px 5px cadetblue;
            }
            .active{
                /*width: 400px;*/
                /*height: 400px;*/
                background: linear-gradient(to right bottom, 
                 blue 10%,green 30%,red 50%,yellow 60%,pink 80%,purple 90%);
                border-radius: 10px;
                color: white;
            }
            .active2{
                border-radius: 100px;
                background: linear-gradient(to  bottom, 
                 red 10%,wheat 30%,green 50%,yellow 60%,orange 80%,pink 90%);
            }
            /*设置的删除按键*/
            .active3{
                background: white;
                color: darkred;
                width: 90px;
                height: 30px;
                border-radius: 50%;
                border: 1px solid darkgreen;
                /*float:right;*/
                margin-top: 60px;
                position:absolute;
                right:0;
                font-size: 15px;    
            }
            /*#content{
                width: 500px;
                background: url(img/7.jpg) no-repeat center scroll;
            }*/

        </style>
    </head>
    <body>
        <div id="warp">
            <div id="text">
                <p class="animated zoomInLeft ">QQ:</p>
                <input type="text" id="inp" class="animated bounceInRight" value="" />
            </div>
            <div id="word">
                <p class="animated rollIn"> 留言:</p>
                <textarea name="" id="wo" rows="" class="animated bounceInLeft" cols=""></textarea>
            </div>
            <input type="button" class="animated bounceInUp"  id="btn" value=" 提交" />
            <input type="button" id="btn2" class="animated bounceInDown" value="变身" />
            <h2 class="animated flash">显示留言</h2>
            <input type="button" id="deleteall" class="animated bounceOut" value="删除全部留言" />
            <!--<ul id="ul1"></ul>-->
                <div id="content"></div>
        </div>
    </body>
    <!--<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/tween.js"></script>-->
    <script type="text/javascript">
        var warp=document.getElementById('warp')
        var qq=document.getElementById('inp');
        var wo=document.getElementById('wo');
        var btn=document.getElementById('btn');
        var btn2=document.getElementById('btn2');
//      var ul=document.getElementById('ul1');
        var content=document.getElementById('content');
        var deleteall=document.getElementById('deleteall');
        var index=0;
        var ind=0;
        var arr=[];
        var x=0;
        btn2.style.float="right";
        //点击开始变身模式
        btn2.onclick=function  () {
            wo.className='active';
            qq.className='active2';
//          btn.className='active3';
        }
        //提交的点击操作
        btn.onclick=function  () {
            if (qq.value==""wo.value=="") {
                alert('笨');
                return;
            }

        //获取删除按钮的下标
            for(i=0;i<=ind;i++){
                if (ind<=index) {
                arr[i]=ind;
                var x=0;
                x=arr[i];
                ind++;
            }
        }
            //获取系统时间
                var now = new Date ();
//      alert(now);
        var year=now.getFullYear();//只获取年份 
        var month=now.getMonth();//获取月份 月份是0-11来代表1-12月
        var today=now.getDate();//获取当天,例如30号
        var day=now.getDay();//获取星期几 1代表星期一
        var hour=now.getHours();//获取小时
        var minute=now.getMinutes();//获取分钟
        var secounds=now.getSeconds();//获取秒
//      alert(hour+':'+minute+':'+secounds);
        var nowTime=now.getTime();//时间戳 以毫秒为单位,1970.1.1距离现在的毫秒数字

            index++;
            var top1=document.createElement('div');
            var bottom1=document.createElement('div');
            var deleteBtn=document.createElement('button');

            bottom1.appendChild(deleteBtn);
            wo.style.color="palevioletred";
            qq.style.color="cornflowerblue"

            deleteBtn.innerHTML='第'+index+"个删除"
            deleteBtn.className="active3";
            deleteBtn.style.zIndex='10000';

            top1.style.padding='10px';
            top1.style.backgroundColor='antiquewhite';
            top1.style.opacity="0.8";
            top1.style.transition="all"+' '+"2s";
            top1.className="animated fadeInDownBig" ;

            bottom1.style.padding='10px';
            bottom1.style.backgroundColor='wheat';
            bottom1.style.opacity="0.8";
            bottom1.style.transition="all"+' '+"2s";
            bottom1.className="animated fadeInUpBig" ;
            top1.style.marginTop='5px';

            if (index>1) {
                content.insertBefore(top1,content.children[0]);
                content.insertBefore(bottom1,content.children[1]);
                content.insertBefore(deleteBtn,content.children[0]);
                top1.innerHTML='留言对象:'+qq.value;
                bottom1.innerHTML='第'+index+'条留言:'+wo.value+'<br/>'
                +year+'年'+month+'月'+today+'日'+hour+'点'+minute+'分'+secounds+'秒'
                +'留下来过的脚印'+'<hr/>';

            }else{
                content.insertBefore(deleteBtn,content.children[0]);
                top1.innerHTML='留言对象:'+qq.value;
                bottom1.innerHTML='第'+index+'条留言:'+wo.value+'<br/>'
                +year+'年'+month+'月'+today+'日'+hour+'点'+minute+'分'+secounds+'秒'
                +'留下来过的痕迹'+'<hr/>';
                content.appendChild(top1);
                content.appendChild(bottom1);
            }
            wo.value="";
            qq.value=""
            //全部删除的点击事件
                deleteall.onclick=function  () {
                    content.remove(content);
                }
                //删除按钮的点击事件
                deleteBtn.onclick=function  () {
                            this.remove();
                            bottom1.className="animated rotateInDownLeft" ;
                            top1.className="animated rotateInDownRight" ;
                            top1.style.opacity="0";
                            bottom1.style.opacity="0";
//                          alert('恭喜你成功删除第'+(x+1)+'个留言');
                            setInterval(function(){
                                top1.remove();
                                bottom1.remove();
                            },1000);                    
                }                   
        }

    </script>
</html>
点击查看更多内容