《倒计时》

卡布奇诺奶茶的独特

于 2017-06-07 15:55:22 发布

阅读量286

点赞数

分类专栏： Web小技能文章标签： web前端 html web javascript

本文链接：https://blog.csdn.net/qq_35119220/article/details/72900681

版权

Web小技能专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用HTML和JavaScript实现一个简单的倒计时功能，允许用户自定义结束时间，文中包含代码示例。

摘要由CSDN通过智能技术生成

概述：

此文件实现了简单时间倒计功能并可自定义设置停止计时的时间量.

Web截图：

代码详情：

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="卡布奇诺奶茶的独特">
  <meta name="Keywords" content="倒计时,Count down">
  <meta name="Description" content="此文件实现了简单时间倒计功能并可设置停止计时时间">
  <title>倒计时</title>
 </head>
	<style type="text/css">
		div{
			width:500px;/*div宽度：500像素*/
			margin:0 auto;/*div居中*/
			padding-left:10px;/*div内部内容左边距：10像素*/
			margin-top:230px;/*div外部上边距：230像素*/
		}
		li{
			background:#F2F2F2;/*li标签背景色*/
			width:90px;/*li标签宽度：90像素*/
			float:left;/*li标签左浮动*/
			list-style-position:inside;/*列表样式的位置在内部，在外部用：outside */
			list-style-type:none;/*列表样式的类型：空心圆*/
			text-align:center;/*文本居中*/
			font-weight:bold;/*字体加粗*/
		}
		li:hover{
			background:#CCCCCC;/*通过伪类元素：hover，来设置li标签动态背景色*/
		}
	</style>
	<script type="text/javascript">

//		var count = 0;

		//创建“getTime”函数
		function getTime(){
			//最后时间(未来时间)【自定义设置】
			var endTime = new Date('2022-01-01 00:00:00');
			//现在时间(系统时间)
			var nowTime = new Date();
			//最后时间减去现在时间的【时间差】
			var t = endTime.getTime()-nowTime.getTime();
			//天
			var d = 0;
			//时
			var h = 0;
			//分
			var m = 0;
			//秒
			var s = 0;
			//if判断
			if(t>=0){
				d = Math.floor(t/1000/60/60/24);
				h = Math.floor(t/1000/60/60%24);
				m = Math.floor(t/1000/60%60);
				s = Math.floor(t/1000%60);
			}
			/*
			 *在此设置停止时间量【10秒后停止倒计时】【与上方的“var count = 0;”语句相对应】
			 */
//			 count++;
//			 if(count==10){
//				 window.clearInterval(time);
//			 }
			//获取相关元素ID值得对象并对日期进行格式化操作
			document.getElementById("t_d").innerHTML = (d<10?"0"+d:d) + "天";
			document.getElementById("t_h").innerHTML = (h<10?"0"+h:h) + "时";
			document.getElementById("t_m").innerHTML = (m<10?"0"+m:m) + "分";
			document.getElementById("t_s").innerHTML = (s<10?"0"+s:s) + "秒";
		}
		//声明创建“time”时间对象及按照指定的周期（以毫秒计）来调用函数“getTime()”
		var time = window.setInterval("getTime()",1000);

	</script>
 <body>
	<!--ele start-->
	<div>
		<ul>
			<li id="t_d"></li>
			<li id="t_h"></li>
			<li id="t_m"></li>
			<li id="t_s"></li>
		</ul>
	</div>
	<!--ele end-->
 </body>
</html>

-----------------------------------------------

吐舌头感谢您倾心的阅读

卡布奇诺奶茶的独特

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《倒计时》

概述：此文件实现了简单时间倒计功能并可自定义设置停止计时的时间量.Web截图：代码详情：倒计时 div{ width:500px;/*div宽度：500像素*/ margin:0 auto;/*div居中*/ padding-left:10px;/*div内部内容
复制链接

扫一扫