JS 倒计时

约定不等于承诺〃 2021-09-29 17:34 681阅读 0赞

经常遇到需要倒计时的地方，下面的JS可以简单实现倒计时，当然可以加上Css使得界面更加美观！

`<script type=` `"text/javascript"` `>`

`   ` `function`  `CountDown(){`

`       ` `var`  `EndTime= ` `new`  `Date(document.getElementById('endTime').value` `` `); ` ``

`       ` `var`  `NowTime = ` `new`  `Date();`

`       ` `var`  `t =EndTime.getTime() - NowTime.getTime();`

`       ` `var`  `day=Math.floor(t/1000/60/60/24);`

`       ` `var`  `hour=Math.floor(t/1000/60/60%24);`

`       ` `var`  `min=Math.floor(t/1000/60%60);`

`       ` `var`  `sec=Math.floor(t/1000%60);`

`       ` `document.getElementById(` `"t_day"` `).innerHTML = day  +` `"Days"` `;`

`       ` `document.getElementById(` `"t_hour"` `).innerHTML = hour + ` `"Hours"` `;`

`       ` `document.getElementById(` `"t_min"` `).innerHTML = min + ` `"Minutes"` `;`

`       ` `document.getElementById(` `"t_sec"` `).innerHTML = sec + ` `"Seconds"` `;`

`   ` `}`

`   ` `setInterval(CountDown,1000);`

`</script>`

`</head>`

`<body>`

Please select the endTime<input type="datetime-local" id='endTime'><br>

`    ` `<div` `>`

`        ` `<span id=` `"t_day"` `></span>`

`        ` `<span id=` `"t_hour"` `></span>`

`        ` `<span id=` `"t_min"` `></span>`

`        ` `<span id=` `"t_sec"` `></span>`

`    ` `</div>`

` `

`</body>`

转载于:https://www.cnblogs.com/jiangqiuju/p/8056538.html

发表评论取消回复

表情：

评论列表（有 0 条评论，681人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 天数倒计时时间倒计时

export function getOverTimeDown(endDateStr: string, outValue?: { value: string }, fn

àì夳堔傛蜴生んèń/ 2022年09月11日 12:10/ 0 赞/ 425 阅读

相关 js倒计时

//倒计时 function show_time() { //正数表达式 var re = /^\d+(?=\.{0,1}

我就是我/ 2022年08月05日 07:49/ 0 赞/ 358 阅读

相关 JS-实现秒表倒计时+缓存倒计时

实现秒表倒计时+缓存倒计时功能 <!DOCTYPE html> <html> <head> <meta ch

约定不等于承诺〃/ 2022年05月17日 12:38/ 0 赞/ 494 阅读

相关 JS时间倒计时

[JS时间倒计时][JS] HTML <div class="con"> <div class="time">

逃离我推掉我的手/ 2022年04月24日 04:44/ 0 赞/ 346 阅读

相关 js简单倒计时

涉及的知识点 setTime() setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 1.提示： 1000 毫秒= 1 秒。 2.提示

冷不防/ 2022年04月22日 00:52/ 0 赞/ 383 阅读

相关 js倒计时案例

> 在很多购物网站中，我们都能见到倒计时类的模块，那么常用的倒计时模块是怎么靠js实现的呢？下面告诉你答案！核心语法：date的使用；关键思想：利用时间差来计算和换算时

布满荆棘的人生/ 2022年03月25日 06:30/ 0 赞/ 326 阅读

相关 js倒计时

倒计时 { padding: 0; margin: 0; box

亦凉/ 2022年01月30日 02:19/ 0 赞/ 415 阅读

相关 js倒计时

　　　　　　　　　　　　　　var startTime = Date.parse(new Date())/1000;//开始时间

太过爱你忘了你带给我的痛/ 2021年10月23日 10:55/ 0 赞/ 567 阅读

相关 js倒计时

![20190820151447888.png][] function tow(n) { return n >= 0 &&

- 日理万妓/ 2021年10月19日 09:52/ 0 赞/ 569 阅读

相关 JS 倒计时

经常遇到需要倒计时的地方，下面的JS可以简单实现倒计时，当然可以加上Css使得界面更加美观！ `<script type=` `"text/javascript"` `>`

约定不等于承诺〃/ 2021年09月29日 17:34/ 0 赞/ 682 阅读