JavaScript中DOM的简单应用

最新推荐文章于 2025-12-09 09:34:02 发布

最新推荐文章于 2025-12-09 09:34:02 发布 · 119 阅读

文章标签：

#JavaScript #百度 #HTML #ViewUI

Javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了几种使用JavaScript实现网页互动的方法，包括鼠标悬停时更换图片、点击按钮切换链接目标、点击超链接改变图片源、定时自动更换图片、显示实时日期时间等功能。通过这些实例，读者可以了解如何操作DOM元素，掌握getElementById、getElementsByTagName等关键API。

<html> 
<head> 
<title>鼠标指上去替换图片效果</title> 
<script type="text/javascript"> 
function over(){ 
//alert("鼠标来了"); 
var pic = document.getElementById("pic"); 
pic.src = "2.jpg"; 
} 
function out(){ 
//alert("鼠标走了"); 
var pic = document.getElementById("pic"); 
pic.src = "1.jpg"; 
} 
</script> 
</head> 
<body> 
<img src = "1.jpg" id="pic" onmouseover="over()" onmouseout = "out()" /> 
</body> 
</html> 

<html> 
<head> 
<title>点击按钮跳转页面</title> 
<script type="text/javascript"> 
var flag = false; //flag这里要定义成全局变量，这样循环出来flag的结果才能被改变 
function change(){ 
var link = document.getElementById("weblink"); 
if(!flag){ 
link.href = "http://www.baidu.com"; 
link.innerHTML = "百度";//主要学习innerHTML方法，改变标签里的对象名称 
flag = true; 
}else{ 
link.href = "http://www.g.com"; 
link.innerHTML = "谷歌"; 
flag = false; 
} 
} 
</script> 
</head> 
<body> 
<a href= "http://www.g.com" id="weblink" >谷歌</a>   
<input type="button" value = "换换吗？" onclick="change()"/> 
</body> 
</html> 


<html> 
<head> 
<title>点击超链改变画面</title> 
<script type="text/javascript"> 
function change(num){ 
var pic = document.getElementById("pic"); 
pic.src = num + ".jpg"; 
} 

</script> 
</head> 
<body> 
<img src ="1.jpg" id="pic" /> 
<a href="#" onclick= "change(1)" >1</a> 
<a href= "#" onclick= "change(2)">2</a> 
<a href= "#" onclick= "change(3)">3</a> 
</body> 
</html> 



<html> 
<head> 
<title>自动改变画面</title> 
<script type="text/javascript"> 
var startNum = 1; 
var maxNum = 3; 
var nowNum = 1; 
function chage(){ //change不能作为函数名，为JavaScript的事件名 

var pic = document.getElementsByTagName("img")[0]; 

pic.src = nowNum + ".jpg"; 

if( nowNum == 3){ 

nowNum = 1; 

}else{ 

nowNum++; 
} 
setTimeout("chage()",1000); 
} 
</script> 
</head> 
<body onload="chage()"> 
<img src="1.png"/> 
</body> 
</html> 


<html> 
<head> 
<title>显示实时时钟</title> 
<script type="text/javascript"> 
function mytime(){ 
var date = new Date(); 
var h = date.getHours(); 
var m = date.getMinutes(); 
var s = date.getSeconds(); 

m = checkTime(m); 
s = checkTime(s); 

document.getElementById("timer").innerHTML = h + ":" + m + ":" + s; 
setTimeout("mytime()" , 500); 
} 
function checkTime(i){ 

if( i<10){ 
i = "0" + i; 
} 
return i; 
} 
</script> 
</head> 
<body onload="mytime()"> 
<div id="timer"></div> 
</body> 
</html>

值得注意的是innerHTML的用途。

掌握：getElementById（）

getElementsByName（）

getElementsByTagName（）[ ] ，

第三种不加后面的中括号拿到的是个数组。

补充：

<html >
<head>
<title>点击按钮变换图片</title>
<script type="text/javascript">
	var startNum = 1; 
	var maxNum = 3;
	var nowNum = 1;
	
	function changes1(){
		var pic = document.getElementsByTagName("img")[0];
			pic.src ="images/"+ nowNum + ".jpg";
			if(nowNum == 1){
				
				nowNum = 3;
				}else{
					nowNum--;
					}
			}
	function changes2(){
		var pic = document.getElementsByTagName("img")[0];
			pic.src = "images/"+ nowNum + ".jpg";
			if(nowNum == 3){
				nowNum = 1;
				}else{
					nowNum++;
					}
		}
</script>
</head>
<body>
<div style="width:130px; float:left;">
  <table width="112" border="1" cellspacing="0" cellpadding="0">
    <tr>
      <td><img src="images/1.jpg" id = "pic" /></td>
    </tr>
  </table>
</div>
<div style="float:left; margin-left:30px; margin-top:50px;">
  <input type="button" value="上一张"  onclick="changes1()" />
  <input type="button" value="下一张"  onclick="changes2()" />
</div>
</body>
</html>