原生js-倒计时功能

最新推荐文章于 2024-05-11 10:05:08 发布
最新推荐文章于 2024-05-11 10:05:08 发布
阅读量314 收藏
点赞数 1
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/demons19961019/article/details/126337363
版权

使用原生js实现倒计时功能

 

实现倒计时的基本功能，封装了补零操作，全程使用原生js代码实现

主要思路，在计时器中写js代码，目的调用计时器，在页面实时刷新倒计时内容

获取当前系统时间，和想要进行倒计时的时间之间相减，得到时间戳差值

对时间戳差值进行换算处理和补零处理

最后输出到页面即可

Demons小妖
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
原生js实现倒计时--2018
10-20
本文主要介绍了原生js实现倒计时--2018的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧
原生js实现倒计时
杜伊沫的博客
04-02 1191
原生原生js实现倒计时的思路 1、用原生js实现倒计时，首先得利用 Date 获取系统提供的当前时间，其实还需要一个截止时间，这样才可以去思考下来应该怎么实现倒计时这个功能 2、既然是倒计时，肯定会用setInterval(()=>, 时间数) 来实现自动计时 2、利于系统的当前时间和用户提供的截止时间，我们可以知道总共还剩多少时间，再将剩下时间分别换算成天、时、分和秒， 3、当到了截止时间...
js原生实现倒计时
m0_50037012的博客
09-29 334
最近在制作网站的404错误页面，想做一个倒计时结束跳转的效果，从网上看了很多教程和方法都没有找到简单合适的，于是自己编写了一个，现在分享出来，供大家参考。如上，就能完美实现倒计时结束跳转了。
原生JS实现倒计时功能
面对疾风吧
08-16 989
原生JS实现的倒计时功能 效果图 说明：在代码第四十航行，设置你要倒计时的时间是的参照物 2019年8月16日 16:21:18 距离 2018-8-22 是负的360天 17小时 20分 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti...
用原生js实现倒计时
qq_56715703的博客
11-26 230
(tarDate - nowData) / 1000：日期对象相减获取到毫秒差值 (毫秒差)，1毫秒=0.001秒。86400:1天=24小时，1小时=60分钟，1分钟=60秒。所以是24*60*60=86400。3600:1小时=6060分钟，1分钟=60秒。所以是60*60=3600。为了方便计算，用parseInt取整。
用原生JS实现一个倒计时功能
ONLYSRY的博客
07-07 294
用原生JS实现一个倒计时功能
原生js实现倒计时功能（多种格式调用）
11-27
倒计时-多种格式调用-原生js封装</title> <link rel="shortcut icon" href="../public/image/favicon.ico" type="images/x-icon"/> <link rel="icon" href="../public/image/favicon.png" type=...
原生js实现倒计时功能 图片
02-14
日常开发中，电商经常使用到抢购，不过当抢购的时候会用到倒计时
原生js实现节日时间倒计时功能
10-20
本文主要分享了原生js实现节日时间倒计时功能的示例代码。具有一定的参考价值，下面跟着小编一起来看下吧
原生JS时分秒倒计时
03-12
原生JS时分秒倒计时，简洁易懂的公式，包括剩余天数，小时，分钟，秒，毫秒
原生JS写法精简倒计时(时分秒)
10-29
* 原生JS写法，精简倒计时 * 用法： * var test = new JJCountdown(计时总时间, 显示计时dom_id, 回调函数).show(); // output hh:mm:ss 00:00:00 * var test = new JJCountdown(计时总时间, 显示计时dom_id, 回调函数).show('m'); // output mm:ss 00:00 * var test = new JJCountdown(计时总时间, 显示计时dom_id, 回调函数).show('s'); // output ss 00
jsp倒计时简单实现方法
01-08
本文实例讲述了jsp倒计时简单实现方法。分享给大家供大家参考，具体如下： <%@ page language=java import=java.util.* pageEncoding=UTF-8%> <% //当前时间毫秒数 Long current_time1=System.currentTimeMillis(); //结束时间毫秒数 Long end_time2=1337875200000l; //计算时间差 Long time2=end_time2-current_time1; //转换为秒数 int second=(int)(time2/1000)
JS_原生js实现60秒倒计时
小歪博客
06-23 6141
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <div onclick="test()" style="cursor:pointer;" id="time">倒计时器</div> </body> </html> <scr
原生js倒计时完美实现
tym3515的博客
03-24 1908
js倒计时 var oSpan = document.getElementsByTagName('span')[0]; function tow(n) { return n &gt;= 0 &amp;&amp; n &lt; 10 ? '0' + n : '' + n; } function getDate() { var oDate = new Date();//获取现在日期对象 ...
原生js、计时器实现倒计时
代码小宝宝的博客
02-16 1870
原生js、计时器实现倒计时 1.Demo展示( 时间差：now—2月28号00:00 )： 2 . Html布局： &amp;amp;lt;div class=&amp;quot;wrap&amp;quot;&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;times&amp;quot;&amp;amp;gt; &amp;amp;lt;span class=&
原生js倒计时效果
ruanhongbiao的专栏
07-13 414
原生js实现倒计时的效果，结束时间时间可以自己设置，主要用到了new Date( )和getTime( ),然后再用parseInt( )转化。new Date() //当前时间 getTime() //指定的日期和时间距 1970 年 1 月 1 日午夜（GMT 时间）之间的毫秒数完整代码：&lt;script&gt; function FreshTime() { v...
TypeScript中的函数类型注解：精确定义行为与意图
最新发布
逐星的博客
05-11 404
在TypeScript中，函数不仅是一段执行特定任务的代码块，它们还可以拥有自己的类型。函数类型注解允许开发者定义函数的参数类型和返回值类型，从而提高代码的可读性和可维护性。函数类型注解是TypeScript中定义函数时的重要特性，它有助于确保函数参数和返回值符合预期，从而提高代码的准确性和安全性。
html5京东秒杀页面代码,静态页面（一）：原生JS模拟京东秒杀专场倒计时
06-07
以下是一个简单的html5京东秒杀页面代码，可以通过原生JS模拟京东秒杀专场倒计时： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>京东秒杀页面</title> <style> #countdown { font-size: 36px; text-align: center; margin-top: 100px; } </style> </head> <body> <div id="countdown"></div> <script> // 设置秒杀结束时间 var endTime = new Date("2022-01-01 00:00:00").getTime(); // 每秒更新倒计时 var countdown = setInterval(function() { // 获取当前时间 var now = new Date().getTime(); // 计算剩余时间 var distance = endTime - now; // 将剩余时间转换为天、时、分、秒 var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // 将倒计时显示在页面上 document.getElementById("countdown").innerHTML = "距离秒杀结束还有：" + days + "天 " + hours + "时 " + minutes + "分 " + seconds + "秒 "; // 如果倒计时结束，清除倒计时 if (distance < 0) { clearInterval(countdown); document.getElementById("countdown").innerHTML = "秒杀已结束"; } }, 1000); </script> </body> </html> ``` 这个代码通过设置秒杀结束时间，然后每秒更新倒计时，将剩余时间转换为天、时、分、秒，并将倒计时显示在页面上。当倒计时结束时，会清除倒计时并显示“秒杀已结束”。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值