活动倒计时功能

羽筠

已于 2022-08-30 11:03:50 修改

阅读量1.2k

点赞数

分类专栏： JS 文章标签： javascript 前端 html

于 2017-07-03 09:51:07 首次发布

本文链接：https://blog.csdn.net/qq_16494241/article/details/74171436

版权

JS 专栏收录该内容

72 篇文章 0 订阅

订阅专栏

与指定日期间相差时间倒计时、指定秒数的倒计时

1、与指定日期间相差时间的倒计时（显示：x天x时x分x秒），如指定日期时间已过则提示：活动时间已结束

需针对苹果手机支持处理，日期中“-”替换成“/”
var endtime = '2022-08-23 10:18:20';
endtime = endtime.replace(/-/g,'/');
getTimeS(new Date(endtime) - new Date());

demo：

//从30分钟开始倒计时
var afterTime = new Date().getTime() + (30*60*1000);
getTimeS(new Date(afterTime) - new Date());

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>与今天之后的某一特定时间的倒计时</title>
</head>

<body>
<div>离结束时间还差<span style="color:red; font-weight:bold;" id="day"></span>天<span style="color:red; font-weight:bold;" id="hour"></span>小时<span style="color:red; font-weight:bold;" id="fen"></span>分<span style="color:red; font-weight:bold;" id="miao"></span>秒</div>

<script>
//getTimeS(86400000);
getTimeS(new Date(2017,6,3,10,40,0) - new Date());//当前时间 与 2017年7月3号10点40分 差值
function getTimeS(newTime){
	var timer;
	function djs(){
		if(newTime <= 0){
			clearInterval(timer);
			document.getElementById('day').innerHTML = 0;
			document.getElementById('hour').innerHTML = 0;
			document.getElementById('fen').innerHTML = 0;
			document.getElementById('miao').innerHTML = 0;
			alert('活动已结束');
			return;
		}
		
		var newTimeS = newTime / 1000;
		var day = 24*60*60;
		var hour = 60*60;
		var fen = 60;
		
		var newDay = Math.floor(newTimeS / day);
		var newHour = Math.floor(newTimeS % day / hour);
		var newfen = Math.floor(newTimeS % hour / fen);
		var newMiao = Math.floor(newTimeS % fen);
		
		console.log(newDay , newHour , newfen , newMiao);
		document.getElementById('day').innerHTML = newDay;
		document.getElementById('hour').innerHTML = newHour;
		document.getElementById('fen').innerHTML = newfen;
		document.getElementById('miao').innerHTML = newMiao;
		
		newTime = newTime - 1000;
		
	}
	djs();
	timer = setInterval(djs,1000);
}
</script>
</body>
</html>

2、指定秒数的倒计时（显示：x秒），当指针是0则停止计时

demo：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>倒计时</title>
<style>
*{ margin:0; padding:0; box-sizing:border-box;}
html , body , #showTime{ width:100%; height:100%;}
#showTime{ display:flex; justify-content:center; align-items:center; font-size:200px;}
</style>
</head>
<body>

<div id="showTime">-</div>

<script src="http://cdn.ahlife.com/jquery/1.11.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">

//倒计时 相关 参数
var setTimeStart = 30; //倒计时 初始时间
var timer , timestart = setTimeStart; //倒计时 定时器 中所需参数
function djs(){
	if (timestart < 0){
		//时间到
		clearTimeout(timer);
		return;
	}
	$('#showTime').html(timestart);
	timestart = parseInt(timestart) - 1;
	timer = setTimeout(djs, 1000);
}

djs();

</script>
</body>
</html>

ps~~~记录用时：

var useTime = 0; //所用时间
var useTimer = null; //定时器
changeUseTime();
function changeUseTime(){
   useTimer = setInterval(function(){
       useTime += 0.01;
       console.log(useTime.toFixed(2));
   },10);
}
//clearInterval(useTimer); //停止定时器