JS 定时器的用法

最新推荐文章于 2024-03-29 16:23:23 发布

杨壹朝

最新推荐文章于 2024-03-29 16:23:23 发布

阅读量215

点赞数

分类专栏：前端学习文章标签： HTML

本文链接：https://blog.csdn.net/weixin_44194855/article/details/89316983

版权

前端学习专栏收录该内容

21 篇文章 0 订阅

订阅专栏

定时器的用法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器的基本用法</title>
	<script type="text/javascript">
		//单次定时器
		var timer = setTimeout(function(){
			alert('hello!');
		}, 3000);

		//清除单次定时器
		clearTimeout(timer);

		//反复循环定时器
		var timer2 = setInterval(function(){
			alert('hi~~~');
		}, 2000);

		//清除反复循环定时器
		clearInterval(timer2);
	</script>
</head>
<body>
	
</body>
</html>

定时器动画

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定时器动画</title>
	<style type="text/css">
		.box{
			width: 100px;
			height: 100px;
			background-color: gold;
			position: fixed;
			left: 20px;
			top: 20px;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var oBox = document.getElementById('box');

			var left = 20;
			//反复循环定时器，每30毫秒修改一次盒子的left值
			var timer = setInterval(function(){
				left += 2;
				oBox.style.left = left + 'px';

				//当left值大于700时停止动画（清除定时器）
				if(left > 700){
					clearInterval(timer);
				}
			},30);
		}
	</script>
</head>
<body>
	<div class="box" id="box"></div>
</body>
</html>

时钟

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>时钟</title>
	<style type="text/css">
		
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var oBox = document.getElementById('box');

			function timeGo(){
				var now = new Date();
				// alert(now);//弹出美式时间：Wed Jun 20 2018 15:27:13 GMT+0800 (中国标准时间)
				var year = now.getFullYear();//2018年
				var month = now.getMonth() + 1;//6月弹出5//范围0-11
				var date = now.getDate();//20号
				var week = now.getDay();//3//星期几，西半球时间，范围0-6，星期日为一周的第一天，为0

				var hour = now.getHours();
				var minute = now.getMinutes();
				var second = now.getSeconds();

				// alert(hour + ":" + minute + ":" + second);//15:33:9

				oBox.innerHTML = '当前时间是：' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
			}

			timeGo();
			setInterval(timeGo, 1000);
		}

		//此函数将星期的数字转为汉字表示
		function toWeek(num){
			switch(num){
				case 0:
					return '星期天'; 
					break;
				case 1:
					return '星期一'; 
					break;
				case 2:
					return '星期二'; 
					break;
				case 3:
					return '星期三'; 
					break;
				case 4:
					return '星期四'; 
					break;
				case 5:
					return '星期五'; 
					break;
				case 6:
					return '星期六'; 
					break;
			}
		}

		//此函数将不足两位的数字前面补0
		function toDouble(num){
			if(num < 10){
				return '0' + num;
			}else{
				return num;
			}
		}
	</script>
</head>
<body>
	<div id="box"></div>
</body>
</html>

倒计时

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>倒计时</title>
	<script type="text/javascript">
		window.onload = function(){
			//活动第二天要将页面下线，直接跳转到其它页面，不会走后面的代码了
			// window.location.href = "http://www.baidu.com";

			var oDiv = document.getElementById('div1');

			function timeLeft(){
				//实际开发中此时间从服务器获取，避免客户端调整时间
				var now = new Date();
				var future = new Date(2018,5,20,16,30,20);

				// alert(future - now);//弹出与当前时间相差的毫秒数：12469935436
				var milli = parseInt((future - now)/1000);

				//活动当天页面下线，避免倒计时到点后继续计负时
				// if(milli <= 0){
				// 	//页面跳转，不执行下面的代码了
				// 	window.location.href = "http://www.baidu.com";
				// }

				var day = parseInt(milli / 86400);
				var hour = parseInt(milli % 86400 / 3600);
				var minute = parseInt(((milli % 86400) % 3600) / 60);
				var second = milli % 60;

				oDiv.innerHTML = '距离2018年11月12日00时00分00秒还有' + day + '天' + toDouble(hour) + '时' + toDouble(minute) + '分' + toDouble(second) + '秒';
			}
			
			timeLeft();
			setInterval(timeLeft, 1000);
		}

		function toDouble(num){
			if(num < 10){
				return '0' + num;
			}else{
				return num;
			}
		}
	</script>
</head>
<body>
	<div id="div1"></div>
</body>
</html>！

杨壹朝

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS 定时器的用法

定时器的用法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>定时器的基本用法</title> <script type="text/javascript"> //单次定时器 var timer = setTi...
复制链接

扫一扫