JS

vue2.0倒计时

vue2.0倒计时,vue2.0 js 倒计时,vue倒计时

vue倒计时demo

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--- vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
</head>
<body>
   <div>
       <ul id="el">
           <li v-for="item in list">{{ item.jishi }}</li>
       </ul>
   </div>
</body>
<script>
new Vue({
        el: '#el',
        //数据
        data: {
            list:[
                {
                    id:1,
                    time:565454
                },
                {
                    id:2,
                    time:1844
                },
                {
                    id:3,
                    time:554
                },
            ]
        },
        //方法体
        methods:
        {
            num: function (n) {
                return n < 10 ? '0' + n : '' + n
            },
            timeToData:function ( maxtime ) {
                second = Math.floor( maxtime % 60);       //计算秒
                minite = Math.floor((maxtime / 60) % 60); //计算分
                hour = Math.floor((maxtime / 3600) % 24 ); //计算小时
                day = Math.floor((maxtime / 3600) / 24);//计算天
                return day+'天'+this.num(hour)+'时'+this.num(minite)+'分'+this.num(second)+'秒';
            },
            getTime:function () {
                var that = this;
                setInterval(function ()
                {
                    that.list.forEach(function (value) {
                        var shijian = that.timeToData(value.time);
                        if( typeof value.jishi == 'undefined' )
                        {
                            that.$set(value,'jishi',shijian);
                        }else
                        {
                            value.jishi = shijian;
                        }
                        if( value.time )
                        {
                            -- value.time;
                        }else
                        {
                            value.time = 0;
                        }
                    })
                }, 1000);
            }
        },
        //页面打开渲染之前就调用
        created: function () {
            var that = this;
            that.getTime();
        }
    });
</script>
</html>



(3)
分享:

本文由:xiaoshu168 作者:xiaoshu发表,转载请注明来源!

标签:

相关阅读