1.可变参数函数
1 function fun () { 2 var res=0; 3 for(var i=0;i<arguments.length;i++){ 4 res+=arguments[i]; 5 } 6 document.write("求和结果："+res+"<br>"); 7 } 8 9 fun(10,20,30,40,50); //150 10 fun(10,20,30,40); //100 11 fun(10,20,30); //60 12 fun(10,20); //30 13 fun(10); //10
2.选择框
1 <h3>JS实例--选择框</h3> 2 <ul> 3 <li><input type="checkbox" name="bid"> 篮球</li> 4 <li><input type="checkbox" name="bid"> 足球</li> 5 <li><input type="checkbox" name="bid"> 网球</li> 6 <li><input type="checkbox" name="bid"> 羽毛球</li> 7 </ul> 8 <button onclick="fun(1)">全选</button> 9 <button onclick="fun(2)">全不选</button> 10 <button onclick="fun(3)">反选</button> 11 <script type="text/javascript"> 12 function fun (c) { 13 var bid=document.getElementsByTagName("input"); 14 switch(c){ 15 case 1: 16 for(var i=0;i<bid.length;i++){ 17 bid[i].checked=true; 18 } 19 break; 20 case 2: 21 for(var i=0;i<bid.length;i++){ 22 bid[i].checked=false; 23 } 24 break; 25 case 3: 26 for(var i=0;i<bid.length;i++){ 27 bid[i].checked=!bid[i].checked; 28 } 29 break; 30 } 31 } 32 </script>
3.事件绑定
1 <button onclick="fun1()">按钮1</button> 2 <button id="btn">按钮2</button> 3 <script type="text/javascript"> 4 function fun1() { 5 alert("ok"); 6 } 7 btn.onclick=function (){ 8 alert("ok2"); 9 } 10 </script>
4.获取事件源
1 <button onclick="fun1(this)">按钮1</button> 2 <button id="btn">按钮2</button> 3 <script type="text/javascript"> 4 function fun1(ob) { 5 ob.style.color="blue"; 6 } 7 btn.onclick=function (){ 8 this.style.color="red"; 9 } 10 </script>
5.双击事件
1 <script type="text/javascript"> 2 var list=document.getElementsByTagName("li"); 3 for(var i=0;i<list.length;i++){ 4 list[i].ondblclick=function(){ 5 this.style.backgroundColor="#f0c"; 6 } 7 } 8 </script>
6.右击事件
1 <script type="text/javascript"> 2 window.document.oncontextmenu=function(ent){ 3 var myevent= ent || window.event; 4 5 var x=myevent.clientX; 6 var y=myevent.clientY; 7 8 var ul=document.getElementById("uid"); 9 ul.style.top=y+"px"; 10 ul.style.left=x+"px"; 11 ul.style.display="block"; 12 return false; 13 } 14 //随便左键单击隐藏右键栏 15 window.document.onclick=function(){ 16 uid.style.display="none"; 17 return false; 18 } 19 </script>
7.商品展示
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript--实例</title> 6 <style type="text/css"> 7 div,img{ 8 margin: 0px; 9 padding: 0px; 10 11 } 12 #did{ 13 384px; 14 height: 240px; 15 } 16 #list img{ 17 85px; 18 border:2px solid #fff; 19 margin-right: 2px; 20 } 21 #list img:hover{ 22 border:2px solid red; 23 } 24 #bigid{ 25 400px; 26 height: 400px; 27 overflow: hidden; 28 position: absolute; 29 display: none; 30 } 31 </style> 32 </head> 33 <body> 34 <h3>JavaScript实例--放大镜</h3> 35 <div id="did"> 36 <img id="mid" src="./images/11.jpg" width="384"> 37 </div> 38 <div id="bigid"><img id="bigimg" src="./images/11.jpg"></div> 39 <div id="list" > 40 <img src="./images/11.jpg"> 41 <img src="./images/22.jpg"> 42 <img src="./images/33.jpg"> 43 <img src="./images/44.jpg"> 44 </div> 45 <script type="text/javascript"> 46 var list=document.getElementById("list").getElementsByTagName("img"); 47 48 for(var i=0;i<list.length;i++){ 49 list[i].onmouseover=function(){ 50 document.getElementById("mid").src=this.src; 51 document.getElementById("bigimg").src=this.src; 52 } 53 } 54 var mid = document.getElementById("mid"); 55 var bigid = document.getElementById('bigid'); 56 57 mid.onmouseover=function(){ 58 bigid.style.top=this.offsetTop+"px"; 59 bigid.style.left=this.offsetLeft+this.offsetWidth+10+"px"; 60 bigid.style.display="block"; 61 } 62 mid.onmouseout=function(){ 63 bigid.style.display='none'; 64 } 65 mid.onmousemove=function(ent){ 66 var myevent= ent || window.event; 67 var x=event.clientX - this.offsetLeft; 68 var y=event.clientY - this.offsetTop; 69 70 bigid.scrollTop=y*5-200; 71 bigid.scrollLeft=x*5-200; 72 } 73 </script> 74 </body> 75 </html>
8.鼠标拖动
1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>JavaScript--实例</title> 6 <style type="text/css"> 7 #did{ 8 margin: 0px; 9 padding: 0px; 10 100px; 11 height: 100px; 12 background-color: #ddd; 13 cursor: move; 14 position: absolute; 15 } 16 17 </style> 18 </head> 19 <body> 20 <h3>JavaScript实例--mouse鼠标拖动事件</h3> 21 <div id="did"></div> 22 <script type="text/javascript"> 23 var did=document.getElementById("did"); 24 did.onmousedown=function(ent){ 25 var myevent= ent || window.event; 26 var x=myevent.clientX - this.offsetLeft; 27 var y=myevent.clientY - this.offsetTop; 28 29 this.style.backgroundColor="blue"; 30 31 window.document.onmousemove=function(e){ 32 var myent= e || window.event; 33 34 did.style.top=myent.clientY - y +"px"; 35 did.style.left=myent.clientX - x +"px"; 36 } 37 } 38 39 did.onmouseup=function(){ 40 this.style.backgroundColor="#ddd"; 41 window.document.onmousemove=null; 42 } 43 </script> 44 </body> 45 </html>