1、选项卡效果
第一种方法：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .se//设置标题的样式 { 150px; height:30px; line-height:30px; text-align:center; vertical-align:middle; float:left; } #se1//设置选项卡se1的样式 { background-color:yellow; 150px; height:200px; } #se2//设置选项卡se2的样式 { background-color:green; 150px; height:200px; } #se3//设置选项卡se3的样式 { background-color:red; 150px; height:200px; } </style> </head> <body> <div class="se" biaoshi="yellow" style="background-color:yellow" onclick="color('yellow')">黄色</div>//建立标题，设置标识并添加事件 <div class="se" biaoshi="green" style="background-color:green" onclick="color('yellow')">绿色</div> <div class="se" biaoshi="red" style="background-color:red" onclick="color('yellow')">红色</div> <div style="clear:both"></div>//截流 <div id="se1" style="display:block"></div>//建立选项卡 <div id="se1" style="display:none"></div> <div id="se1" style="display:none"></div> </body> <script type="application/javascript"> var se1=document.getElementById("se1");//找到对象选项卡 var se2=document.getElementById("se2"); var se3=document.getElementById("se3"); function color(a)//定义函数事件名称 { if(a=="yellow") { se1.style.display="block"; se2.style.display="none"; se3.style.display="none"; } else if(a=="green") { se1.style.display="none"; se2.style.display="block"; se3.style.display="none"; } else if(a=="red") { se1.style.display="none"; se2.style.display="none"; se3.style.display="block"; } } </script> </html>
第二种方法： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> .yan { 50px; height:30px; line-height:30px; text-align:center; vertical-align:middle; float:left; } #yan1 { 150px; height:200px; background-color:yellow; } #yan2 { 150px; height:200px; background-color:green; } #yan3 { 150px; height:200px; background-color:red; } </style> </head> <body> <div class="yan" style="background-color:yellow" onclick="changecolor('yan1')">黄色</div> <div class="yan" style="background-color:green" onclick="changecolor('yan2')">绿色</div> <div class="yan" style="background-color:red" onclick="changecolor('yan3')">红色</div> <div id="yan1" style="display:block"></div>--初始状态显示黄色 <div id="yan2" style="display:none"></div>--初始状态不显示颜色 <div id="yan3" style="display:none"></div>--初始状态不显示颜色 </body> <script type="text/javascript"> function yincang() { document.getElementById("yan1").style.display="none"; document.getElementById("yan2").style.display="none"; document.getElementById("yan3").style.display="none"; } function changecolor(a)--a是指三个id里的任何一个 { yincang();--调用yincang函数 document.getElementById(a).style.display="block";根据id来找元素，找到后显示相对应的颜色 } </script> </html>
2、按钮前面打上勾之后按钮可用，否则不可用
<body> <input id="wb" type="checkbox" onclick="dianji()"/>--设置一个单选按钮，添加一个单击鼠标执行的事件，名为dianji <input id="bu" type="button" value="下一步" disabled="disabled"/>--设置一个按钮，并且设置为不可使用 </body> <script type="text/javascript"> function dianji() { var wb=document.getElementById("wb"); var bu=document.getElementById("bu"); if(wb.checked==true)//选中按钮 { bu.removeAttribute("disabled"); //删除不可使用这个属性，使得在选中按钮后下一步按钮可执行 } else //没选中按钮 { bu.setAttribute("disabled","disabled");//下一步这个按钮不可使用 } } </script> </html>
3、做下拉菜单效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css"> #cd { 50px; height:30px; line-height:30px; background-color:#C9F; text-align:center; vertical-align:middle; } #cd:hover { cursor:pointer; background-color:#C3C; } #xl { 50px; height:120px; line-height:30px; text-align:center; vertical-align:middle; background-color:#CC9; } </style> </head> <body> <div id="cd" onmouseover="xianshi()" onmouseout="yincang()">菜单</div>--鼠标放上去执行xianshi事件，鼠标移开显示yincang事件 <div id="xl" style="display='none'">--下拉菜单初始状态为隐藏上去 <div class="c" >苹果</div> <div class="c">梨子</div> <div class="c">香蕉</div> <div class="c">山竹</div> </div> </body> <script type="text/javascript"> function xianshi() { document.getElementById("xl").style.display="block";--鼠标放上去显示 } function yincang() { document.getElementById("xl").style.display="none"; --鼠标移开不显示 } </script> </html>
4、倒计时按钮，倒计时10秒之后可用。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <input id="s" type="button" value="同意（9）" disabled="disabled"/> </body> <script type="text/javascript"> var n=9; function s() { n--; var a=document.getElementById("s"); if(n==0) { a.value="同意"; a.removeAttribute("disabled"); } else { a.value="同意("+n+")"; window.setTimeout("s()",1000);--延迟1秒变一次 } } window.setTimeout("s()",1000); </script> </html>
5、做一个问题，输入答案之后，点击按钮查看答案是否正确。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> </head> <body> <span>车轮是圆的还是方的？</span> <textarea id="hd" daan="圆的"></textarea> <input type="button" value="检查" onclick="show()"/> </body> <script type="text/javascript"> function show() { var a=document.getElementById("hd"); var b=a.getAttribute("daan"); var c=a.value; if(b==c) { alert("恭喜答对了"); } else { alert("答错了"); } } </script> </html>