当前位置：网站首页>Web APIs DOM time object

Web APIs DOM time object

2022-07-06 22:24:00 【Dark horse programmer official】

Notes updated in the early stage ： Web API Basic cognition / obtain DOM Elements / Set up / modify DOM Element content and element attributes / Timer - Intermittent function / The basis of the event / Higher order function / Environment object / Comprehensive case -Tab Bar Toggle / DOM node

One 、Web APIs Time object ：

Time object ： An object used to represent time

effect ： You can get the current system time

1.1 Instantiation

Found... In the code new When a keyword , This operation is generally called Instantiation
Create a time object and get the time

* Get the current time

* Get the specified time

Time object code ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // let arr = []
        // let arr = new Array()
        // let obj = {}
        // let obj = new Object()

        // new  Instantiation   Time object 
        //  If the parentheses are empty, you can get the current time 
        let date = new Date()
        console.log(date)
        //  Write the time in parentheses , You can return the specified time  
        let last = new Date('2021-8-29 18:30:00')
        console.log(last)
    </script>
</body>

</html>

1.2 Time object method

Because the data returned by the time object cannot be used directly , Therefore, it needs to be converted to the format commonly used in actual development

Time object common method code ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>

        // new  Instantiation   Time object 
        //  If the parentheses are empty, you can get the current time 
        let date = new Date()
        console.log(date.getFullYear())
        console.log(date.getMonth() + 1)
        console.log(date.getDate())
        //  Minutes and seconds 
        console.log(date.getHours())
        console.log(date.getMinutes())
        console.log(date.getSeconds())
        //  What day 
        console.log(date.getDay())

    </script>
</body>

</html>

【 Case study 】 Page display time

demand ： Change the current time to ：YYYY-MM-DD HH:mm The form is displayed on the page

analysis ：

Call the time object method to convert
After string splicing , adopt innerText to label

Code ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            height: 50px;
            background-color: pink;
            text-align: center;
            line-height: 50px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>

        let arr = [' Sunday ', ' Monday ', ' Tuesday ', ' Wednesday ', ' Thursday ', ' Friday ', ' Saturday ']
        let div = document.querySelector('div')
        //  First call , You don't have to 1 A blank period of seconds 
        getTime()
        setInterval(getTime, 1000)
        function getTime() {
            // 1.  Instantiate the time object   It must be written into the timer before it can amount 
            let date = new Date()
            let year = date.getFullYear()
            let month = date.getMonth() + 1
            let date1 = date.getDate()
            let hour = date.getHours()
            let min = date.getMinutes()
            let sec = date.getSeconds()
            let day = date.getDay()
            div.innerHTML = ` It's today ： ${year} year ${month} month ${date1} Japan  ${hour}:${min}:${sec} ${arr[day]}`
        }
    </script>
</body>

</html>

1.3 Time stamp

What is a timestamp ？

Refer to 1970 year 01 month 01 Japan 00 when 00 branch 00 The number of milliseconds from seconds to now , It is a special way of measuring time

There are three ways to get the timestamp

1. Use getTime() Method

2. Abbreviation +new Date()

3. Use Date().now()

There is no need to instantiate
But you can only get the current timestamp , The first two can return the timestamp of the specified time

Time stamp code ：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        //  The timestamp is the total number of milliseconds    It's unique   
        //  Count down ：  The core idea :
        //  Future time  9.1 12:00    There is a timestamp    2000000
        //  Time now  8.29 15:00    There is a timestamp    1000000
        //  You can use future timestamps   subtract   Now the timestamp   Is the number of milliseconds left 
        //  Converting to minutes and seconds is the remaining time 
        // 1. getTime()
        // let date = new Date()
        // console.log(date.getTime())
        // 2. +new Date()
        console.log(+new Date()) //  The current timestamp 
        console.log(+new Date('2021-8-30 12:00:00'))  //  Timestamp of the specified time 
        // 3.  You can only get the current 
        // console.log(Date.now())
    </script>
</body>

</html>

Case study ： Graduation countdown effect

demand ： Calculate how much time is left until class is over

analysis ：

①： Subtracting the present time from the future time is the remaining time

②： The core ： Subtract the current timestamp from the future timestamp

③： Convert the remaining time into God when branch second

Be careful ：

1. It is milliseconds through timestamp , It needs to be converted into seconds in calculation

2. Conversion formula ：

d = parseInt( Total seconds / 60/60 /24); // Count the days
h = parseInt( Total seconds / 60/60 %24) // Calculating hours
m = parseInt( Total seconds /60 %60 ); // score
s = parseInt( Total seconds %60); // Calculate the current seconds

Case code ：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <style>
    .countdown {
      width: 240px;
      height: 305px;
      text-align: center;
      line-height: 1;
      color: #fff;
      background-color: brown;
      /* background-size: 240px; */
      /* float: left; */
      overflow: hidden;
    }

    .countdown .next {
      font-size: 16px;
      margin: 25px 0 14px;
    }

    .countdown .title {
      font-size: 33px;
    }

    .countdown .tips {
      margin-top: 80px;
      font-size: 23px;
    }

    .countdown small {
      font-size: 17px;
    }

    .countdown .clock {
      width: 142px;
      margin: 18px auto 0;
      overflow: hidden;
    }

    .countdown .clock span,
    .countdown .clock i {
      display: block;
      text-align: center;
      line-height: 34px;
      font-size: 23px;
      float: left;
    }

    .countdown .clock span {
      width: 34px;
      height: 34px;
      border-radius: 2px;
      background-color: #303430;
    }

    .countdown .clock i {
      width: 20px;
      font-style: normal;
    }
  </style>
</head>

<body>
  <div class="countdown">
    <p class="next"> It's today 2021 year 8 month 28 Japan </p>
    <p class="title"> The countdown to work </p>
    <p class="clock">
      <span id="hour">00</span>
      <i>:</i>
      <span id="minutes">25</span>
      <i>:</i>
      <span id="scond">20</span>
    </p>
    <p class="tips">
       Now it is 18:30:00
    </p>
  </div>
  <script>
    let hour = document.querySelector('#hour')
    let minutes = document.querySelector('#minutes')
    let scond = document.querySelector('#scond')
    time()
    setInterval(time, 1000)
    function time() {
      // 1.  Get the current timestamp 
      let now = +new Date()
      // 2.  Get the timestamp of the specified time 
      let last = +new Date('2021-8-29 18:30:00')
      // 3. （ Calculate the number of milliseconds remaining ） / 1000 ===  Seconds left 
      let count = (last - now) / 1000
      // console.log(count)
      // 4.  Convert to minutes and seconds 
      // h = parseInt( Total seconds  / 60 / 60 % 24)   //    Calculating hours 
      let h = parseInt(count / 60 / 60 % 24)
      h = h < 10 ? '0' + h : h
      // m = parseInt( Total seconds  / 60 % 60);     //    score 
      let m = parseInt(count / 60 % 60)
      m = m < 10 ? '0' + m : m
      // s = parseInt( Total seconds  % 60); //    Calculate the current seconds 
      let s = parseInt(count % 60);
      s = s < 10 ? '0' + s : s
      // console.log(h, m, s)
      hour.innerHTML = h
      minutes.innerHTML = m
      scond.innerHTML = s
    }

  </script>
</body>

</html>

Dark horse front-end column has a lot of dry goods , Focus on relearning , It's convenient ~

2022 Front end learning roadmap ： Course 、 Source code 、 note , Technology stack In addition, the circuit diagram is updated in real time ！ Friends who need after-school materials , You can tell me directly .