倒计时：精确到天时分秒的计时器html前端设计

想设置桌面倒计时显示不？
我们今天学习到web中的计时器属性，可以用倒计时的方式在网页中通过设定一个日期进行动态倒计时器哦！快来看看吧。

我们首先简单的设置几个盒子和样式。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;background-color: antiquewhite;}/* 清除浮动 */.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0;}.clearfix {*zoom: 1;}.time {width: 280px;margin: 50px auto;line-height: 30px;text-align: center;}.time h3 {font-size: 25px;margin-bottom: 20px;}.time .day {float: left;margin: 10px 0 10px;width: 50px;height: 30px;color: #ff55ff;}.time .hours,.time .minutes,.time .seconds {float: left;margin: 10px;width: 50px;height: 30px;background-color: #ff92fe;border-radius: 8px;color: #ffffff;font-weight: 700;box-shadow: 2px 2px 3px 2px rgba(0, 0, 0, .2);}</style>
</head><body><div class="time clearfix"><h3>距离20岁生日，还有</h3><div class="day"></div><div class="hours"></div><div class="minutes"></div><div class="seconds"></div></div>
</body>
</html>

然后，我们通过js对其进行计时器控制，换算时间差为秒数，通过简单的计算化为天数，小时数，分钟数和秒数，最后绑定计时器进行倒计时变化。

<script>window.addEventListener('load', function () {var day = document.querySelector('.day')var hours = document.querySelector('.hours')var minutes = document.querySelector('.minutes')var seconds = document.querySelector('.seconds')function countDown(time) {var nowTime = +new Date(); // 返回当前时间总的毫秒数var inputTime = +new Date(time); // 返回输入时间总的毫秒数var times = (inputTime - nowTime) / 1000; //剩余时间总的秒数 var d = parseInt(times / 60 / 60 / 24).toString().padStart(2, '0') // 天var h = parseInt(times / 60 / 60 % 24).toString().padStart(2, '0') //时var m = parseInt(times / 60 % 60).toString().padStart(2, '0') // 分var s = parseInt(times % 60).toString().padStart(2, '0')// 当前的秒day.innerHTML = d + '天'hours.innerHTML = h + '时'minutes.innerHTML = m + '分'seconds.innerHTML = s + '秒'}// countDown('2022-12-12 00:00:00')setInterval(function () {countDown('2022-12-20 00:00:00')}, 1000)})</script>

最后效果图就是这样啦，实际是动态的秒数会随着当前时间的流逝不断减少，只需要更改指定日期和标题就可以获得你想要的倒计时啦！学到的同学记得点赞评论哦！

倒计时：精确到天时分秒的计时器html前端设计相关推荐

js倒计时天时分秒php,JS制作分秒倒计时器
这篇文章主要介绍了JavaScript分秒倒计时器实现方法,可实现按照毫秒倒计时的效果,具有一定参考借鉴价值,需要的朋友可以参考下本文实例讲述了JavaScript分秒倒计时器实现方法.分享给大家供 ...
2022-07-20 工作记录--React-js将时间戳转换成“天时分秒” + “天时分秒”的倒计时
一.实现效果假如后端返了两个数据:当前时间的13位时间戳currentTimestamp.到期时间的13位时间戳expireTimestamp,想实现"还有多久到期的时间"的倒计 ...
mysql 毫秒转换为天时分秒
实现逻辑,指定一个毫秒值,通过sql转换为秒,再转换为剩余X天X小时X分X秒,通常用来计算活动剩余倒计时. set @time = 671218437/1000; -- 毫秒转换为天时分秒(67121 ...
php多人访问抽奖倒计时一致,Javascript和PHP倒计时器为每个人显示相同的计时器...
我有生成倒计时器所需的脚本,该计时器有一个启动和恢复按钮.我试图做的是在一个控制另一页上的计时器的页面上有启动,停止和重置按钮. 因此,如果用户X访问page.html,他们将看到一个0的计时器. A ...
JS将秒数换算成具体的天时分秒
JS将秒数换算成具体的天时分秒(绝对好用,简单易懂) count为传入的秒数,time为换算后的天时分秒 function formattingTime(count) {var time = '';v ...
matlab 秒数转换时分秒,将秒转换为天时分秒格式字符串(如是0天0时0分就显示秒)...
1./** 2. * 将秒转换为天时分秒格式字符串(如是0天0时0分就显示秒) 3. * @param seconds 秒数 4. * @return 返回天时分秒字符串 5. */ 6.privat ...
js将秒转为天时分秒格式
项目中后端传过来的值是以秒为单位,但是渲染是需要将格式转为 1.超过一天则以天时分秒显示,不超过一天则以时分秒显示 2.超过一小时则以时分秒显示,不超过一天则以分秒显示 3.超过一分钟则以分秒显示,不 ...
根据时间戳获取总用时（天时分秒）
//获取总用时(天时分秒) export const getTotalTime = (time) => { if (!time) { return ""; } let s = ...
将秒数转换成天具体的天时分秒
/*** 将秒数转换成天具体的天时分秒* 比如172800S转换成2天0时0分0秒* @param second* @return*/ public String formatSecond(Objec ...

倒计时：精确到天时分秒的计时器html前端设计

倒计时：精确到天时分秒的计时器html前端设计相关推荐

最新文章

热门文章