js倒计时 天，时，分，秒

最新推荐文章于 2023-11-14 10:56:21 发布
最新推荐文章于 2023-11-14 10:56:21 发布
阅读量405 收藏
点赞数
分类专栏： Js 文章标签： js 倒计时

在这里插入图片描述

<!doctype html>  
<html>  

    <head>  
        <meta charset="UTF-8">  
        <title>js倒计时</title>  
        <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    </head>  

    <body> 
		
		<body>
			<div id="time"></div>
		</body>
		
		<script type="text/javascript" charset="utf-8">
				
				function count_down(time){
					//延迟一秒执行自己
					var iCount = setInterval(function () {
						//结束时间
						var endDate = new Date(time);
						//当前时间
						var nowDate = new Date();
						//相差的总秒数
						var totalSeconds = parseInt((endDate - nowDate) / 1000);
						
						//关闭定时器
						if(totalSeconds<=0) {
							clearInterval(iCount);
							alert("执行完毕");
							return;
						}
						
						//天数
						var days = Math.floor(totalSeconds / (60 * 60 * 24));
						//取模（余数）
						var modulo = totalSeconds % (60 * 60 * 24);
						//小时数
						var hours = Math.floor(modulo / (60 * 60));
						modulo = modulo % (60 * 60);
						//分钟
						var minutes = Math.floor(modulo / 60);
						//秒
						var seconds = modulo % 60;
						
						var t = days<10?'0'+days.toString():days;
						var s = hours<10?'0'+hours.toString():hours;
						var f = minutes<10?'0'+minutes.toString():minutes;
						var m = seconds<10?'0'+seconds.toString():seconds;
						
						var remaining_time = "还剩:" + t + "天" + s + "小时" + f + "分钟" + m + "秒";
						document.getElementById("time").innerHTML = remaining_time;
					}, 1000)
				}
				
				count_down("2019-07-01 12:00:00");
		</script>
    </body>  

</html>
车家大少爷
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS倒计时实例_天时分秒
10-19
下面小编就为大家带来一篇JS倒计时实例_天时分秒。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
js简单倒计时功能（天、时、分、秒）
weixin_45792701的博客
06-23 3184
js倒计时 运行结果：
JS倒计时两种种实现方式
Cover_face
08-10 1764
一：设置时长，进行倒计时。比如考试时间等等 代码如下： <html> <head> <meta charset="UTF-8"> <title>简单时长倒计时</title> <SCRIPT type="text/javascript"> var maxtime = 60 * 60; //一个小时，按秒计算，自己调整! function
JS实现时分秒倒计时
m0_46101895的博客
02-27 1075
前一段有同事提到了这个，特研究出来，有注释分享给大家 //html部分 <body onload="countTime()" > <div class="all"> <p>距离2021/2/28 00:00:00还有</p> <div> <span id="_d">00</span> <span id="_h">00</span> <span id="_m"
用js做一个倒计时(时分秒),js中倒计时器怎么实现
最新发布
wenangou的博客
11-14 5219
1.核心算法：输入的时间减去现在的时间就是剩余的时间，即倒计时 ，但是不能拿着时分秒相减，比如 02 分减去22分，结果会是负数的，所以要转换为毫秒；2.用时间戳来做，用户输入时间总的毫秒数减去现在时间的总的毫秒数，得到的就是剩余时间的毫秒数；3.把剩余时间总的毫秒数转换为天、时、分、秒 （时间戳转换为时分秒）。利用JavaScript函数做一个简单的倒计时。
js时分秒倒计时
yuzenan的博客
09-11 380
js时分秒倒计时 var myTime = setInterval(() => { //获取当前时间 var date = new Date(); var now = date.getTime(); //设置截止时间 var endDate = new Date("2020/09/12 00:00:00"); var end = endDate.getTime(); //时间差 var dif
jQuery 实现倒计时天,时,分,秒功能
10-18
总结一下，这个教程展示了如何利用jQuery实现一个简单的倒计时功能，包括天、时、分和秒的实时更新。虽然例子中使用了模拟数据，但在实际项目中，你需要根据具体的日期和时间计算差值。希望这个教程能对你有所帮助，...
javascript实现倒计时（精确到秒）
10-24
本文给大家分享的是个人项目中使用的javascript实现的精确到秒级的倒计时代码，十分的实用，有需要的小伙伴可以参考下。
js代码实现点击按钮出现60秒倒计时
10-23
主要介绍了js代码实现点击按钮出现60秒倒计时,需要的朋友可以参考下
原生JS时分秒倒计时
03-12
在JavaScript编程中，实现一个原生的时分秒倒计时功能是一项常见的需求，尤其在构建Web应用或者计时器类的小游戏中。本教程将详细讲解如何使用原生JavaScript实现这样的功能，包括计算剩余的天数、小时、分钟、秒...
js实现倒计时时分秒
03-29
js实现倒计时的例子
js实现天时分秒倒计时
qq_42961150的博客
10-13 1097
很久很久没更新文章啦！很久没来了，没想到粉丝都增加到了100多了，排名还没怎么减，感觉每一位支持我的小伙伴。今天还是记录点东西吧，我在过去的三个月里面，也记录了很多文章内容，我会尽量抽出时间写成博文和大家分享。话不多说，进入正题，今天分享一段js代码：实现一个简单的倒计时（n天n时n分n秒），内容比较基础，但是往往我们缺少的其实就是基础的东西。
vue之事件绑定
deep_zhuheihei的博客
07-20 298
<!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实现倒计时效果
m0_55531470的博客
08-19 1万+
案例分析： 1、倒计时效果是不断变化的，因此我们需要定时器来自动变化(setInterval) 2、三个黑盒子里面分别存放时、分、秒 3、三个黑盒子利用innerHTML放入计算的小时、分钟、秒数 4、(程序读取需要时间)第一次执行也是间隔毫秒数，因此刷新页面时会有空白 5、最好采用封装函数的方式，这样先调用一次这个函数，防止刚开始刷新页面有空白问题 6...
javaScript实现倒计时功能
热门推荐
qq_65715980的博客
07-08 1万+
目录一、主要思路二、css样式三、html代码四、js内容五、完整代码展示六、效果展示1.通过内置时间函数实例化日期对象获取当前时间 new Date。2.因为时间无法减去时间，有可能生成负数，所以采用时间戳的方法得到毫秒数形式的剩余时间，然后再把剩余时间转换为天、时、分、秒格式。3.最后把所获得的内容赋值给定义的变量。主要为了内容在页面展示美观，稍微美化一下。 三、html代码 定义一个默认格式为JavaScript引入定义变量。 四、js内容 1.首先获取html里面的spans里的全部标签
js几种倒计时实现方式
douyiqing的博客
04-02 9007
1. 常见获取验证码60s倒计时 var second = 60; var timer; // 倒计时 function countDown(){ second--; if(second == 0){ second = 60 clearTimeout(timer) return } timer = s...
js计算时间差，天、时、分、秒
Mick_小马哥
01-04 360
function getTimeDiff(_startTime, _endTime) { let startTime = new Date(_startTime.replace(/-/g, '/')); let endTime = new Date(_endTime.replace(/-/g, '/')); let diff = endTime.getTime() - startTime.g...
【JavaScript】输入秒数，将之这个数字转换为时分秒
A Lucky Boy的博客
04-17 7898
需求：用户输入秒数，可以自动转换为时分秒 分析： 用户输入总秒数 计算时分秒（封装函数）里边包含数字补零 打印输出 计算公式：计算时分秒 小时： h = parseInt(总秒数 / 60 /60 % 24) 分钟： m = parseInt(总秒速 / 60 % 60) 秒数： s = parseInt(总秒数 % 60) <script> // 用户输入总秒数 let second = +prompt('请您输入秒数：') // 计算时分秒（
Java 用户输入秒算出天、时、分、秒
h15835161250的博客
09-11 580
Java 用户输入秒算出天、时、分、秒 直接上代码 Scanner s = new Scanner(System.in); System.out.pring("输入秒："); int seconds = s.nextInt(); int day=seconds/(60*60*24);//天 int hour=(seconds-(60*60*24*day))/3600;//时 int minute=(seconds-60*60*24*day-3600*hour)/60;//分
天 时 分 html倒计时
05-14
以下是一个基本的 HTML 倒计时示例： ```html <!DOCTYPE html> <html> <head> <title>倒计时示例</title> <script> // 设置目标日期时间 var countDownDate = new Date("Oct 31, 2022 00:00:00").getTime(); // 每秒更新一次倒计时 var x = setInterval(function() { // 获取现在的日期时间 var now = new Date().getTime(); // 计算差值 var distance = countDownDate - now; // 计算天、小时、分钟和秒 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); // 显示倒计时结果 document.getElementById("countdown").innerHTML = days + " 天 " + hours + " 小时 " + minutes + " 分钟 " + seconds + " 秒 "; // 倒计时结束时显示消息 if (distance < 0) { clearInterval(x); document.getElementById("countdown").innerHTML = "倒计时已结束！"; } }, 1000); </script> </head> <body> <h1>距离 2022 年万圣节还有：</h1> <p id="countdown"></p> </body> </html> ``` 在这个示例中，我们使用 JavaScript 来计算当前时间和目标时间之间的差距，并将结果显示在 HTML 页面上。我们使用 setInterval() 函数来每秒更新一次倒计时。在倒计时结束时，我们使用 clearInterval() 函数来停止倒计时更新，并显示一个消息。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值