js jq实现计时器倒计时器

最新推荐文章于 2020-06-17 10:12:31 发布

原创最新推荐文章于 2020-06-17 10:12:31 发布 · 439 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #jquery

js 专栏收录该内容

2 篇文章

订阅专栏

本文将介绍如何使用JavaScript和jQuery库创建计时器及倒计时器功能。通过实例代码，详细解析实现过程，帮助开发者掌握动态更新时间的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<title>Time</title>
	<script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
	<style type="text/css">
		div{
			border-bottom: 2px solid black;
			border-top: 2px solid black;
			font-size: 20px;
			font-weight: bold;
		}
		button{
			border: 1px solid black;
			background: #eee;
			border-radius: 5px;
		}
		span{
			display: inline-block;
			width: 30px;
			text-align: center;
			border: 1px solid black;
		}
		span.sleel{
			border: 0px;
		}
	</style>
</head>
<body>
	<div></div>
	<div id="timer">
		计时器:
		<span>0</span>小时
		<span>1</span>分钟
		<span>10</span>秒
		<button>开始</button>
		<br>
		<span class="sleel"></span>
	</div>
	<div id="countd">
		倒计时器:
		<span>0</span>小时
		<span>1</span>分钟
		<span>10</span>秒
		<button>开始</button>
	</div>
</body>
<script type="text/javascript">
	function fmt(num){
		return num>9?num:'0'+num;
	}

	function getDate(date){
		return date.getFullYear()+'-'+fmt(date.getMonth()+1)+'-'+fmt(date.getDate());
	}

	function getTime(date){
		return fmt(date.getHours())+':'+fmt(date.getMinutes())+':'+fmt(date.getSeconds());
	}
	function setTime(){
		setInterval(function(){
			$('div:first').text(getDate(new Date())+'  '+getTime(new Date()));
		},0);
	}

	setTime();
	
	function setTimer(){
		var date = new Date();
		date.setHours(0,0,0);
		var sum = 0;
		for(var i = 0;i < 3;i++){
			sum += parseInt($('#timer > span').eq(i).text())*Math.pow(60,2-i);
		}
		console.log(sum);
		var index = 1;
		var timerr = setInterval(function(){
			date.setHours(0,0,index);
			index++;
			$('#timer > span:last').text(getTime(date));
			if((index - 1) == sum) {
			$('#timer > span:last').text(getTime(date));
			clearInterval(timerr);
		}
		},1000);
	}

	$('#timer > button').click(setTimer);

	function setCountd(){
		var date = new Date();
		var sum = 0;
		for(var i = 0;i < 3;i++){
			sum += parseInt($('#timer > span').eq(i).text())*Math.pow(60,2-i);
		}
		date.setHours($('#countd > span').eq(0).text(),$('#countd > span').eq(1).text(),$('#countd > span').eq(2).text());
		var timerr = setInterval(function(){
			sum--;
			date.setHours(0,0,sum);
			$('#countd > span').eq(0).text(date.getHours());
			$('#countd > span').eq(1).text(date.getMinutes());
			$('#countd > span').eq(2).text(date.getSeconds());
			if(sum == 0){
			$('#countd > span').eq(0).text(date.getHours());
			$('#countd > span').eq(1).text(date.getMinutes());
			$('#countd > span').eq(2).text(date.getSeconds());
				clearInterval(timerr);
			}
		},1000);
	}

	$('#countd > button').click(setCountd);
</script>
</html>