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