js倒计时器

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

html

<!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">

    <link rel="stylesheet" href="./index.css">

    <title>Document</title>

</head>

<body>

    <div class="clock-input">

        <input type="date" name="time-to" class="time-to" id="time-to" value="" οnchange="calcTime(this.value)">

    </div>

    <div class="container">

        <div class="clock-column">

            <p class="clock-day clock-timer"></p>

            <p class="clock-label">Days</p>

        </div>

   

        <div class="clock-column">

            <p class="clock-hours clock-timer"></p>

            <p class="clock-label">Hours</p>

        </div>

   

        <div class="clock-column">

            <p class="clock-minutes clock-timer"></p>

            <p class="clock-label">Minutes</p>

        </div>

   

        <div class="clock-column">

            <p class="clock-seconds clock-timer"></p>

            <p class="clock-label">Seconds</p>

        </div>

    </div>

    <script src="./index.js"></script>

</body>

</html>

css

html {

    font-size: 62.5%;

    font-family: 'Montserrat', sans-serif;

    font-weight: 300;

    line-height: 1rem;

    letter-spacing: .08rem;

}

body {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-flow: column;

    font-size: 1.4rem;

    font-weight: inherit;

    background-color: #1fc69d;

    height: 100vh;

    width: 100vw;

}

.container {

    position: relative;

    display: flex;

    flex-direction: row;

    justify-content: center;

    align-items: center;

    height: 20rem;

    width: 60rem;

    background-color: transparent;

    border-radius: 3px;

    box-shadow: none;

}

.clock-column {

    margin-right: 7rem;

    text-align: center;

    position: relative;

}

.clock-column:last-child {

    margin-right: 0;

}

.clock-label {

    padding-top: 10px;

    text-transform: uppercase;

    color: #131313;

    font-size: 14px;

    text-align: center;

    border-top: 1px solid rgba(19, 19, 19, 0.5);

}

.clock-timer {

    color: #131313;

    font-size: 36px;

    line-height: 1;

}

.clock-input {

    clear: both;

    text-align: center;

    max-width: 500px;

    width: 100%;

    margin: 0 auto 10px;

}

input#time-to {

    padding: 5px;

    border: 0;

    border-radius: 3px;

    font-size: 16px;

    font-family: monospace;

    text-align: center;

    color: #010101;

    background-color: #fff;

}

.done {

    color: #fff;

    font-weight: 600;

}

js

// load event listeners

loadEventListeners();

function loadEventListeners() {

    document.addEventListener('DOMContentLoaded', function() { calcTime(); });

};

var timeTo = document.getElementById('time-to').value,

        date,

        now = new Date(),

        newYear = new Date('1.1.2020').getTime(),

        startTimer = '';

// calculate date, hour, minute and second

function calcTime(dates) {

    //ui variables

    clearInterval(startTimer);

    if(typeof(dates) == 'undefined'){

        date = new Date(newYear).getTime();

    }else {

        date = new Date(dates).getTime();

    }

    function updateTimer(date){

        var now = new Date().getTime();

        var distance = date - now;

        // Time calculations for days, hours, minutes and seconds

        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);

        // select element

        document.querySelector('.clock-day').innerHTML = days;

        document.querySelector('.clock-hours').innerHTML = hours;

        document.querySelector('.clock-minutes').innerHTML = minutes;

        document.querySelector('.clock-seconds').innerHTML = seconds;

        if(now >= date){

            clearInterval(startTimer);

            document.querySelector('.clock-day').innerHTML = 'D';

            document.querySelector('.clock-hours').innerHTML = 'O';

            document.querySelector('.clock-minutes').innerHTML = 'N';

            document.querySelector('.clock-seconds').innerHTML = 'E';

        }

    }

    startTimer = setInterval(function() { updateTimer(date); }, 1000);

}

SWAGSoul
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
VB倒计时器和JS当前时间
01-21
VBscript做计时器,遇到一个问题,怎么在页面上不断的调用一个VB函数呢…. 例如倒计时,如何让秒数在不刷新的情况下走动… 想了好久,查了好多地方都是用JavaScript做的… 最后才发现了一个,是VBscript帮助上都没有说的....
JS实现倒计时功能
qq_65316236的博客
03-23 756
js实现倒计时功能
用js做一个倒计时(时分秒),js中倒计时器怎么实现
最新发布
wenangou的博客
11-14 4276
1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 02 分减去22分，结果会是负数的，所以要转换为毫秒；2.用时间戳来做，用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数；3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）。利用JavaScript函数做一个简单的倒计时。
基于 js 制作一个倒计时
weixin_62897746的博客
02-07 2616
代码实现思路： 1. 获取 input 的参数，和现在时间。 2. 点击开始则，input 框的时间参数减去现在时间。 3. 设置定时器，每一秒执行一次。 4. 点击清空则，清除 input 框的内容，停止定时器 5. 给 input 框设置正则表达式，只能输入数字，输入其他则返回：输入错误 6. 倒计时时间可以自己进行改变，改变后剩余时间自动发生变化。
countdownjs-plugin时间倒计时组件
weixin_44960636的博客
08-17 380
时间倒计时，日期倒计时，活动倒计时 gitHub地址：https://github.com/wesleyXuL/countdownjs-plugin。倒计时组件，传入4个参数，开始时间，结束时间，倒计中回调，结束回调，返回一个对象，对象中有日，小时，分，秒。插件地址：https://www.npmjs.com/package/countdownjs-plugin。
JavaScript分秒倒计时器实现方法
10-24
主要介绍了JavaScript分秒倒计时器实现方法,可实现按照毫秒倒计时的效果,具有一定参考借鉴价值,需要的朋友可以参考下
js实现倒计时器自定义时间和暂停
12-12
js倒计时器可自定义时间和暂停，效果如下，点击start 开始计时，end结束计时 分别复制 H5 css js 代码即可实现，具体的算法在js控制函数中（都写了注释） css html,body{ width:100%;height:100%; } .content{ ...
JavaScript实现网页跨年倒计时
01-18
JavaScript网页–跨年倒计时，供大家参考，具体内容如下 最近学弟在追一个学妹，我在帮学弟出谋划策。 学妹告诉学弟，我怕我们之间是因为这段时间接触多了你才喜欢我的。等跨年的时候，如果你还喜欢我，那个时候我再...
js实现简单的倒计时功能
weixin_43430432的博客
04-01 1230
使用Date内置对象实现一个简单的倒计时，用户输入目标年月日，点击开始可以看到剩余时间。新手练习，欢迎大家讨论并指出错误。注意不可以输入当前时间之前的时间。
倒计时小插件，懒人专用
胡云峰的博客
01-29 1480
一、下载该插件。 下载地址：https://download.csdn.net/download/weixin_43684214/78400201 二、解压后，打开浏览器的开发者模式 三、安装后效果如图
vue之事件绑定
deep_zhuheihei的博客
07-20 282
<!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定时器介绍：倒计时定时器setTimeout、间隔定时器setInterval
YY的博客
10-13 4481
js定时器介绍：倒计时定时器setTimeout、间隔定时器setInterval
js实现倒计时特效（背景颜色随时间改变）
Zhang_wang_yun的博客
04-18 910
js实现倒计时特效（背景颜色随时间改变）
js中倒计时器怎么实现,js如何实现倒计时秒
神经网络爱好者
11-03 664
大家好，小编为大家解答js倒计时三种简单实现方式的问题。很多人还不知道js中倒计时器怎么实现，现在让我们一起来看看吧！
js:运用JavaScript写一个倒计时模版
astar2022的博客
08-26 1485
今天更新了定时器倒计时方面的知识，希望大家多多支持！
使用js定时器实现倒计时功能
m0_61480985的博客
10-30 1396
首先还是先理一下思路，先要确定一个具体的时间，你想从哪个时间到哪个时间，我这个就是从现在的时间到2022年过年，然后使用data对象获取天、小时、分钟、秒，之后再使用定时器让它像上图一样能够一直保持运动的状态。new data()表示的是当前时间，也就是电脑上的时间，如果前面有个+，表示的当前时间的毫秒，转换为毫秒了。还需要注意的一点是截止时间是阳历的时间，因为获取的当前时间是阳历的，所以截止时间也是阳历的，这点需要注意。倒计时使用的技术主要就是js中的定时器。
javaScript实现倒计时功能
热门推荐
qq_65715980的博客
07-08 1万+
目录一、主要思路二、css样式三、html代码四、js内容五、完整代码展示六、效果展示1.通过内置时间函数实例化日期对象获取当前时间 new Date。2.因为时间无法减去时间，有可能生成负数，所以采用时间戳的方法得到毫秒数形式的剩余时间，然后再把剩余时间转换为天、时、分、秒格式。3.最后把所获得的内容赋值给定义的变量。主要为了内容在页面展示美观，稍微美化一下。 三、html代码 定义一个默认格式为JavaScript引入定义变量。 四、js内容 1.首先获取html里面的spans里的全部标签
js基础-批量生成标签 100个小方框
姗姗的博客
07-08 1894
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Co...
js中倒计时器怎么实现
05-04
在 JavaScript 中实现倒计时器通常需要用到 `setTimeout` 或 `setInterval` 函数。下面是一个基本的倒计时器实现： ```javascript // 定义倒计时函数 function countdown(endTime) { const now = new Date()....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值