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" οnmοusedοwn="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+step
}
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" οnmοuseοver="showT('ul1')" οnmοuseοut="closeT('ul1')" >影片欣赏
<li οnmοuseοver="this.className='tabelColor'" οnmοuseοut="this.className=''">影片1</li>
<li οnmοuseοver="this.className='tabelColor'" οnmοuseοut="this.className=''">影片2</li>
<li οnmοuseοver="this.className='tabelColor'" οnmοuseοut="this.className=''">影片3</li>
</ul>
<ul id="ul2" οnmοuseοver="showT('ul2')" οnmοuseοut="closeT('ul2')">在线教学
<li οnmοuseοver="this.className='tabelColor'" οnmοuseοut="this.className=''">教学1</li>
<li οnmοuseοver="this.className='tabelColor'" οnmοuseοut="this.className=''">教学2</li>
<li οnmοuseοver="this.className='tabelColor'" οnmοuseοut="this.className=''">教学3</li>
</ul>
<ul id="ul3" οnmοuseοver="showT('ul3')" οnmοuseοut="closeT('ul3')">设计图库
<li οnmοuseοver="this.className='tabelColor'" οnmοuseοut="this.className=''">图案1</li>
<li οnmοuseοver="this.className='tabelColor'" οnmοuseοut="this.className=''">图案2</li>
<li οnmοuseοver="this.className='tabelColor'" οnmοuseοut="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" οnclick="closeText()">关闭</p><p id="nameText"><label οnclick="getValue(0)">北京</label> <label οnclick="getValue(1)">上海</label><label οnclick="getValue(2)"> 深圳</label><label οnclick="getValue(3)"> 湖南</label></p></div>
<div id="id1">城市：<input type="button" id="btn" value="选择/修改" οnclick="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 οnlοad="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" οnsubmit="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" οnfοcus="appearName()" οnblur="checkName()" /></td>
      <td width="283" id="warnName">&nbsp;</td>
    </tr>
    <tr>
      <td>密码：</td>
      <td><input type="password" name="textfield2" id="upwd" οnfοcus="appearPwd()" οnblur="checkPwd()" /></td>
      <td id="warnPwd">&nbsp;</td>
    </tr>
    <tr>
      <td>确认密码：</td>
      <td><input type="password" name="textfield3" id="confirmpwd" οnfοcus="appearConfirmPwd()" οnblur="checkConfirmPwd()" /></td>
      <td id="warnCofirmPwd">&nbsp;</td>
    </tr>
    <tr>
      <td>性别：</td>
      <td><input name="radiobutton" type="radio" value="radiobutton" checked="checked" />
      男
      <input type="radio" name="radiobutton" value="radiobutton" />
      女</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>电子邮件地址：</td>
      <td><input type="text" name="textfield4" id="email" οnfοcus="appearEmail()" οnblur="checkEmail()" /></td>
      <td id="warnEmail">&nbsp;</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>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</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" οnchange="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" οnchange="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>