文章目录

一、时间对象
- 1.1【作用】：Date 对象用于处理日期和时间。
- 1.2【创建时间对象】： new Date（）获取系统当前时间
- 1.3 时间对象相关属性和方法
二、2、案例：钟表
三、定时器
- 3.1、setTimeOut
- 3.2、setInterval
- 3.3、定时器的参数说明
- 3.4、定时器是有返回值的，返回值代表定时器处于当前页面中的第几个
- 3.5、定时器是异步任务，只要当咱们同步代码执行完毕之后，才能执行。
四、清除定时器的方法

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

一、时间对象

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)

时间对象、定时器、清除定时器的方法相关推荐

html 清除计时器,定时器-清除定时器
清除定时器重要知识点 setInterval(启动) clearInterval(清除) set timeout(启动-) clearTimeout(清除-) 清除时钟函数要对应清除 ...
【重温基础】7.时间对象
本文是重温基础系列文章的第七篇. 今日感受:做好自律. 系列目录: [复习资料]ES6/ES7/ES8/ES9资料整理(个人整理) [重温基础]1.语法和数据类型 [重温基础]2.流程控制和错误处 ...
【JavaScript】查询字符串、JSON字符串、时间对象、定时器、同步异步、BOM
文章目录一.查询字符串案例一:把查询字符串转为对象类型案例二:把对象转为查询字符串二.JSON字符串案例一:把 json格式转为 js格式案例二:把 js格式转为 json 格式字符串 ...
关于vue中如何清除定时器的方法
一.问题 1.在vue中使用setTimeout定时器的时候,可能会遇到关不掉的情况,会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了,但是有时候没生效,定时器还会继 ...
对象及日期定时器、延时器
日期对象Date 概述:date是用于表示日期时间的对象日期对象的定义(使用new关键词) 1.获取当前的时间(本地的时间) var date = new Date() //不传参就是获取当前时间 ...
JS 设置定时器和清除定时器
在做项目中难免会碰到需要实时刷新,动画依次出现等等需求,这时候就需要定时器登上我们的代码舞台了,所以今天我们就先来了解一下JS定时器的设置和清除吧. 一.启用定时器 window对象提供了两个方法来实 ...
ajax清除定时器,AngualrJs清除定时器遇到的坑
AngualrJs清除定时器遇到的坑 angualrJs清除定时器爬坑之路: 今天发现一个奇怪问题,放在自定义指令里边的定时器竟然在页面跳转之后,在另一个页面这个循环定时器还在执行,这肯定是不行的,会 ...
html清空计时器,js设置定时器和清除定时器
一.前言在前端,我们有很多功能需要用到定时器.譬如轮询,譬如定时关闭弹框,譬如实现秒表,譬如一段时间后跳转页面等等.因此,我们需要掌握定时器的用法. 二.设置定时器目前window对象提供有两个方 ...
android h5app息屏定时器,H5案例分享：JS设置定时器和清除定时器
JS设置定时器和清除定时器在做项目中难免会碰到需要实时刷新,动画依次出现等等需求,这时候就需要定时器登上我们的代码舞台了,所以今天我们就先来了解一下JS定时器的设置和清除吧. 一.启用定时器 win ...

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