一：选中复选框按钮可用 和 倒计时10秒后按钮可用
这是倒计时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> <div> <span id="daojishi">10</span> <input disabled="disabled" type="button" value="注册" id="anniu" /> </div> </body> <script type="text/javascript"> var id; id=window.setInterval("daojishi()",1000); function daojishi() { //找到span var anniu=document.getElementById("anniu"); var s = document.getElementById("daojishi"); var t=s.innerText; t=t-1; if(t<=0) { window.clearInterval(id); anniu.removeAttribute("disabled"); } s.innerText=t; } </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> </head> <body> <input type="button" value="按钮" disabled="disabled" id="anniu" /> <input type="checkbox" onclick="xuanzhong()" id="ck"/> </body> <script type="text/javascript"> function xuanzhong() { var anniu=document.getElementById("anniu"); var ck=document.getElementById("ck"); if(ck.checked) { anniu.removeAttribute("disabled"); } else { anniu.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> </head> <style type="text/css"> .list{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;} .list1{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;} .list2{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;} .list3{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;} .list4{ width:150px; height:50px; list-style:none; text-align:center; line-height:50px; vertical-align:middle;} </style> <body> <div style="150px; height:1000px;"> <ul> <li class="list" style=" background-color:#F00" onclick="dianji('yi')">文件</li> <div id="yi" style="150px; height:200px; display:none"> <ul> <li class="list1">文件</li> <li class="list1">编辑</li> <li class="list1">格式</li> <li class="list1">命令</li> </ul> </div> <li class="list" style=" background-color:#0F0" onclick="dianji('er')">编辑</li> <div id="er" style="150px; height:200px; display:none"> <ul> <li class="list2">文件</li> <li class="list2">编辑</li> <li class="list2">格式</li> <li class="list2">命令</li> </ul> </div> <li class="list" style=" background-color:#00F" onclick="dianji('sa')">格式</li> <div id="sa" style="150px; height:200px; display:none"> <ul> <li class="list3">文件</li> <li class="list3">编辑</li> <li class="list3">格式</li> <li class="list3">命令</li> </ul> </div> <li class="list" style=" background-color:#FF0" onclick="dianji('si')">命令</li> <div id="si" style="150px; height:200px; display:none"> <ul> <li class="list4">文件</li> <li class="list4">编辑</li> <li class="list4">格式</li> <li class="list4">命令</li> </ul> </div> </ul> </div> </body> <script type="text/javascript"> function dianji(a) { var a=document.getElementById(a); if(a.style.display=="none") { a.style.display="block"; } else { a.style.display="none"; } } </script> </html>
4.下拉列表
<!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> <style type="text/css"> *{ margin:0px auto; padding:0px;} .list{ width:100px; height:50px; text-align:center; line-height:50px; vertical-align:middle; float:left; list-style:none;} .ys{ width:100px; height:100px; float:left; margin-top:50px; margin-left:-100px;} </style> <body> <<br /><<br /> <div style="400px; height:50px;"> <ul> <li class="list" style="background-color:#F00" onmouseover="yishang('yi')" onmouseout="yichu('yi')">文件</li> <div id="yi" class="ys" style="background-color:#F00;display:none"></div> <li class="list" style="background-color:#0F0" onmouseover="yishang('er')" onmouseout="yichu('er')">编辑</li> <div id="er" class="ys" style="background-color:#0F0;display:none"></div> <li class="list" style="background-color:#00F" onmouseover="yishang('sa')" onmouseout="yichu('sa')">命令</li> <div id="sa" class="ys" style="background-color:#00F;display:none"></div> <li class="list" style="background-color:#FF0" onmouseover="yishang('si')" onmouseout="yichu('si')">帮助</li> <div id="si" class="ys" style="background-color:#FF0;display:none"></div> </ul> </div> </body> <script type="text/javascript"> function yishang(a) { var a=document.getElementById(a); if(a.style.display=="none") { a.style.display="block"; } } function yichu(a) { var a=document.getElementById(a); a.style.display="none"; } </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> <style type="text/css"> *{ margin:0px auto; padding:0px;} #yi{ width:200px; height:50px; border:1px solid #333; text-align:center; line-height:50px; vertical-align:middle;} #yi:hover{ cursor:pointer} .list{ width:200px; height:50px; border:1px solid #333; text-align:center; line-height:50px; vertical-align:middle; border-top:none;} .list:hover{ cursor:pointer;} </style> <body> <<br /><<br /> <div id="yi" onclick="dianji()">选项</div> <div id="er" style="display:none"> <div class="list" onclick="xuan(this)">山东</div> <div class="list" onclick="xuan(this)">河北</div> <div class="list" onclick="xuan(this)">山西</div> </div> </body> <script type="text/javascript"> function dianji() { var a=document.getElementById("er"); if(a.style.display=="none") { a.style.display="block"; } else { a.style.display="none"; } } function xuan(a) { var yi=document.getElementById("yi"); var b=document.getElementById("er"); yi.innerHTML=a.innerHTML; b.style.display="none"; } </script> </html>
6.进度条
<!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> <style type="text/css"> *{ margin:0px auto; padding:0px;} #yi{ width:1000px; height:10px; border:1px solid #999; border-radius:5px;} </style> <body> <br /><<br /> <div id="yi"> <div id="er" style="0px; height:10px; background-color:#F00; float:left"></div> </div> </body> <script type="text/javascript"> var id; id=window.setInterval("jindu()",10); function jindu() { var a=document.getElementById("er"); var k=a.style.width; k=parseInt(k.substr(0,k.length-2))+2; a.style.width=k+"px"; if(k>=1000) { window.clearInterval(id); } } </script> </html>
7.滚动条事件
<!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> <style type="text/css"> *{ margin:0px auto; padding:0px;} </style> <body> <div id="yi" style="100%; height:30px; background-color:#F00"></div> <div id="er" style="100%; height:60px; background-color:#000"></div> <div id="sa" style="100%; height:800px; background-color:#009"></div> </body> <script type="text/javascript"> window.onscroll=function () { var a=document.getElementById("er"); if(window.scrollY>=30) { a.style.position="fixed"; a.style.top="0px"; } else { a.style.position="relative"; } } </script> </html>
8.滑动
<!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> <style type="text/css"> </style> <body> <div id="yi" style="100px; height:300px; background-color:#F00; float:left"></div> <div id="er" style="1000px; height:300px; background-color:#000; float:left;"> </div> <div id="sa" style=" 50px; height:50px; background-color:#CCC; position:relative; top:125px; left:75px; cursor:pointer;" onclick="dianji()"></div> </body> <script type="text/javascript"> var id; function dianji() { id=window.setInterval("dong()",10); } function dong() { var a=document.getElementById("yi"); var h=a.style.width; h=parseInt(h.substr(0,h.length-2))+2;
if(h>=1100)
{
window.clearInterval(id);
return;
}
a.style.width=h+"px"; var b=document.getElementById("er"); var he=b.style.width; he=parseInt(he.substr(0,he.length-2))-2; b.style.width=he+"px"; var c=document.getElementById("sa"); var xiao=c.style.left; xiao=parseInt(xiao.substr(0,xiao.length-2))+2; c.style.left=xiao+"px"; } </script> </html>