js期末总结二

实例七：图片随鼠标滑动二（带有关闭按钮）

实例八：图片飘动

实例九：棋盘移动

bai"onmousedown="Mdown('bai')">

实例十:键盘的方向键控制移动

body{ background:url(images/game.jpg)}

实例十一：全选和全不选

实例十二：树形结构的展开和关闭【要展开的东西，将其封装在一个div中】

var flag1=true
function change(){
if(flag1==true){
document.getElementById("menu1").style.display="";
flag1=false
}else{
document.getElementById("menu1").style.display="none";
flag1=true
}
}

实例十三：ul,li的横向菜单

li{
list-style-type:none;}

οnmοuseοver="showT('ul1')" οnmοuseοut="closeT('ul1')" >影片欣赏

• οnmοuseοver="this.className='tabelColor'" οnmοuseοut="this.className=''">影片1


• 影片2


• 影片3

在线教学

• 教学1


• 教学2


• 教学3

设计图库

• 图案1


• 图案2


• 图案3

实例十四：带下划线

onMouseMove="showConfirm()" onMouseOut="closeConfirm()">网页特效

实例十五：城市选择并返回值

body{ background:url(images/51table_back.gif) no-repeat}

#btn{background-image:url(images/buttonBack.gif);width:123px;height:22px;border-style:none}

关闭

0)">北京 上海 深圳 湖南

城市：

实例十六：图片切换【一】

var num=1
function show(){
var picNode=document.getElementById("pic")
picNode.src="images/ad-0"+num+".jpg"
num++
if(num==5)
num=1
setTimeout("show()",1000)
}

图片切换【二】

var num=1
function show(){
for(var i=1;i<=4;i++){
if(i!=num)
document.getElementById(i).style.display="none"
document.getElementById(num).style.display="block"
}
num++
if(num==5)
num=1
setTimeout("show()",1000)
}

1" src="images/ad-01.jpg" />

实例十七：表单验证

οnsubmit="return checkForm()" >
 
   
     
   
   
     
     
     
   
   
     
     
     
   
   
     
     
     
   
   
     
     
     
   
   
     
     
     
   
   
     
     
     
   
   
     
     
     
   
   
     
   
 

用户名：	οnfοcus="appearName()" οnblur="checkName()" />
密码：
确认密码：
性别：	男             女
电子邮件地址：
出生日期：	年                       一月             二月             三月                   月                   1           2           3                 日
		type="submit" id="btn" value="同意以下协议条款并提交" />
一、总结<br> 1.1<br> 2.2

实例十八：级联操作城市

 

省份：
    οnchange="change()">
      请选择省份
      天津
      四川
     
 

 

城市：
   
      请选择城市
   

【二】级联操作，但有图片

 

   
      请选择一个游戏
      大海战2
      大话西游
      热血江湖
      大航海时代
   

 

src="images/pic0.jpg" id="pic" width="321" height="253" />