井井客

搜索

原生JS实现倒计时10分钟

之前有做过倒计时10秒钟,这次是在原来基础上做的倒计时10分钟的,代码有说明,还是满简单的。

原生JS实现倒计时10分钟

先贴上倒计时10秒钟的代码链接:http://www.jingjingke.com/c/12140.html

再贴上倒计时10分钟的代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生JS实现倒计时10分钟</title>
<style>
p { text-align:center; padding-top:50px;}
span { color:red; padding:0 5px;}
</style>
</head>
<body>
<p>请在<span id="dataTime" data-time="600">10分0秒</span>内答题,超时将刷新页面</p>
<script>
var dataTime = document.getElementById('dataTime');

function overTime(){
	//取时间值
	var time = dataTime.getAttribute('data-time'); 
	//取时间-分
	var mins = parseInt(time/60)
	//取时间-秒
	var seconds = time%60;		
	//判断分钟是否大于0,再拼出相应文本,等于0时不显示“0分”
	if(mins>0){
		dataTime.innerHTML = mins+'分'+seconds+'秒';
	}else{
		dataTime.innerHTML = seconds+'秒';
	}
	//判断时间数值是否大于0,是的话继续执行-1,否的话刷新页面
	if(time>0){
		dataTime.setAttribute('data-time',time-1)
		setTimeout("overTime()",1000);
	}else{
		location.replace(location.href);
	}
}

overTime();
</script>
</body>
</html>

仔细看看代码还是满简单的~主要是使用html5中新增的data-time属性记录时间数值,再通过getAttribute和setAttribute将数值获取到并减1。

试着调整了一下,可以通过传入参数(倒计时总秒数)来执行这个函数。


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>原生JS实现倒计时10分钟</title>
<style>
p { text-align:center; padding-top:50px;}
span { color:red; padding:0 5px;}
</style>
</head>
<body>
<p>请在<span id="dataTime"></span>内答题,超时将刷新页面</p>
<script>
function setOverTime(Num){
	var dataTime = document.getElementById('dataTime');
	//这边我只考虑60S以上的,没有再去判断了。
	dataTime.innerHTML = parseInt(Num/60)+'分'+(Num%60)+'秒';
	function overTime(num){
		var mins = parseInt(num/60)
		var seconds = num%60;		
		if(mins>0){
			dataTime.innerHTML = mins+'分'+seconds+'秒';
		}else{
			dataTime.innerHTML = seconds+'秒';
		}
		if(!num>0){
			//取消定时器--因为下面可有可无
			clearInterval(saveTime);
			location.replace(location.href);
		}
	}
	//添加定时器
	var saveTime = setInterval(function(){
		Num--;
		overTime(Num);
	},1000);
}

//执行函数并可传入参数为秒数
setOverTime(600);
</script>
</body>
</html>


这个主要就是用到setInterval和clearInterval两个方法。

觉得自己好像最近的Js有点点提升呢,有些代码写起来还满得心应手的~

文章TAG:js

作者:井井客原创来源:原创
本文标题:原生JS实现倒计时10分钟
本文链接:http://www.jingjingke.com/c/30161.html

上一篇:如何修改placeholder表单预期值的颜色
下一篇:background-position百分比格子速记法

文章分类

相关阅读

随便看看