JS倒计时两种种实现方式

最新推荐文章于 2024-05-22 01:53:01 发布
最新推荐文章于 2024-05-22 01:53:01 发布
阅读量1.7k 收藏 8
点赞数 2
文章标签： html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52597446/article/details/119573492
版权

一：设置时长，进行倒计时。

代码如下：

 <html>
  <head>
  <meta charset="UTF-8">
  <title>简单时长倒计时</title>
  <SCRIPT type="text/javascript">        
              var maxtime = 60 * 60; //一个小时，按秒计算，自己调整!   
              function CountDown() {
                 if (maxtime >= 0) {
                      minutes = Math.floor(maxtime / 60);
                     seconds = Math.floor(maxtime % 60);
                     msg = "距离结束还有" + minutes + "分" + seconds + "秒";
                     document.all["timer"].innerHTML = msg;
                     if (maxtime == 5 * 60)alert("还剩5分钟");
                         --maxtime;
                 } else{
                     clearInterval(timer);
                     alert("时间到，结束!");
                 }
             }
             timer = setInterval("CountDown()", 1000);                
         </SCRIPT>
 </head>
 <body>
 <div id="timer" style="color:red"></div>
 <div id="warring" style="color:red"></div>
 </body>
 </html>

二：设置时间戳，进行倒计时。

代码如下：

<html>  
  <head>  
      <meta charset="UTF-8">  
      <title>js简单时分秒倒计时</title>  
      <script type="text/javascript">  
          function countTime() {  
              //获取当前时间  
              var date = new Date();  
             var now = date.getTime();  
             //设置截止时间  
             var str="2017/5/17 00:00:00";
             var endDate = new Date(str); 
             var end = endDate.getTime();  
             
             //时间差  
             var leftTime = end-now; 
             //定义变量 d,h,m,s保存倒计时的时间  
             var d,h,m,s;  
             if (leftTime>=0) {  
                 d = Math.floor(leftTime/1000/60/60/24);  
                 h = Math.floor(leftTime/1000/60/60%24);  
                 m = Math.floor(leftTime/1000/60%60);  
                 s = Math.floor(leftTime/1000%60);                     
             }  
             //将倒计时赋值到div中  
            document.getElementById("_d").innerHTML = d+"天";  
             document.getElementById("_h").innerHTML = h+"时";  
             document.getElementById("_m").innerHTML = m+"分";  
             document.getElementById("_s").innerHTML = s+"秒";  
             //递归每秒调用countTime方法，显示动态时间效果  
             setTimeout(countTime,1000);  
   
         }  
     </script>  
 </head >  
 <body onload="countTime()" >  
     <div>  
         <span id="_d">00</span>  
         <span id="_h">00</span>  
         <span id="_m">00</span>  
         <span id="_s">00</span>  
     </div>  
 </body>  
 </html>

停留的一抹光
关注
  • 2
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript 实现一小时倒计时计时器
qq_36428684的博客
04-01 5965
本篇文章使用js实现一个1小时倒计时的计时器我们容易犯的一个错误是重复点击开始按钮会导致计时速度加倍。这个bug可以使用类似于全局变量判断的方法解决，具体请看代码。（已经处理并测试完成）为了避免乱码，程序中的文字提示全部使用英语了。如果需要实现额外功能可以在此基础上再做修改。&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript"&gt...
js实现倒计时
a_dragon_的博客
12-23 726
倒计时
vue之事件绑定
deep_zhuheihei的博客
07-20 298
<!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>Doc
js 倒计时器（保姆级教程）
最新发布
m0_66729991的博客
05-22 634
utils文件夹中创建index.js 文件。2. main.js 挂载全局。1. 倒计时器封装的方法。
webJS基础-----制作一个时间倒计时
m0_64148419的博客
11-05 780
使用webJS的定时方法制作一个时间倒计时。
js倒计时
zhang515745112的博客
06-21 251
时间戳和当前时间的毫秒值相减，除1000转化成秒，传参到timer（intDiff）获取倒计时，天数不为空，只显示天数function timer(intDiff){    window.setInterval(function(){        var day=0,            hour=0,            minute=0,            second=0;//时间...
JS倒计时两种实现方式代码实例
10-15
本篇将介绍两种不同的JS倒计时实现方式。 ### 1. 设置时长进行倒计时 这种方式适用于已知具体时长的情况，如考试剩余时间。下面是一个简单的实例： ```html 简单时长倒计时 <script type="text/javascript...
ios 实现倒计时的两种方式
01-05
 主要使用的是NSTimer的scheduledTimerWithTimeInterval方法来每1秒执行一次timeFireMethod函数，timeFireMethod进行倒计时的一些操作，完成时把timer给invalidate掉就ok了，代码如下：  secondsCountDown = 60...
Java倒计时三种实现方式代码实例
08-18
Java 倒计时三种实现方式代码实例 Java 倒计时是指在 Java 编程语言中实现倒计时功能的各种方法和技术。倒计时是指从当前时间到达预设时间的一种计时方式，常用于计时器、定时器、倒计时器等应用场景中。下面将...
js实现倒计时效果
m0_46459427的博客
11-28 381
// 倒计时效果 // 1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 05 分减去25分，结果会是负数的。 // 2.用时间戳来做。用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数。 // 3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒） // 转换公式如下： // d = parseInt(总秒数/ 60/60 /24); .
js倒计时读秒
老实敲代码，佛只渡有缘人
08-23 696
前端实现点击倒计时获取验证码
javascript写的一个倒计时小程序
01-21
自己用javascript编写的一个倒计时小程序， 可以配置倒计时长，警告时长，倒计时结束提示； 有 开始、暂停、结束、重新计时 4个按钮功能； 在最后xx秒发出警告声音，在倒计时结束后发出结束声音。 声音用的是新闻联播的倒计时声音，不喜欢的可以自己找然后代替里面的声音文件即可。
如何写一个js指定时间倒计时
主要领域：前端开发
08-01 4351
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时</title> </head> <body> <div style="d...
用 js 实现倒计时
z__cc的博客
03-20 1858
【操作步骤】 （1) 使用 new Date() 获取当前时间，使用 new 调用一个带有参数的 Date 对象，定义结束的时间，endtime=new Date(2020/8/8)。使用 getTime() 方法获取现在时和结束时距离 1970 年 1 月 1 日的毫秒数。然后，求两个时间差。 把时间差转换为天数、小时数、分钟数和秒数显示。主要是用%取模运算。得到距离结束时间的毫秒数（剩余毫秒数），除以 1000 得到剩余秒数，再除以 60 得到剩余分钟数，再除以 60 得到剩余小时数。除以 24 得到
js之倒计时读秒
qq_35375529的博客
05-16 1600
#导入Jquery插件 <script type="text/javascript" src="../js/jquery-1.11.3.min.js"></script> #编写html标签 <input type="text" id="telephone" name="telephone"/> <input type="text" id="checkc...
js简单时分秒毫秒倒计时
热门推荐
猫老板的豆
09-19 1万+
js简单时分秒毫秒倒计时效果图 直接copy就能运行<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js时分秒毫秒倒计时</title> </head> <body> <div> <span id="_d">00
js实现倒计时（天时分秒）
sweetllh的博客
04-22 2493
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{ padding: 0; margin: 0; } div
JS 倒计时使用秒作倒计时实现方案
神夜空间
11-11 858
let end = new Date('2021-12-12 12:00:00') //结束时间 let cur = new Date() //当前时间 var difftime = parseInt((end - cur)/1000); //转化为秒 if(difftime > 0){ this.countDown(difftime) } formatBit (val) { val = +val return val > 9 ? val : '0' + .
js倒计时功能如何实现
05-26
JavaScript 实现倒计时功能的基本思路是获取当前时间和目标时间的差值，然后使用定时器每秒更新差值，最后将差值转化为天、小时、分钟、秒等格式进行展示。以下是一个简单的倒计时示例： HTML 代码： ```html <div id="countdown"></div> ``` JavaScript 代码： ```js // 目标时间，这里设置为 2022 年 1 月 1 日 0 点 0 分 0 秒 const targetTime = new Date('2022-01-01T00:00:00Z').getTime(); // 更新倒计时函数 function updateCountdown() { // 获取当前时间 const currentTime = new Date().getTime(); // 计算时间差 const timeDiff = targetTime - currentTime; // 转换为天、小时、分钟、秒 const days = Math.floor(timeDiff / (1000 * 60 * 60 * 24)); const hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); const minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60)); const seconds = Math.floor((timeDiff % (1000 * 60)) / 1000); // 显示倒计时 document.getElementById('countdown').innerHTML = `距离 2022 年 1 月 1 日还有 ${days} 天 ${hours} 小时 ${minutes} 分钟 ${seconds} 秒`; } // 每秒更新一次倒计时 setInterval(updateCountdown, 1000); ``` 在上面的代码中，我们首先定义了目标时间 `targetTime`，然后编写了一个 `updateCountdown` 函数来更新倒计时。该函数首先获取当前时间 `currentTime`，然后计算时间差 `timeDiff`，最后将时间差转换为天、小时、分钟、秒等格式并显示在页面上。 最后，我们使用 `setInterval` 函数每秒更新一次倒计时。这样，用户就可以在页面上看到距离目标时间的倒计时了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值