时间 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

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 + '年';
    lis[1].innerHTML = toMonth + '月';
    lis[2].innerHTML = toDay + '日';
    lis[3].innerHTML = upHours + '时';
    lis[4].innerHTML = toMinu + '分';
    lis[5].innerHTML = toSec + '秒';
    lis[6].innerHTML = upMiSec + 'ms';
    lis[7].innerHTML = '星期' + arrDay[upDay];
};
showTime();

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

循环计时器

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

清除计时器

clearInterval(mySelf);
mySelf->setInterval()

效果演示：