定时器

最新推荐文章于 2024-08-26 08:49:30 发布

Venciki

最新推荐文章于 2024-08-26 08:49:30 发布

阅读量97

点赞数

分类专栏： web

本文链接：https://blog.csdn.net/qq_33188421/article/details/89928922

版权

web 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

javascript 练习

getElementByTagName

我们可以把这个分解一下分成：get Elements By TagName，分别是 “选择” “一组元素” “标签名” 。这个用在选择多个标签的时候，例如对多个 < p > 用上相同的 id 名，我们可以不用一个一个的网行内面添加，可以直接再js代码里面写用上 getElementByTagName 一串代码就可以搞定了。

下面是对 getElementsByTagName 的应用实例：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		input{
			background: white;
		}
		.active{
			background: yellow;
		}
		div{
			height: 200px;
			width: 200px;
			background: #ccc;
			display: none;

		}
	</style>
	<script type="text/javascript">
		window.onload=function(){
			var oBtn=document.getElementsByTagName('input');
			var oDiv=document.getElementsByTagName('div');
			var i=0;
			for( i = 0 ;i < oBtn.length ;i++ ){
				oBtn[i].index=i;
				oBtn[i].onclick=function(){
					for( i = 0; i < oBtn.length ;i++){
						oBtn[i].className='';
						oDiv[i].style.display='none';
					}
					//alert('点击了第'+this.index+'个按钮');
					oDiv[this.index].style.display='block';
					this.className='active';
				}
			}
		}
	</script>
</head>
<body>
	<input class="active" type="button" value="1">
	<input type="button" value="2">
	<input type="button" value="3">
	<div style="display: block;">111</div>
	<div>222</div>
	<div>333</div>
</body>
</html>

效果就是点击按钮可以切换下面 div 中内容

定时器

setInterval （函数，时间ms）间隔型，一直

进行（一旦开启就会一直进行下去）

setTimeout（函数，时间ms）延时行，开启后只执行一次。

停止计时器

clearInterval

clearTimeout

下面是对定时器的应用：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body style="font-size: 50px; background-color: #909">
	<img src="img/0.png">
	<img src="img/0.png">
	点
	<img src="img/0.png">
	<img src="img/0.png">
	分
	<img src="img/0.png">
	<img src="img/0.png">
	秒
	<script type="text/javascript">
		function toDouble(num){
			if(num<10){
				return '0'+num;
			}
			else{
				return ''+num;
			}
		}
		window.onload=function(){
			var aImg=document.getElementsByTagName('img');
			var i=0;
			function update(){
				var oDate=new Date();
				var str=toDouble(oDate.getHours())+toDouble(oDate.getMinutes())+toDouble(oDate.getSeconds());
				for(i = 0; i < aImg.length ; i ++){
					aImg[i].src='img/'+str.charAt(i)+'.png';
				}
			}
			setInterval(update, 1000);
			update();
		}
	</script>
	<script type="text/javascript">
		function toChinese(day){
			switch(day){
				case 0: 
					return '星期日';
				case 1:
					return '星期一';
				case 2:
					return '星期二';
				case 3:
					return '星期三';
				case 4:
					return '星期四';
				case 5:
					return '星期五';
				case 6:
					return '星期六';
			}
		}
		var oDate=new Date();

		//alert(oDate.getFullYear()+'年'+(oDate.getMonth()+1)+'月'+oDate.getDate()+'日'+toChinese(oDate.getDay()));
	</script>
</body>
</html>