Javascript第三课-优快云博客

今天学习javascript第三课，没什么知识点，主要讲了一些案例，我觉的这几个案例很经典，和大家分享下

1.图片的自动切换

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<style type="text/css">
		.image{
			display:block;
		}
		.div{
			position:absolute;
			top:156px;
			left:312px;;
		}
	</style>
</head>
<body onload="change()">

	<image src="images/1.png" id="img1" class="image"></image>
	<image src="images/2.jpg" id="img2" class="image"></image>
	<image src="images/3.jpg" id="img3" class="image"></image>
	<image src="images/4.jpg" id="img4" class="image"></image>
	<image src="images/5.png" id="img5" class="image"></image>
	
	<div class="div">
		<input type="button" value="1" onmouseover="choose('1')" onmouseout="leave()"/>
		<input type="button" value="2" onmouseover="choose('2')" onmouseout="leave()"/>
		<input type="button" value="3" onmouseover="choose('3')" onmouseout="leave()"/>
		<input type="button" value="4" onmouseover="choose('4')" onmouseout="leave()"/>
		<input type="button" value="5" onmouseover="choose('5')" onmouseout="leave()"/>
	</div>
	
	<script type="text/javascript">
	
		var now=1;
		var st;
		
		function change(){
		
			for(var i=1;i<=5;i++){
				document.getElementById("img"+i).style.display="none";
			}
			
			document.getElementById("img"+now).style.display="block";
			
			if(now<5){
				now++;
			}else{
				now=1;
			}
			
			st=setTimeout("change()",1000);
			
		}
		
		function choose(arg){
			clearTimeout(st);
			now=arg;
			
			for(var i=1;i<=5;i++){
				document.getElementById("img"+i).style.display="none";
			}
			
			document.getElementById("img"+now).style.display="block";
		}
		
		function leave(){
			change();
		}
		
	</script>
	
</body>
</html>

2.复选框效果

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
</head>
<body onload="check()">
	<input type="checkbox" name="father" id="father" />
	<input type="button" value="反选" id="fanxuan"/>
	<hr />
	
	<input type="checkbox" name="son" id="son1" />
	<input type="checkbox" name="son" id="son2" />
	<input type="checkbox" name="son" id="son3" />
	<input type="checkbox" name="son" id="son4" />
	<input type="checkbox" name="son" id="son5" />
	
	<script type="text/javascript">
	
		var sons=document.getElementsByName("son");
		
		document.getElementById("father").onclick=function(){
			
			for(var i=0;i<sons.length;i++){
				sons[i].checked=this.checked;
			}
		}
		
		document.getElementById("fanxuan").onclick=function(){
			
			for(var i=0;i<sons.length;i++){
				sons[i].checked=!sons[i].checked;
			}
		}
		
		function check(){
		
			for(var i=0;i<sons.length;i++){
				if(!sons[i].checked){
					document.getElementById("father").checked=false;
					break;
				}
			}
			
			if(sons[1].checked&&sons[2].checked&&sons[3].checked&&sons[4].checked&&sons[0].checked){
				document.getElementById("father").checked=true;
			}
			
			setTimeout("check()",10);
		}
		
	</script>
	
</body>
</html>

3.选项可效果

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<style type="text/css">
	
		body,.down{
			margin:0px;
			padding:0px;
		}
		
		.news,.sports,.tech{
			display:inline;
			float:left;
			font-size:83px;
		}
		
		.clear{
			clear:both;
		}
		
		#news,#new{
			background-color:#FF7400;
		}
		
		#sports,#sport{
			background-color:red;
		}
		
		#tech,#tec{
			background-color:blue;
		}
		
		.down{
			width:500px;
			height:500px;
		}
		
	</style>
</head>
<body onload="slide('news')">
	
	<div class="news" id="new" onmouseover="slide('news')">新闻</div>
	<div class="sports" id="sport" onmouseover="slide('sports')">体育</div>
	<div class="tech" id="tec" onmouseover="slide('tech')">科技</div>
	
	<div class="clear"></div>
	
	<div class="down" id="news" name="con">
		新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻新闻
	</div>
	<div class="down" id="sports" name="con">
		体育体育体育体育体育体育体育体育体育体育体育体育体育
	</div>
	<div class="down" id="tech" name="con">
		科技科技科技科技科技科技科技科技科技科技科技科技科技科技科技
	</div>
	
	<script type="text/javascript">
		function slide(arg){
			var downs=document.getElementsByName("con");
			for(var i=0;i<downs.length;i++){
				downs[i].style.display="none";
			}
			
			document.getElementById(arg).style.display="block";
		}
	</script>
	
</body>
</html>

4.进度条效果

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<style type="text/css">
		#div{
			width:300px;
			height:20px;
			background-color:#FF7400;
		}
	</style>
</head>
<body>
	<div id="div"></div>
	
	<script type="text/javascript">
	
		go();
		
		var i=1;
		var count=1;
		
		function go(){
			
			document.getElementById("div").style.width=i+"px";
			
			if(count%2==1){
				i++;
			}else{
				i--;
			}
			
			if(i>200||i<1){
				count++;
			}
			
			setTimeout("go()",10);
		}
	</script>
	
</body>
</html>

主意：

getElementById返回的是一个结果，但是getElementsByName和getElementsByTagName返回的是许多结果

最后附上以上例子的文件