Time object (Date)
Function: Handles dates and times
How do I create a time object
new Date()
var myDate = new Date(a);//Tue Jun 15 2021 19:20:33 GMT+0800;
typeof myDate; // "object" is an object, not a string
Copy the code
Time object related properties and methods
GetFullYear (); // get year getMonth (); GetDate (); // getDate (); // get the date getDay (); // What day of the week (0-- 6) stands for Sunday to Saturday; / / getMinutes (); / / getSeconds (); / / SEC getMilliseconds (); / / ms getTime (); // Get the milliseconds between the current date and 00:00:00, January 1, 1970 toLocaleString(); 2019/12/25 10:15:50" toLocaleDateString(); // Get the date and year of a string, for example: "2019/12/25" toLocaleTimeString(); // Get the time of the string 10:18:28 amCopy the code
Two, the clock case
css:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge"> <title>Document</title> </head> <body> <div class="clock" id="clock"></div> </body> </html>Copy the code
js:
<script>
var clock = document.getElementById("clock");
function getTime() {
var time = new Date(a);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 = ["Sunday"."On Monday"."Tuesday"."On Wednesday"."Thursday"."Friday"."Saturday"];
var res = year + "Year" + addZero(month) + "Month" + addZero(date) + "Day" + 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>
Copy the code
Three, timer
Timer parameters:
// Timer can pass multiple arguments:
Function 2. Time 3. The following arguments are the arguments passed by the executing function when it executes
setTimeout(function(num,s,m){
console.log(num,s,m);
},1000.2.3.6);
Copy the code
1, setTimeout
Meaning: To perform something after a certain amount of time is the word call
setTimeout(function(){
alert("I'm a timer.");
},1000)
Copy the code
2, setInterval
How much time interval to do one thing, is multiple calls
setInterval(function(){
console.log("I'm still the timer.")},1000)
Copy the code
Timer roommate return value: the return value represents the number of the timer in the current page
var time1=setTimeout(function(){
console.log("This is Timer one.");
},1000)
var time2=setInterval(function(){
console.log("This is Timer two.")},1000)
var time3=setTimeout(function(){
console.log("This is Timer three.");
},1000)
console.log(time1)=====>1
console.log(time1)=====>2
console.log(time1)=====>3
Copy the code
Timers are asynchronous tasks that can be executed only after the synchronization code is completed.
var time1=setTimeout(function(){
console.log("Eat");
},1000)
function fn(){
console.log("Sleep")
}
fn();
Copy the code
3, clear the method of timer
- clearTimeout
- clearInterval
var time1=setTimeout(function(){
console.log('1')},1000)
clearTimeout(time1);
var time2=setInterval(function(){
console.log("in")},1000);
clearInterval(time2)
Copy the code
Requirements:
Do a lottery program, there is an area in the page to display the number of the winning personnel, write a code in JS, every 1 seconds to create a random number of four digits (the value range of each digit is 0-9), when 10 seconds, the last four digits displayed is the winning numberCopy the code
css:
<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, <meta http-equiv=" x-UA-compatible "content="ie=edge"> < span style> #prize{width:200px; height:50px; border:1px solid green; } </style> </head> <body> <div class="prize" id="prize"></div> </body> </html>Copy the code
<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>
Copy the code