js实现时分秒倒计时

最新推荐文章于 2023-11-14 10:56:21 发布
最新推荐文章于 2023-11-14 10:56:21 发布
阅读量1.4k 收藏 5
点赞数
分类专栏： javascript 文章标签： js 倒计时
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/star0311/article/details/103339153
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js时分秒毫秒倒计时</title>
</head>
<body>
<div class="active_time" id="active_time"></div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
    //js部分
    function countTime(value) {
        //获取当前时间
        var date = new Date();
        var now = date.getTime();

        //设置截止时间
        //在pc端浏览器可以这样写
        var endDate = new Date("2019-12-03 00:00:00");
        //移动端必须这样写，因为ios不支持日期中间是-链接，会报错
        //var endDate = new Date("2019/7/22 00:00:00");
        var end = endDate.getTime();
        //时间差
        var differTime = end - now;
        //定义变量,h,m,s保存倒计时的时间
        var h, m, s;
        if (differTime >= 0) {
            h = Math.floor(differTime / 1000 / 60 / 60);
            m = Math.floor(differTime / 1000 / 60 % 60);
            s = Math.floor(differTime / 1000 % 60);
            h = h < 10 ? ("0" + h) : h;
            m = m < 10 ? ("0" + m) : m;
            s = s < 10 ? ("0" + s) : s;
            var timeDom = "倒计时：" + h + "小时" +  m + "分" +  s + "秒";
            $("#active_time").text(timeDom);
            //递归调用函数所以是延时器不是定时器
            setTimeout(function () {
                countTime(value)
            }, 1000);
        } else {
            var timeDom ="00小时 00分 00秒";
            $("#active_time").text(timeDom);
        }}
    countTime()
</script>
</body>
</html>
star...
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现倒计时时分秒
03-29
js实现倒计时的例子
原生JS时分秒倒计时
03-12
原生JS时分秒倒计时，简洁易懂的公式，包括剩余天数，小时，分钟，秒，毫秒
js实现时分秒
weixin_33757609的博客
03-22 218
&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body&gt;Time:&lt;input name="time" type="text"  onclick="_SetTime(this)"/&gt;&lt;/body&gt;&lt;/html&gt;&lt;script type=&quo
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
倒计时计算-时分秒
ANNENBERG的博客
01-08 1802
1. setClock:function(time){ var that=this, sec= parseInt(time) , clockCount={}, strTimer=""; clockCount=setInterval(function(){ if(sec==0){ $(".js-count-down").html("活动已经结束"); clearInterval(clockCount); return false; } strTimer = that.secondToDate(sec
简单实用的js倒计时 时分秒倒计时
07-05
总的来说，JavaScript实现时分秒倒计时是一项基础但实用的技能，通过熟练掌握这一技术，开发者可以为用户提供更加直观和互动的体验。无论是简单的网页计时还是复杂的业务逻辑，理解并应用这些基础知识都是至关重要的...
【JavaScript】11.JS实现简单的时分秒倒计时
返璞归真
11-01 388
代码： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;js简单时分秒倒计时&lt;/title&gt; &lt;script type="text/javascript
时分秒倒计时---方法
wozouludaifeng的博客
03-01 479
总秒数 CountDown(){ let maxtime = 30 //倒计时间总秒数 this.timer = setInterval(()=>{ if (maxtime >= 0) { let hour = Math.floor((maxtime / 3600) % 24); let minutes = Math.floor((maxtime / 60) % 60); let seconds
时分秒倒计时
cj14227的博客
04-10 2537
hour=1 minutes=2 seconds=3 var maxtime = hour*60*60+minutes*60+seconds function CountDown() { if (maxtime >= 0) { hour = Math.floor(maxtime / 60/60); minutes = Math.floor(maxti...
倒计时，时分秒格式
12-27
时分秒格式的倒计时，代码简单易懂，非常好用！ 时分秒格式的倒计时，代码简单易懂，非常好用！
天时分秒倒计时
04-20
显示天、小时、分、秒的套计时绚丽页面。 界面美观大方，先设置时间，按下倒计时（go）的晶莹按钮，下面显示具体情况。 最大优点是界面真的非常好看。
时分秒倒计时.html
04-21
JavaScript的计时器，简单的写一个春节时间倒计时，主要就是时间的计算，对时分秒的计算，年月的计算。
js实现到计时 格式 时分秒
04-12
NULL 博文链接：https://gaojunwei.iteye.com/blog/1703733
倒计时时分秒
diaoxiurao2593的博客
05-25 105
<!doctype html> <html> <head> <meta charset="utf-8"> <title>倒计时js代码 </title> </head> <body> 倒计时js代码 <DIV id="CountMsg" cla...
用js做一个倒计时(时分秒),js中倒计时器怎么实现
最新发布
wenangou的博客
11-14 5390
1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 02 分减去22分，结果会是负数的，所以要转换为毫秒；2.用时间戳来做，用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数；3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）。利用JavaScript函数做一个简单的倒计时。
js计时时分秒
Fly的博客
12-17 1001
js计时时分秒 1.js var TimeBar = { timer: 0, hour: 0, minute: 0, second: 0, dateContent: "00:00:00", creatHtml: function() { var content = '<p class="timeBar">' + TimeBar.dateContent + '&lt...
vue3实现秒杀时分秒倒计时
04-25
好的，我明白了。关于vue3实现秒杀时分秒倒计时，你可以通过使用Vue.js框架的计时器组件来实现。具体实现方式如下： 1. 在Vue组件中定义一个倒计时的计数器，该计数器将在每个定时器轮询时减小： ```javascript data() { return { countDown: 60 * 60 * 24, // 秒数，表示一天的时间 timer: null // 定时器 }; } ``` 2. 在mounted生命周期钩子中启动计时器，每秒减少计时器的值并更新页面，在倒计时结束后停止计时器： ```javascript mounted() { this.timer = setInterval(() => { if (this.countDown > 0) { this.countDown--; // 更新页面展示 } else { clearInterval(this.timer); } }, 1000); } ``` 3. 在模板中展示倒计时的小时，分钟，秒数： ```javascript <div> {{ formatTime(countDown).hours }} {{ formatTime(countDown).minutes }} {{ formatTime(countDown).seconds }} </div> ``` 4. 实现一个辅助函数formatTime来将秒数转换为小时、分钟、秒数： ```javascript methods: { formatTime(time) { const hours = Math.floor((time / (60 * 60)) % 24); const minutes = Math.floor((time / 60) % 60); const seconds = Math.floor(time % 60); return { hours: this.formatTwoDigits(hours), minutes: this.formatTwoDigits(minutes), seconds: this.formatTwoDigits(seconds) }; }, formatTwoDigits(num) { return num.toString().padStart(2, '0'); } } ``` 这样就实现了vue3实现秒杀时分秒倒计时的功能。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值