<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" οnmοuseοver="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 = "换换吗?" οnclick="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="#" οnclick= "change(1)" >1</a> <a href= "#" οnclick= "change(2)">2</a> <a href= "#" οnclick= "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 οnlοad="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 οnlοad="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="上一张" οnclick="changes1()" /> <input type="button" value="下一张" οnclick="changes2()" /> </div> </body> </html>