js期末总结二

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

<script language="javascript">

var initadvTop=0

var initcloseTop=0

function init(){
initadvTop=document.getElementById("Layer1").style.pixelTop
initcloseTop=document.getElementById("Layer2").style.pixelTop

}

function move(){
var advNode=document.getElementById("Layer1")
var closeNode=document.getElementById("Layer2")
advNode.style.pixelTop=initadvTop+document.body.scrollTop
closeNode.style.pixelTop=initcloseTop+document.body.scrollTop

}

function closeText(){
document.getElementById("Layer1").style.display="none"
document.getElementById("Layer2").style.display="none"

}
onload=init
onscroll=move

</script>

实例八：图片飘动

<script language="javascript">
var currentX=0

var currentY=0

var step=5
var flagX=true
var flagY=true

function floatAdv(){
document.getElementById("Layer1").style.left=currentX+"px"
document.getElementById("Layer1").style.top=currentY+"px"
var width=document.body.offsetWidth-document.getElementById("Layer1").offsetWidth//offsetWidth是属性不是样式,而且还是document.body对象的样式
var height=document.body.offsetHeight-document.getElementById("Layer1").offsetHeight
if(currentX<0){
flagX=true
currentX+=step
}
if(currentX>width){
flagX=false
currentX-=step
}
if(flagX==true)//等于true
currentX+=step
else
currentX-=step

if(currentY<0){
flagY=true
currentY+=step
}
if(currentY>height){
flagY=false
currentY-=step
}
if(flagY==true)
currentY+=step
else
currentY-=step
setTimeout("floatAdv()",10)

}
onload=floatAdv

</script>

实例九：棋盘移动

<script language="javascript">
var obj='';

var px;

var py;

function Mdown(object){
obj=object;
document.getElementById(obj).setCapture();
//px=event.x-document.getElementById(obj).style.pixelLeft;
//py=event.y-document.getElementById(obj).style.pixelTop;

}

function Mup(){
if(obj!=''){
document.getElementById(obj).releaseCapture();
obj='';
}

}

function Mmove(){
if(obj!=''){
document.getElementById(obj).style.pixelTop=event.y;
document.getElementById(obj).style.pixelLeft=event.x;
}

}
document.onmouseup=Mup
document.onmousemove=Mmove

</script>

<div id="bai"onmousedown="Mdown('bai')"><img src="images/white.jpg" width="14" height="14"
/></div>

<div  id="hei" onmousedown="Mdown('hei')"><img src="images/black.jpg" width="15" height="14" /></div>

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

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

<script language="javascript">

function move(){
var unicodeKey=event.keyCode//keyCode是驼峰命名法，是event的属性
var step=2
var idNode=document.getElementById("Layer1")
if(unicodeKey==37)
idNode.style.left=idNode.style.pixelLeft-step
if(unicodeKey==38)
idNode.style.top=idNode.style.pixelTop-step
if(unicodeKey==39)
idNode.style.left=idNode.style.pixelLeft+step
if(unicodeKey==40)
idNode.style.top=idNode.style.pixelTop+ste
4000
p

}
document.onkeydown=move//onkeydown是document对象的事件

</script>

实例十一：全选和全不选

<script language="javascript">

function change(){
var flag=false

//【复选框checkbox的name一样，根据name获取节点（这是一个数组），遍历这个数组，if(nameNode[i].checked)】即是否选择了这个复选框
var cbNode=document.getElementsByName("checkbox")
var btnNode=document.getElementById("btn")
if(btnNode.value=="都不喜欢"){
//全不选
flag=false
btnNode.value="都喜欢"
}else{
//全选
flag=true
btnNode.value="都不喜欢"
}
for(var i=0;i<cbNode.length;i++){
cbNode[i].checked=flag//cbNode[i]中[i]不要忘记了
}

}

</script>

实例十二：树形结构的展开和关闭【要展开的东西，将其封装在一个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的横向菜单

<script language="javascript">

function showT(idName){
var ulNode=document.getElementById(idName)
liNode=ulNode.childNodes
for(var i=0;i<liNode.length;i++){
if(liNode[i].nodeName=="LI")
liNode[i].style.display="block"
//ulNode.className = "tabelColor";
}

}

function closeT(idName){
var ulNode=document.getElementById(idName)
liNode=ulNode.childNodes
for(var i=0;i<liNode.length;i++){
if(liNode[i].nodeName=="LI")
liNode[i].style.display="none"
//ulNode.className = "";
}

}

</script>

li{
list-style-type:none;}

<div>
<ul id="ul1" onmouseover="showT('ul1')" onmouseout="closeT('ul1')" >影片欣赏
<li onmouseover="this.className='tabelColor'" onmouseout="this.className=''">影片1</li>
<li onmouseover="this.className='tabelColor'" onmouseout="this.className=''">影片2</li>
<li onmouseover="this.className='tabelColor'" onmouseout="this.className=''">影片3</li>
</ul>
<ul id="ul2" onmouseover="showT('ul2')" onmouseout="closeT('ul2')">在线教学
<li onmouseover="this.className='tabelColor'" onmouseout="this.className=''">教学1</li>
<li onmouseover="this.className='tabelColor'" onmouseout="this.className=''">教学2</li>
<li onmouseover="this.className='tabelColor'" onmouseout="this.className=''">教学3</li>
</ul>
<ul id="ul3" onmouseover="showT('ul3')" onmouseout="closeT('ul3')">设计图库
<li onmouseover="this.className='tabelColor'" onmouseout="this.className=''">图案1</li>
<li onmouseover="this.className='tabelColor'" onmouseout="this.className=''">图案2</li>
<li onmouseover="this.className='tabelColor'" onmouseout="this.className=''">图案3</li>
</ul>

</div>

实例十四：带下划线

<script language="javascript">

function showConfirm(){
var x=event.clientX//获取光标所在的x位置
document.getElementById("Layer1").style.left = x + 2;
document.getElementById("Layer1").style.visibility ="visible";

}

function closeConfirm(){
document.getElementById("Layer1").style.visibility ="hidden";

}

</script>

<a href="http://www.baidu.com"onMouseMove="showConfirm()"
onMouseOut="closeConfirm()">网页特效</a>

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

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

<script language="javascript">

function showLayer(){//把所有信息都封装在一个层里面
document.getElementById("Layer1").style.display="block";
document.getElementById("nameText").style.display="block";
document.getElementById("closeText").style.display="block";

}

function closeText(){
document.getElementById("Layer1").style.display="none";
document.getElementById("nameText").style.display="none";
document.getElementById("closeText").style.display="none";

}

function getValue(node){
var nameNode=document.getElementsByTagName("label")
document.getElementById("btn").value=nameNode[node].innerHTML

}

</script>

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

<body>
<div id="Layer1"><p id="closeText" onclick="closeText()">关闭</p><p id="nameText"><label onclick="getValue(0)">北京</label> <label onclick="getValue(1)">上海</label><label onclick="getValue(2)">
深圳</label><label onclick="getValue(3)"> 湖南</label></p></div>
<div id="id1">城市：<input type="button" id="btn" value="选择/修改" onclick="showLayer()" />
<img src="images/next.jpg" width="180" height="186" /></div>

</body>

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

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)

}

<body onload="show()">

<p>
<img id="1" src="images/ad-01.jpg" />
<img id="2" src="images/ad-02.jpg" style="display:none" />
<img id="3" src="images/ad-03.jpg" style="display:none" />
<img id="4" src="images/ad-04.jpg" style="display:none" />

</p>

</body>

实例十七：表单验证

<style type="text/css">

table{ border-collapse:inherit; background-color:#CCCCCC; margin:0 auto}

td{ background-color:#FFFFFF}

img{ border:0}

input{ border:0}

</style>

<script language="javascript">

function appearName(){
document.getElementById("warnName").innerHTML="只能输入字母或数字，4-16个字符"

}

function checkName(){
var flag=true
var nameNode=document.getElementById("uname")
var textNode=document.getElementById("warnName")
var reg=/^\w{4,6}$/
if(nameNode.value==''||nameNode.value==null){//nameNode.value.length==0//如果输入的值为空
flag=false
textNode.innerHTML="用户名不能为空".fontcolor("red")
}else if(!reg.test(nameNode.value)){
flag=false
textNode.innerHTML="用户名格式错误".fontcolor("red")
}
return flag

}

//密码长度6-12位

function appearPwd(){
document.getElementById("warnPwd").innerHTML="密码长度6-12位"

}

function checkPwd(){
var flag=true
var reg=/^.{6,12}$/
var upwdNode=document.getElementById("upwd")
var textNode=document.getElementById("warnPwd")
if(upwdNode.value.length==0){
flag=false
textNode.innerHTML="密码不能为空".fontcolor("red")
}else if(!reg.test(upwdNode.value)){
flag=false
textNode.innerHTML="密码格式错误".fontcolor("red")
}
return flag

}

//两次输入的密码要一致

function appearConfirmPwd(){
document.getElementById("warnCofirmPwd").innerHTML="上下密码要一致"

}

function checkConfirmPwd(){
var confirmPwdNode=document.getElementById("confirmpwd")
var textNode=document.getElementById("warnCofirmPwd")
var upwdNode=document.getElementById("upwd")
if(confirmPwdNode.value.length==0){
flag=false
textNode.innerHTML="确认密码不能为空".fontcolor("red")
}else if(upwdNode.value!=confirmPwdNode.value){
textNode.innerHTML="上下密码要一致".fontcolor("red")
}
return flag

}

function appearEmail(){
document.getElementById("warnEmail").innerHTML="输入正确的Email地址"

}

function checkEmail(){
var flag=true
var emailNode=document.getElementById("email")
var textNode=document.getElementById("warnEmail")
var reg=/^\w+@\w+(\.\w+)+$/                         //s什么表示.什么表示任意
if(emailNode.value.length==0){
flag=false
textNode.innerHTML="Email地址不能为空".fontcolor("red")
}else if(!reg.test(emailNode.value)){
textNode.innerHTML="Email地址格式错误".fontcolor("red")
}
return flag

}

function checkForm(){
if(checkName()&&checkPwd()&&checkConfirmPwd()&&checkEmail()){
return true
}else{
return false
}

}

</script>

</head>

<body>

<form id="form1" name="form1" method="post" action="test.html"
onsubmit="return checkForm()" >

  <table width="200" border="0">

    <tr>

      <td colspan="3"><img src="images/top (2).jpg" width="661" height="104" /></td>

    </tr>

    <tr>

      <td width="128">用户名：</td>

      <td width="242"><input type="text" name="textfield" id="uname"
onfocus="appearName()" onblur="checkName()" /></td>

      <td width="283" id="warnName"> </td>

    </tr>

    <tr>

      <td>密码：</td>

      <td><input type="password" name="textfield2" id="upwd" onfocus="appearPwd()" onblur="checkPwd()" /></td>

      <td id="warnPwd"> </td>

    </tr>

    <tr>

      <td>确认密码：</td>

      <td><input type="password" name="textfield3" id="confirmpwd" onfocus="appearConfirmPwd()" onblur="checkConfirmPwd()" /></td>

      <td id="warnCofirmPwd"> </td>

    </tr>

    <tr>

      <td>性别：</td>

      <td><input name="radiobutton" type="radio" value="radiobutton" checked="checked" />

      男

      <input type="radio" name="radiobutton" value="radiobutton" />

      女</td>

      <td> </td>

    </tr>

    <tr>

      <td>电子邮件地址：</td>

      <td><input type="text" name="textfield4" id="email" onfocus="appearEmail()" onblur="checkEmail()" /></td>

      <td id="warnEmail"> </td>

    </tr>

    <tr>

      <td>出生日期：</td>

      <td><input name="textfield5" type="text" size="4" />

        年

          <select name="select">

            <option>一月</option>

            <option>二月</option>

            <option>三月</option>

          </select>

        月

        <select name="select2">

          <option>1</option>

          <option>2</option>

          <option>3</option>

        </select>

        日</td>

      <td> </td>

    </tr>

    <tr>

      <td> </td>

      <td> </td>

      <td><input name="btn" type="submit" id="btn" value="同意以下协议条款并提交" /></td>

    </tr>

    <tr>

      <td colspan="3"><textarea name="textarea" cols="55" rows="12">一、总结

1.1

2.2</textarea></td>

    </tr>

  </table>

</form>

</body>

实例十八：级联操作城市

<script language="javascript">

//将选项加入sub中

function change(){
var cityArr=new Array()//装城市的数组
cityArr[0]=["河北","南开"]
cityArr[1]=["成都","绵阳"]

//省份中选择的项
var proNode=document.getElementById("selectPro")
var selectIndex=proNode.selectedIndex
var sameIndex=selectIndex-1//所选择的省份所对应的城市的序号

var cityNode=document.getElementById("selectCity")
cityNode.options.length=0//清除多余的城市
var cityOption

//将城市数组加入city节点
for(var i in cityArr[sameIndex]){//var selectValue=selectNode.options[selectIndex].value;//获取选择的option选项
cityOption=new Option(cityArr[sameIndex][i],cityArr[sameIndex][i])
cityNode.options.add(cityOption)
}

}

</script>

</head>

<body>

<form id="form1" name="form1" method="post" action="">

  <p>省份：

    <select name="select" id="selectPro" onchange="change()">

      <option>请选择省份</option>

      <option>天津</option>

      <option>四川</option>

      </select>

  </p>

  <p>城市：

    <select name="select2" id="selectCity">

      <option >请选择城市</option>

    </select>

</p>

</form>

</body>

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

<script language="javascript">

function change(){ 
var picArra=['images/pic0.jpg','images/pic1.jpg','images/pic2.jpg','images/pic3.jpg','images/pic4.jpg']
var nameArra=['--请选择游戏--','大海战2','大话西游','热血江湖','大航海时代']
var gameNode=document.getElementById("gameName")
var gameIndex=gameNode.selectedIndex
var picNode=document.getElementById("pic")
alert('列表框总共包括'+picArra.length+'个游戏\n '+ '您选择的游戏名称是：' +nameArra[gameIndex]+' \n'+ '在列表中的索引是' +gameIndex)
picNode.src=picArra[gameIndex]

}

</script>

</head>

<body>

<form id="form1" name="form1" method="post" action="">

  <p>

    <select name="select" id="gameName" onchange="change()">

      <option>请选择一个游戏</option>

      <option>大海战2</option>

      <option>大话西游</option>

      <option>热血江湖</option>

      <option>大航海时代</option>

    </select>

</p>

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

</form>