JS使用定时器实现倒计时

男娘i 2023-07-03 07:16 20阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>定时器实现倒计时</title>
      <style>
         body {
           font-size: 30px;
           text-align: center;
           color: red;
         }
      </style>
    
      <script>
        window.onload = function(){
          var demo = document.getElementById("demo");
          var endtime = new Date("2020/02/04 12:00:00"); //最终时间
          setInterval(clock, 1000); //开启定时器
          function clock() {
            var now = new Date(); //当前时间
            var second = parseInt((endtime.getTime() - now.getTime()) / 1000); //需要倒计时的时间
            var day = parseInt(second / 3600 / 24); //天数
            var hour = parseInt(second / 3600 % 24); //时
            var minute = parseInt(second / 60 % 60); //分
            var s = parseInt(second % 60); //秒
            
            // 三目运算添加10以下数字前面的 0 
            day < 10 ? day = "0"+day : day;
            hour < 10 ? hour = "0"+hour : hour;
            minute < 10 ? minute = "0"+minute : minute;
            s < 10 ? s = "0"+s : s;
    
            demo.innerHTML = "倒计时时间还剩："+day+"天 "+hour+"小时 "+minute+"分钟 "+s+"秒" 
          }
        }
      </script>
    </head>
    <body>
      <div id="demo">
        
      </div>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS使用定时器实现倒计时

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

男娘i/ 2023年07月03日 07:16/ 0 赞/ 21 阅读

相关 js时间戳+定时器简单实现倒计时

利用时间戳+定时器实现的倒计时小例子。仅实现到天。为了偷懒页面极为简陋，效果是可以实现的。 <p></p> <script> var p = doc

古城微笑少年丶/ 2023年02月17日 03:21/ 0 赞/ 11 阅读

相关 [JavaScript]js实现倒计时

<body> <time></time> <script> function isDate() {

逃离我推掉我的手/ 2022年11月29日 00:59/ 0 赞/ 288 阅读

相关 js使用setInterval实现倒计时

利用setInterval制作简单的js倒计时，点击按钮将触发定时器且按钮不可用 html： <button id="code" class="bt

清疚/ 2022年08月08日 13:44/ 0 赞/ 167 阅读

相关 js实现倒计时

最近有个页面需要实现，验证码发送后，进行60s的倒计时， ![Center][] 代码： var flag = 1; var i = 60;

谁借莪１个温暖的怀抱￠/ 2022年07月27日 14:55/ 0 赞/ 274 阅读

相关 JS实现倒计时效果

1. 显示当前系统时间 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Typ

柔情只为你懂/ 2022年06月10日 02:15/ 0 赞/ 305 阅读

相关 JS-实现秒表倒计时+缓存倒计时

实现秒表倒计时+缓存倒计时功能 <!DOCTYPE html> <html> <head> <meta ch

约定不等于承诺〃/ 2022年05月17日 12:38/ 0 赞/ 405 阅读

相关 js实现倒计时

<body contenteditable="true" spellcheck="false" style="height: 400px;">

我会带着你远行/ 2022年05月17日 06:48/ 0 赞/ 293 阅读

相关 js时间倒计时实现

<li id="time" style="display: none">3:00</li> $(function () {

青旅半醒/ 2022年04月22日 04:28/ 0 赞/ 349 阅读

相关 JS倒计时实现

此为分秒单位倒计时，需要时分秒倒计时的可以自行修改，也可到我的资源中去下载。 <html> <head> <meta charset="UTF-8"> <ti

约定不等于承诺〃/ 2022年04月10日 05:22/ 0 赞/ 510 阅读