时间 Date 循环计时器

时间 Date 循环计时器

js时间对象与计时器的简单应用

Date() 方法可返回当天的日期和时间
使用时：let toDate = new Date();

获取时间的几个方法：

getFullYear(); //获取年
getMonth(); //获取月
getDate(); //获取日
getDay(); //获取星期
getHours(); //获取时
getMinutes(); //获取分
getSeconds(); //获取秒
getMilliseconds(); //获取毫秒

HTML

<div class="divDemo" id="divDemo">
    <ul id="demo" class="demo">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li style="color: red; transition: all 0.3s;"></li>
        <li style="display: none;color: red;"></li>
        <li></li>
    </ul>
</div>

CSS

<style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul,li,ol{
            list-style: none;
        }
        .divDemo{
            width: 707px;
            margin: 20px auto;
        }
        .demo{
            width: 707px;
            height: 100px;
            border: 1px solid #8D8D8D;
        }
        .demo > li{
            float: left;
            display: inline-block;
            width: 100px;
            height: 100px;
            text-align: center;
            font-size: 28px;
            font-weight: bold;
            line-height: 100px;
            color: black;
            border-right: 1px solid #8D8D8D;
        }
        .demo > li:last-child{
            border: none;
        }
        .demo > li > span{
            color: #9b9b9b;
            padding: 0 10px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            line-height: 100px;
        }
    </style>

JavaScript

// 获取时间 显示 循环计时器
let showTime = function () {
    let toDate = new Date();
    let upYears = toDate.getFullYear(); //获取年
    let upMonth = toDate.getMonth()+1; //获取月，js月份内部是[0-11]表示，所以须在获取后+1显示的才是实际月份
    let upToDay = toDate.getDate(); //获取日
    let upDay = toDate.getDay(); //获取星期，js星期内部是[0-6]表示，即['日','一','二','三','四','五','六']
    let upHours = toDate.getHours(); //获取时
    let upMinu = toDate.getMinutes(); //获取分
    let upSec = toDate.getSeconds(); //获取秒
    let upMiSec = toDate.getMilliseconds(); //获取毫秒
    // 时间格式  yyyy-MM-dd HH:mm:ss
    let toDay = upToDay >= 10 ? upToDay : '0' + upToDay;
    let toMonth = upMonth >= 10 ? upMonth : '0' + upMonth;
    let toMinu = upMinu >= 10 ? upMinu : '0' + upMinu;
    let toSec = upSec >= 10 ? upSec : '0' + upSec;
    //放入li中显示
    lis[0].innerHTML = upYears + '<span>年</span>';
    lis[1].innerHTML = toMonth + '<span>月</span>';
    lis[2].innerHTML = toDay + '<span>日</span>';
    lis[3].innerHTML = upHours + '<span>时</span>';
    lis[4].innerHTML = toMinu + '<span>分</span>';
    lis[5].innerHTML = toSec + '<span>秒</span>';
    lis[6].innerHTML = upMiSec + '<span style="display: inline-block;color: #8D8D8D;font-size: 14px;font-weight: bold;line-height: 100px;">ms</span>';
    lis[7].innerHTML = '<span>星期</span>' + arrDay[upDay];
};
showTime();

//循环计时器
let mySelf = setInterval(function () {
    // window.location.reload();  //刷新页面
    showTime()
},1);//1毫秒一循环

循环计时器

setInterval(function(){},time);
第一个参数：执行的函数；
time：循环的时间–毫秒 //1000ms = 1s

清除计时器

clearInterval(mySelf);
mySelf->setInterval()

效果演示：