博客列表 >自动倒计时,显示:天-时:分:秒4-1

自动倒计时,显示:天-时:分:秒4-1

moonheart的博客
moonheart的博客原创
2019年04月02日 16:56:57845浏览

实例

<!DOCTYPE html>
<html>
<head>
	<title>倒计时:起止日期</title>
	<script type="text/javascript" src="../static/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="../static/js/jquery-ui-1.12.1/jquery-ui.min.js"></script>
	<link rel="stylesheet" type="text/css" href="../static/js/jquery-ui-1.12.1/jquery-ui.min.css">
	<script type="text/javascript" src="../static/js/jQuery-Timepicker/dist/jquery-ui-timepicker-addon.min.js"></script>
	<script type="text/javascript" src="../static/js/jQuery-Timepicker/dist/i18n/jquery-ui-timepicker-zh-CN.js"></script>
	<link rel="stylesheet" type="text/css" href="../static/js/jQuery-Timepicker/dist/jquery-ui-timepicker-addon.min.css">
	<style type="text/css">
		*{margin: 0;padding: 0;}
		.goback{
			font-size: 40px;
			width: 1200px;
			height: 180px;
			margin: 50px auto;
			background-color: #82d743;
			line-height: 180px;
			text-align: center;
			color: #fff;
			border-radius: 15px;
		} 
		.seleDateTime{
			width: 600px;
			height: 220px;
			line-height: 50px;
			text-align: center;
			margin: 5px auto;
			background-color: #5b7e91;
			border-radius: 8px;
			font-size: 26px;
			color: #fff;

		}
		.seleDateTime p{
			margin-top: 20px;
		}
		.seleDateTime input{
			width: 224px;
			height: 34px;
			border: 2px solid #96514d;
			border-radius: 8px;
			font-size: 22px;
			padding: 3px;
			margin: 20px auto;
		}
		.seleDateTime button{
			width: 380px;
			height: 40px;
			font-size: 22px;
			/*border-radius: 8px;*/
			margin: 20px auto;
			background-color: #82d743;
			color: #fff;
		}
	</style>
</head>
<body>
<div class="goback">
	<p>倒计时:<span> </span></p>
</div>
<div class="seleDateTime">
	<p>选择倒计时的日期和时间:</p>
	<input type="text" id='dateEnd' name="">
	<br>
	<button id='start'>开始倒计时</button>
<!-- 	<button id='stop'>停止倒计时</button> -->
</div>

<script type="text/javascript">
	var jieRi="Apr 05,2019";
	$(function(){
		$('#dateEnd').datetimepicker({
                        timeText: '时间',
                        hourText: '小时',
                        minuteText: '分钟',
                        secondText: '秒',
                        currentText: '现在',
                        closeText: '完成',
                        showSecond: true, //显示秒  
                        timeFormat: 'HH:mm:ss', //格式化时间 
                        dateFormat: "yy-mm-dd",
                        autoclose: true,//当选择一个日期之后是否立即关闭此日期时间选择器
                    });
		function Ro(){
			//jieRi="Apr 05,2019";
			//新知识点:parse()可解析一个日期时间字符串,并返回1970/1/1午夜距离该日期的时间毫秒
			//var d=Date.parse(jieRi)//返回毫秒数,从1970/1/1到该日期时间的毫秒数
			var dateEnd=$('#dateEnd').val();
			var dEnd=new Date(dateEnd).getTime();
			//var d=dEnd;
			//console.log(d);
			var date=new Date();//获取当前的系统时间
			//console.log(date);dEnd
			var dd=date.getTime();//获取当前,距离1970/1/1之间的毫秒数
			//1秒=1000毫秒,1分钟=60秒,1小时=60分钟=3600秒,1天=86400秒
			var rd=Math.floor((dEnd-dd)/1000);//获取距离4月5日总的秒数
			var days=Math.floor(rd/86400);//得到距离4月5号的天数;
			//console.log(days);
			var hours=Math.floor((rd%86400)/3600);//得到小时数;
			var minus=Math.floor((rd%3600)/60);//得到多少分钟
			var second=Math.floor((rd%60));//得到秒钟;
			$('span').text(days+'天 '+hours+'小时'+minus+'分钟'+second+'秒')//.text()等同于innerHTML
			//$('span').text(days+'天 '+hours+' : '+minus+" ' "+second+' " ')//.text()等同于innerHTML

		}
	
		$('#start').click(function(){			
			if($('#start').text()=='开始倒计时'){
				interval=setInterval(Ro,1000);//不加var 可以停止,注意变量作用域
				//var interval=setInterval(Ro,1000); //加上var就不能停止
				$('input').attr('disabled','disabled');
				$('#start').css('backgroundColor','#8d6449');
				$('#start').css('fontSize',22);
				$('#start').text('停止倒计时');
				
			}else if($('#start').text()=='停止倒计时'){
				clearInterval(interval);
				$('#start').text('开始倒计时');
				$('#start').css('backgroundColor','#82d743');
				$('#start').css('fontSize',22);
				$('input').removeAttr('disabled');
			}
		})
 
	})
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

微信截图_20190402164623.png

微信截图_20190402164644.png

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议