时间对象、定时器、清除定时器的方法

最新推荐文章于 2024-07-28 14:42:30 发布

小王不烦恼

最新推荐文章于 2024-07-28 14:42:30 发布

阅读量1.8k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/wxh2860906464/article/details/123912202

版权

文章目录

一、时间对象
二、2、案例：钟表
三、定时器
四、清除定时器的方法

提示：以下是本篇文章正文内容，下面案例可供参考

一、时间对象

1.1【作用】：Date 对象用于处理日期和时间。

1.2【创建时间对象】： new Date（）获取系统当前时间

var myDate=new Date(); //Tue Dec 24 2019 20:44:00 GMT+0800 (中国标准时间);
typeof myDate;====>"object"  // 获取到是一个对象，并不是字符串

1.3 时间对象相关属性和方法

● getFullYear();获取年
● getMonth();获取月 0到11 代表1月到12月
● getDate();获取日期
● getDay();星期几（0—6）代表周日到到周六
● getHours();时
● getMinutes();分
● getSeconds();秒
● getMilliseconds();毫秒
● getTime();获取当前日期到1970年1月1号 00：00:00 之间的毫秒差
● toLocaleString();// 获取到的是年月日，时分秒"2019/12/25 上午10:15:50"
● toLocaleDateString();// 获取到是字符串的年月日，例如：“2019/12/25”
● toLocaleTimeString();/ 获取到的是字符串的时分秒上午10:18:28

二、2、案例：钟表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #clock{
        height:50px;
        line-height: 50px;
        text-align: center;
    }
    </style>
</head>
<body>
    <div class="clock" id="clock">

    </div>
    <script>
      function clock(){
        var time=new Date;
        var year=time.getFullYear();
        var month=time.getMonth()+1;//0-11 代表1月到12月
        var date=time.getDate();//日期
        var day=time.getDay();//0-6代表周日到到六
        var hours=time.getHours();
        var minutes=time.getMinutes();
        var seconds=time.getSeconds();

        var weekStr=["日","一","二","三","四","五","六"];
        var week=weekStr[day];
        var result=year+"年"+ month+"月"+date+"日"+ "周" + week;
        result+=hours+"时"+minutes+"分"+seconds+"秒";
        return result;
			}

      var time=clock();
      document.getElementById("clock").innerHTML=time;

      setInterval(function(){
          var time=clock();
          document.getElementById("clock").innerHTML=time;
      },1000)
    </script>
</body>
</html>

三、定时器

3.1、setTimeOut

一定的时间后，去执行某些事情，是单次调用

setTimeout(function(){
    alert("wasai!you are beautiful");
},1000)

3.2、setInterval

间隔多少时间后，去执行某些事情，是多次调用

setInterval(function(){
    console.log("我真美！")
},1000)

3.3、定时器的参数说明

// 定时器可以传递多个参数：
// 1、执行的函数 
// 2、时间 
// 3、后面的参数就是执行函数在执行的时候传递的实参
setTimeout(function(num,s,m){
  console.log(num,s,m);
},1000,2,3,6);

3.4、定时器是有返回值的，返回值代表定时器处于当前页面中的第几个

var time1=setTimeout(function(){
    console.log("wasai!you are beautiful");
},1000)


var time2=setInterval(function(){
    console.log("我真美！")
},1000)

var time3=setTimeout(function(){
    console.log("aa");
},1000)

console.log(time1)=====>1
console.log(time1)=====>2
console.log(time1)=====>3

3.5、定时器是异步任务，只要当咱们同步代码执行完毕之后，才能执行。

setTimeout(function(){
    console.log("定时器");
},1000)
console.log("haha"）

四、清除定时器的方法

● clearTimeout
● clearInterval



 var time1=setTimeout(function(){
       console.log('1')
 },1000)

clearTimeout(time1);


var time2=setInterval(function(){
    console.log("in")
},1000);

clearInterval(time2)