js基础-时间对象08

时间:2021-2-20 作者:admin

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

定时器

  1. setTimeout(函数,毫秒)
  • 只执行一次,在设置的毫秒以后执行,毫秒为延迟时间
  1. 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>
声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。