一、时间对象 （Date）
作用：用来处理日期和时间
如何创建时间对象
new Date()
var myDate = new Date(); //Tue Jun 15 2021 19:20:33 GMT+0800 (中国标准时间);
typeof myDate; // "object" 获取到是一个对象，并不是字符串
时间对象相关属性和方法
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
二、时钟案例
css:
<!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>
</head>
<body>
<div class="clock" id="clock"></div>
</body>
</html>
js:
<script>
var clock = document.getElementById("clock");
function getTime() {
var time = new Date();
var year = time.getFullYear();
var month = time.getMonth() + 1;
var date = time.getDate();
var day = time.getDay();
var hour = time.getHours();
var minutes = time.getMinutes();
var seconds = time.getSeconds();
var week = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
var res = year + "年" + addZero(month) + "月" + addZero(date) + "日" + week[day] + " " + addZero(hour) + ":" + addZero(minutes) + ":" + addZero(seconds);
return res;
}
function addZero(num) {
return num < 10 ? "0" + num : num;
}
var res = getTime();
clock.innerText = res;
setInterval(function () {
var res = getTime();
clock.innerText = res;
}, 1000)
</script>
三、定时器
定时器参数说明：
// 定时器可以传递多个参数：
// 1、执行的函数 2、时间 3、后面的参数就是执行函数在执行的时候传递的实参
setTimeout(function(num,s,m){
console.log(num,s,m);
},1000,2,3,6);
1、setTimeout
含义：在一定的时间后，去执行某些事情，是单词调用
setTimeout(function(){
alert("我是定时器");
},1000)
2、setInterval
间隔多少时间去做一件事，是多次调用
setInterval(function(){
console.log("我还是定时器")
},1000)
定时器室友返回值的：返回值代表定时器在当前页面的第几个
var time1=setTimeout(function(){
console.log("我是定时器1");
},1000)
var time2=setInterval(function(){
console.log("我是定时器2")
},1000)
var time3=setTimeout(function(){
console.log("我是定时器3");
},1000)
console.log(time1)=====>1
console.log(time1)=====>2
console.log(time1)=====>3
定时器是异步任务，只有当同步代码执行完毕之后，才能执行。
var time1=setTimeout(function(){
console.log("吃饭");
},1000)
function fn(){
console.log("睡觉")
}
fn();
3、清除定时器的方法
- clearTimeout
- clearInterval
var time1=setTimeout(function(){
console.log('1')
},1000)
clearTimeout(time1);
var time2=setInterval(function(){
console.log("in")
},1000);
clearInterval(time2)
需求：
做一个抽奖程序，页面中有一个区域显示中奖人员的编号，
在JS中写一段代码，要求每隔1秒中随机创建一个四位的数字
（每一位数字的取值范围0-9），
当10秒结束后，最后显示的四位数字即是中奖的号码
css:
<!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>中奖</title>
<style>
#prize{
width:200px;
height:50px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="prize" id="prize"></div>
</body>
</html>
<script>
function getCode(){
var str="0123456789";
var result="";
for(var i=0;i<4;i++){
var index=Math.floor(Math.random()*9);
result+=str[index];
}
return result;
}
var prize=document.getElementById("prize");
prize.innerHTML=getCode();
var time=new Date().getTime();
var time1=setInterval(function(){
var newTime=new Date().getTime();
var dif=(newTime-time)/1000;
if(dif>5){
clearInterval(time1);
}
var res= getCode();
prize.innerHTML=res;
},1000)
</script>
