精华内容
下载资源
问答
我要提问
  • 倒计时代码 倒计时代码
    2022-03-08 20:27:14

    今天学javascript,学到日期时间对象Date(),看到一个电商网站活动倒计时的案例，稍加修改。后来又想到比赛考试，2小时倒计时的例子，也试着实现了。现分享如下：
    一、电商网站倒计时
    一到了双十一或双十二或者聚划算店铺庆典活动等，电商网站都会出现倒计时的场景，如图所示，“距离结束07:53:58”，每秒钟执行一次。
    在这里插入图片描述

    代码如下：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Date对象-倒计时</title>
	</head>
	<body>
		<div id="countDown"></div>   <!--显示倒计时的区域-->
		<script type="text/javascript">
			function countDown(time) {
				var nowTime = +new Date(); //使用“+”运算符转换为数值型
				var inputTime = +new Date(time);
				if (nowTime <= inputTime) {
					var times = (inputTime - nowTime) / 1000;  //毫秒数，换算成秒
					var dd = parseInt(times / 60 / 60 / 24);  //剩余天数
					dd = dd < 10 ? '0' + dd : dd;
					var hh = parseInt(times / 60 / 60 % 24);  //剩余小时数
					hh = hh < 10 ? '0' + hh : hh;
					var mm = parseInt(times / 60 % 60);    //剩余分钟数
					mm = mm < 10 ? '0' + mm : mm;
					var ss = parseInt(times % 60);       //剩余秒数
					ss = ss < 10 ? '0' + ss : ss;
					document.getElementById("countDown").innerHTML=dd+'天'+hh+'时'+mm+'分'+ss+'秒';
				} else {
					clearInterval(countTime);
					document.getElementById("countDown").innerHTML = "活动已结束";
				}
			}
				var countTime=setInterval("countDown('2022-5-1 00:00:00')",1000);
		</script>
	</body>
</html>

    二、输入指定的小时数倒计时
    比如考试时间限定2小时，从2小时开始倒计时。运行时，弹出提示框，输入小时数。
    在这里插入图片描述
    运行效果
    在这里插入图片描述
    到时间后，停止，并弹出提示框“时间到”。
    在这里插入图片描述
    代码如下：

    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Date对象-倒计时</title>
		<style type="text/css">
			#countDown{
				font-size:80px;
				text-align: center;
				color:red;
			}
		</style>
	</head>
	<body>
		<div id="countDown"></div>
		<script type="text/javascript">
		  var duration=prompt("请输入小时数");
		  while (isNaN(duration)){
				duration=prompt("请输入小时数");
			}
		  var times=duration*60*60;    //小时数换算成秒数
			function countDown() {
				if(times>=0){
					var dd = parseInt(times / 60 / 60 / 24);
				  dd = dd < 10 ? '0' + dd : dd;
					var hh = parseInt(times / 60 / 60 % 24);
					hh = hh < 10 ? '0' + hh : hh;
					var mm = parseInt(times / 60 % 60);
					mm = mm < 10 ? '0' + mm : mm;
					var ss = parseInt(times % 60);
					ss = ss < 10 ? '0' + ss : ss;
					if(dd==0){
					document.getElementById("countDown").innerHTML="距离结束还有</br>"+hh+'时'+mm+'分'+ss+'秒';
					}else{
					document.getElementById("countDown").innerHTML="距离结束还有</br>"+dd+'天'+hh+'时'+mm+'分'+ss+'秒';
					}
					--times;        //每执行一次，秒数-1
		}else{
			alert("时间到！");
			clearInterval(timer);
		}
		}
		timer=setInterval("countDown()",1000);
		</script>

	</body>
</html>
    javascript 开发语言
    更多相关内容

  • jQuery京东商城商品秒杀倒计时代码

     2021-05-01 16:25:40
    jQuery京东商城商品秒杀倒计时代码是一款简单实用的每日秒杀倒计时代码，倒计时有显示时、分、秒功能。
    收起

  • Android 仿京东秒杀倒计时代码

     2020-08-27 22:05:59
    3.8女王节活动马上开始了，很多电商搞起活动来吸引顾客，下面小编给大家带来了Android 仿京东秒杀倒计时代码，需要的朋友参考下吧
    收起

  • js带闹铃功能的倒计时代码

     2020-11-23 23:18:27
    Js倒计时代码，带闹铃功能，自定义闹钟倒计时功能，点击开始按钮，即可开始倒数，代码不是太复杂，新手应该能看懂，代码分享给大家。 效果图： 源码： <html> <head> <title>Js倒计时，闹铃...
    收起

  • jQuery创意精美的网页倒计时代码

     2019-12-30 21:40:11
    jQuery创意精美的网页倒计时代码是一款时分秒倒计时计时器，点击数字设置好倒计时时间，确定后转到倒计时进度界面。
    收起

  • html5输入时间设置倒计时代码

     2019-11-10 14:51:00
    html5输入时间设置倒计时代码 html5输入时间设置倒计时代码 html5输入时间设置倒计时代码 html5输入时间设置倒计时代码
    收起

  • 3个HTML5网页倒计时代码特效

     2020-06-12 01:31:55
    3个HTML5网页倒计时代码特效是一款提供默认的翻牌样式，可以在所有支持HTML5 time元素的浏览器中正常工作。
    收起

  • js防刷新的倒计时代码 js倒计时代码

     2020-10-19 06:46:44
    主要为大家详细介绍了js防刷新的倒计时代码，js倒计时的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    收起

  • 详解JS实现简单的时分秒倒计时代码

     2020-12-09 14:58:44
    本文实例为大家分享了JS时分秒倒计时的实现的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js简单时分秒倒计时<...
    收起

  • WEB开发之注册页面验证码倒计时代码的实现

     2020-08-31 23:20:47
    近期在搞一个H5+backbone 项目,验证输入手机号 验证码倒计时功能，代码中包含了前端样式布局代码和后端逻辑实现，思路明确，具有参考借鉴价值，需要的朋友参考下吧
    收起

  • 网站倒计时代码

     2019-10-23 23:32:11
    网站倒计时代码2020年元旦新年倒计时代码，距离2020年还有多少天，有公历、农历、星期、天、时、分、秒等功能。
    收起

  • 2021年元旦倒计时代码

     2021-06-01 19:28:23
    简单javascript制作2021年元旦倒计时，2021年1月1日时间倒计时代码。
    收起

  • iOS中实现简单易懂秒杀倒计时／倒计时代码

     2020-08-31 10:44:43
    主要介绍了iOS中实现简单易懂秒杀倒计时／倒计时代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    收起

  • javascript 倒计时代码

     2020-12-10 15:17:29
    [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
    收起

  • Javascript倒计时代码

     2020-10-28 23:16:10
    JS脚本是在网上找到的，然后进行了改进，弥补了不足之处。
    收起

  • js设置日期倒计时代码

     2021-06-24 11:34:02
    js设置日期倒计时代码是一款简单的倒计时自定义日期时间倒计时代码。
    收起

  • JS即将发布添加倒计时代码

     2021-07-28 23:19:00
    JS即将发布添加倒计时代码是一款支持自定义设置日期时间倒计时代码。
    收起

  • java一分钟倒计时代码

     2018-06-28 13:27:25
    初学者代码 java一分钟倒计时代码
    收起

  • 北京奥运会倒计时代码

     2020-09-06 01:42:07
    液晶效果的奥运倒计时代码(带图片)
    收起

  • 2020年时间倒计时代码

     2021-04-25 05:53:36
    2020年时间倒计时代码是一款距离元旦还有多少天倒计时代码。
    收起

  • JavaScript实现倒计时代码段Item1（非常实用）

     2020-11-22 13:32:32
    现今团购网、电商网、门户网等，常使用时间记录重要的时刻，如时间显示、倒计时差、限时抢购等，本文分析不同倒计时效果的计算思路及方法，掌握日期对象Date，获取时间的方法,计算时差的方法，实现不同的倒时计效果...
    收起

  • 最全面的JS倒计时代码

     2021-01-19 15:39:32
    第一种：精确到秒的javascript倒计时代码  HTML代码:  <form name=form1> 离2010年还有: <input type=textarea name=left size=35 style=text-align: center> </form> [removed] ...
    收起

  • JS实现十分钟倒计时代码实例

     2021-01-19 15:54:29
    编写JS倒计时代码需要用到很多JavaScript知识，比如：if函数，Math.floor，定时器setInterval等等，如有不清楚的小伙伴可以参考PHP中文网的相关文章，或者访问 JavaScript视频教程。 举例：10分钟考试倒计时，当时间...
    收起

  • 微信页面倒计时代码（解决safari不兼容date的问题）

     2020-08-31 23:57:47
    本文主要分享了微信页面倒计时代码（pc端）,并在文章结尾分析了safari不兼容date的原因以及解决方法，具有很好的参考价值，需要的朋友一起来看下吧
    收起

  • 距离某一时间的时间倒计时代码，当到达此时间时告诉已经到达倒计时停

     2019-11-10 14:50:33
    距离某一时间的时间倒计时代码，当到达此时间时告诉已经到达倒计时停 距离某一时间的时间倒计时代码，当到达此时间时告诉已经到达倒计时停
    收起

  • 倒计时-jquery倒计时代码

     2021-05-15 21:19:03
    摘要:脚本资源,jQuery,倒计时 运行环境：HTML/PHP/ASP/
    收起

  • js实现倒计时关键代码

     2020-12-12 15:58:44
    我们经常会在一些电商网站上看到秒杀倒计时,双11倒计时.其实倒计时的效果实现起来也是很简单的,并不复杂. 首先呢,开始写之前一定要理清楚思路,思路清晰了,那写起来就容易多了,下面我分了几个步骤: 1.获取当前的时间,...
    收起

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 47,023
精华内容 18,809
热门标签
关键字：

倒计时代码

友情链接： STG4000Interface.rar