计时器

作者: Clover园 | 来源:发表于2019-12-19 18:35 被阅读0次
    <!DOCTYPE html>
    <html>
    
    <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>计时器</title>
      <style>
       #wrap{
       width: 300px;
       height: 100px;
       margin:50px auto;
       background: red;
       }
       .red{
       color: red;
       }
       .green{
       color: green;
       }
       #time_clover{
       font-size:26px;
       }
       h5{
       margin:0;
       padding:0;
       font-weight:normal;
       }
      </style>
    </head>
    <body>
      <div style="width:100%;text-align:center;">
        <div id="wrap"></div>
        <p id="time_clover">
        </p>
      </div>
    </body>
    </html>
    <script>
    let tc = 8, th = 18, tm = 16, ts =20;
    let el = document.getElementById('time_clover');
    let wrap = document.getElementById('wrap');
    function startTime(control_ti,control_h,control_m,control_s){
            let today = new Date();
            let y = today.getFullYear();
            let mo = today.getMonth()+1;
            let d = today.getDate();
            let h = today.getHours();
            let m = today.getMinutes();
            let s = today.getSeconds();
            let ms = today.getMilliseconds();
            let ti = Math.floor(ms/100);
            h = checkTime(h);
            m = checkTime(m);
            s = checkTime(s);
            el.innerHTML= `
             <h5>${y}-${mo}-${d}</h5>
             <h5>${h}-${m}-${s}</h5>
             <h5>${ti}</h5>
            `
            if(ti===control_ti&&h===control_h&&m===control_m&&s<control_s){
             el.classList.add("green");
             el.classList.remove("red");
             wrap.style.background = "green";
            }
            if(h===control_h&&m===control_m&&s>=control_s){
    el.classList.remove("green");
    el.classList.add("red");
    wrap.style.background = "red";
            }
            setInterval(()=>{
                startTime(tc,th,tm,ts);
            },100)
        }
        function checkTime(i){
            if(i<10){
                i = 0+i;
            }
            return i
        }
        startTime(tc,th,tm,ts);
    </script>
    

    相关文章

      网友评论

          本文标题:计时器

          本文链接:https://www.haomeiwen.com/subject/salvnctx.html