实例七:图片随鼠标滑动二(带有关闭按钮)
<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"> </td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" name="textfield2" id="upwd" οnfοcus="appearPwd()" οnblur="checkPwd()" /></td>
<td id="warnPwd"> </td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" name="textfield3" id="confirmpwd" οnfοcus="appearConfirmPwd()" οnblur="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" οnfοcus="appearEmail()" οnblur="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" ο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>