js基础--时间对象08

最新推荐文章于 2024-07-10 14:03:37 发布

cuishoulong3424

最新推荐文章于 2024-07-10 14:03:37 发布

阅读量86

点赞数

文章标签： javascript html5 css3

本文链接：https://blog.csdn.net/cuishoulong3424/article/details/109851791

版权

文章目录

new Date()时间对象

获取到的是一个对象,身上有一些属性

getFullYear()背
- 年
getMonth();背
- 表示月份，值的范围在0-11之间，使用的时候需要+1
getDate();背
- 日
getDay();
- 表示周几，值[0-6],0代表的是周日，1-6代表的是周一到周六
getHours();背
- 小时
getMinutes();背
- 分钟
getSeconds(); 背
- 秒
getMilliseconds();
- 毫秒
getTime()背
- 时间戳
toLocaleString()
- 字符串的本地年月日时分秒
toLocaleTimeString();
- 本地的字符串小时分钟秒
tolocaleDateString();
- 本地的字符串年月起

var res=new Date();
console.log(res);//2020-11-20T01:44:15.532Z
console.log(typeof(res));//object
console.log(res.getFullYear());
console.log(res.getMonth());//月的索引要+1
console.log(res.getDay());//星期
console.log(res.getHours());//小时
console.log(res.getMinutes());//分钟
console.log(res.getSeconds());//秒
console.log(res.getMilliseconds());//毫秒
console.log(res.getTime());//时间戳1605838098212

定时器

setTimeout(函数,毫秒)

只执行一次，在设置的毫秒以后执行，毫秒为延迟时间

setInterval(函数,毫秒)

一直执行，每多少毫秒执行一次

返回值为，当前定时器在浏览器中的排序,如果为第一个，就是1
所有定时器都是异步

清除定时器

clearTimeout(定时器名字)
clearInterval(定时器名字)

var time1=setTimeout(function(){
    console.log('setTimeout是只做一次');
},1000)
var time2=setInterval(function(){
    console.log('setInterval是每隔多长时间做一次')
},1000)
console.log(time1,time2);//1,2
clearTimeout(time1);//清除定时器
clearInterval(time2);//清除定时器

同步，异步

定时器是异步的，先走同步再走异步，哪怕延迟为0，也先走异步

var time1=setTimeout(function(){
    console.log('setTimeout是只做一次');
},0)
console.log('我是同步先走');
//结果为
我是同步我先走
setTimeout是只做一次
//如果清除的话就不执行定时器了

时钟案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            font-size: 0;
            list-style: none;
            width: 500px;
            margin:0 auto;
            text-align: center;
        }
        li{
            font-size: 16px;
            text-align: center;
            line-height: 50px;
            display: inline-block;
            width: 60px;
            height: 50px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <ul id="main">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>
<script>
    var lis=document.querySelectorAll('#main>li');
    setInterval(function(){
        var res=new Date();
        var weekStr=['周日','周一','周二','周三','周四','周五','周六']
        lis[0].innerText=res.getFullYear()+'年';
        lis[1].innerText=res.getMonth()+1+'月';
        lis[2].innerText=res.getDate()+"日";
        lis[3].innerText=res.getHours()+'时';
        lis[4].innerText=res.getMinutes()+"分";
        lis[5].innerText=zero(res.getSeconds())+"秒";
        lis[6].innerText=weekStr[res.getDay()];
    },1000)
</script>

倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        div{
            height: 50px;
            line-height: 50px;
            text-align:center;
            background:red;
        }
    </style>
</head>
<body>
    <div id="main">

    </div>
</body>
</html>
<script>
    //现在时间：     目标时间：2020-11-20 17：00：00
    function zero(num){
        return num<10?"0"+num:num;
    }
   var timer=setInterval(function(){
        var oldTime="2020-11-20 17:00:00";
        var newTime=new Date(oldTime).getTime()-new Date().getTime();
        var fullyear=Math.floor(newTime/12/30/24/60/60/1000);
        var month=Math.floor(newTime/30/24/60/60/1000);
        var day=Math.floor(newTime/24/60/60/1000);

        var hours=Math.floor(newTime/60/60/1000);
        var minutes=Math.floor(newTime/60/1000-hours*60);
        var seconds=Math.floor(newTime/1000-minutes*60-hours*60*60);
        var millisSeconds=newTime%1000;
        if(fullyear==0&&month==0&&day==0&&hours==0&&minutes==0&&seconds==0&&seconds==0&&millisSeconds==0){
            main.innerText="00"+'-'+"00"+'-'+"00"+' '+"00"+':'+"00"+':'+"00"+':'+"00";
            clearInterval(timer);
            timer=null;
        }
        main.innerText=zero(fullyear)+'-'+zero(month)+'-'+zero(day)+' '+zero(hours)+':'+zero(minutes)+':'+zero(seconds)+':'+zero(millisSeconds)
    },0)
</script>

做一个抽奖程序，页面中有一个区域显示中奖人员的编号，在JS中写一段代码，要求每隔1秒中随机创建一个四位的数字（每一位数字的取值范围0-9），当10秒结束后，结束定时器，最后显示的四位数字即是中奖的号码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="text" id=inp>
</body>
</html>
<script>
    var inp=document.querySelector("#inp");
    function smoke(){
        var str="";
        for(var i=0;i<4;i++){
            num=Math.round(Math.random()*9);
            str+=num;
        }
        return str;
    }
    smoke();
   var time1=setInterval(function(){
        inp.value=smoke();
    },1000);
    var time2=setTimeout(function(){
        clearInterval(time1);
        time1=null;
        clearTimeout(time2);
        time2=null;
    },10000);
        
</script>

cuishoulong3424

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js基础--时间对象08

文章目录new Date()时间对象定时器清除定时器同步，异步时钟案例倒计时做一个抽奖程序，页面中有一个区域显示中奖人员的编号，在JS中写一段代码，要求每隔1秒中随机创建一个四位的数字（每一位数字的取值范围0-9），当10秒结束后，结束定时器，最后显示的四位数字即是中奖的号码new Date()时间对象获取到的是一个对象,身上有一些属性getFullYear()背年getMonth();背表示月份，值的范围在0-11之间，使用的时候需要+1getDate();背日g
复制链接

扫一扫