如何用js设计时间倒计时

最新推荐文章于 2023-09-14 10:11:46 发布
最新推荐文章于 2023-09-14 10:11:46 发布
阅读量567 收藏 1
点赞数
分类专栏： javascript
原文链接：https://blog.csdn.net/x550392236/article/details/78033423
版权 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
    function countTime() {
        //获取当前时间
        var date = new Date();
        var now = date.getTime();
        //设置截止时间
        var endDate = new Date("2019-1-8 12:00:00");
        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);
        }
        if (h < 10) {
            h = '0' + h;
        }
        if (m < 10) {
            m = '0' + m;
        }
        if (s < 10) {
            s = '0' + s;
        }
        //将倒计时赋值到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>
Very mini
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue实现倒计时功能
花生日记
05-26 6890
同时也会将当前时间添加到“date”事件中。在 setTimeout方法中，我们可以对倒计时时间进行调整，在倒计时达到设定的时间值时，可以将当前倒计时时间与设定的时间值进行比较，如果倒计时时间在设定的时间范围内则将当前倒计时时间调到设定的范围内；然后我们使用“temp”方法获取当前的时间，在这里我们可以使用` start`方法来获取当前的时间，但是如果用“date”事件去获取的话，会导致 vue. js存在一个问题：无法获取当前时间，我们可以使用“date”事件的`end_time`方法去获取当前的时间。
Vue实现倒计时组件(可自定义时间倒计时功能的组件)：
SunPeng的博客
06-10 1万+
Vue实现倒计时组件(可自定义时间倒计时功能的组件)：
vue怎么实现时间倒计时
bonezeng的博客
12-07 395
vue怎么实现时间倒计时
vue时分秒倒计时
热门推荐
嘿喵财运旺旺
08-03 2万+
countTime:function () { //获取当前时间 var date = new Date(); var now = date.getTime(); //设置截止时间 var endDate = new Date(“...
Javascript实现商品秒杀倒计时（时间与服务器时间同步）
10-23
在一些购物商城经常看到有很多商品做秒杀活动，也就是倒计时，本篇文章给大家介绍Javascript实现商品秒杀倒计时（时间与服务器时间同步），需要的朋友可以了解下
JavaScript实现网页跨年倒计时
01-18
JavaScript网页–跨年倒计时，供大家参考，具体内容如下 最近学弟在追一个学妹，我在帮学弟出谋划策。 学妹告诉学弟，我怕我们之间是因为这段时间接触多了你才喜欢我的。等跨年的时候，如果你还喜欢我，那个时候我再...
元旦倒计时源码设计+显示元旦倒计时
01-06
内容概要：这是一段用于在网页上显示元旦倒计时的 JavaScript 代码。它可以计算出距离元旦还有多少天、小时、分钟和秒，并在网页上实时更新这些信息。 适用人群：这段代码适用于所有想在网页上添加元旦倒计时功能的...
JavaScript分秒倒计时器实现方法
12-09
在JavaScript设计一个分秒倒计时器，一旦时间完成使按钮变成不可点击状态 具体效果如下图，为了说明问题，调成每50毫秒也就是每0.05跳一次表， 真正使用的时候，把[removed]=function(){…}中的setInterval(“clock...
js倒计时代码
04-25
js倒计时代码，可以自己设置目标时间，分天，时，分，秒。
vue实现倒计时
最新发布
qq_48378883的博客
09-14 120
el-button v-if="eRcode" type="warning" @click="sendCode()" >发送验证码剩余{{ time }}秒
基于vue实现倒计时功能 天 /时/分/秒 / / 时/分秒
青衫折扇的博客
12-30 5118
其实很简单,这里就直接上代码了,都写好注释了 天/时/分/秒 //倒计时 countTime: function() { // 定义结束时间戳 const end = Date.parse(new Date('2020-1-12 10:10:10')) // 定义当前时间戳 const now = Date.parse(new Date()...
vue倒计时：天时分秒
黑眼圈
07-26 2095
<p>倒计时：{{day}}天 {{hour}}：{{min}}：{{second}}</p> data () { return { curStartTime: '2019-07-31 08:00:00', day: '0', hour: '00', min: '00', second: '00', } }, // 倒计时 countTime () { // 获取当前时间 let date = new Date() l
vue实现倒计时定时器
xc9711的博客
03-08 6011
前言 本文章将发布vue实现倒计时定时器，可用于考试系统自动交卷、商城未付款倒计时取消订单等效果 同时，如不清楚vue时间处理，可查看我上一个文章 vue时间处理 倒计时定时器 为了制作倒计时定时器，还需要将时分秒转时间戳 注意：一般倒计时皆为HH:mm:ss 时分秒形式，本方法不适用于年月日 时分秒的形式，如需要，则需要根据我本篇文章进行改造。处理时间的代码 以下为制造倒计时效果代码 // 界面 <template> <div> // 剩余时间显示在界面 {{resTime
VUE组件日时分秒倒计时
weixin_44059045的博客
01-24 763
因为产品说需要取服务器的时间戳，所以nowTime是从服务器取的当前时间戳，没有这个要求可以用new Date().getTime()代替； 组件代码 <template> <div class="DayDown"> <span>{{ dayString }}</span> <span>{{ hourString }}</span> <span>{{ minuteString }}</
Vue中设置倒计时
weixin_30776273的博客
07-11 3155
在Vue中，通过日期选择器选择时间（el-date-picker），然后创建与当前时间的倒计时，当选择的时间小于或等于当前时间时，倒计时内容为0，倒计时函数被清除。 HTML： （1）日期选择器部分，与formData.dead_line数据绑定 （2）提交按钮，与倒计时函数绑定，一旦提交，就开始执行倒计时 （3）倒计时显示区域，与formData.countd...
vue实现倒计时30分钟
一如年少丶的博客
05-05 7409
前言 在支付订单的业务场景下，通常会有一个支付倒计时的功能，今天我们就来实现一下 实现 首先，是两个div用来显示我们的剩余支付时间 <div style="font-size: 14px;color: #666;">剩余支付时间（超时自动关闭）</div> <div class="time"><i class="el-icon-time">&...
前端开发：在vue中实现按钮倒计时功能
软贱开发攻城狮
02-28 3734
前言 在vue中开发中，关于计时器的使用也是比较常见的知识点，如基于移动端的短信60秒倒计时按钮、阅读协议40秒等实际需求，很常见的需求也不复杂，主要是有些细节需要注意。那么本篇博文就来分享一下关于vue中实现倒计时功能的方法，方便查阅使用，如有问题请指正。 使用场景 在前端开发中基于移动端的短信验证码发送60s倒计时使用，用户协议阅读30s倒计时提示等等。 核心原理 主要要处理的是倒计时按钮提示的数字以及倒计时结束之后的提示文字，以及计时器来进行倒计时使用，以及标签层面和js中按钮触
设计秒倒计时器
05-24
这里给出一个简单的倒计时器设计： 1. 首先，需要一个 HTML 页面，其中包含一个显示倒计时的元素和一个按钮，用于启动倒计时。 ```html <!DOCTYPE html> 秒倒计时器 秒倒计时器 <p id="countdown">60 ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值