1.自定义右键菜单：
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 * {margin:0; padding:0; list-style:none;} 8 #div1 {position:absolute; width:80px; background:#CCC; border:1px solid black; display:none;} 9 </style> 10 <script> 11 document.oncontextmenu=function (ev) 12 { 13 var oEvent=ev||event; 14 var oDiv=document.getElementById('div1'); 15 16 oDiv.style.display='block'; 17 oDiv.style.left=oEvent.clientX+'px'; 18 oDiv.style.top=oEvent.clientY+'px'; 19 20 return false; 21 }; 22 23 document.onclick=function () 24 { 25 var oDiv=document.getElementById('div1'); 26 27 oDiv.style.display='none'; 28 }; 29 </script> 30 </head> 31 <body> 32 <div id="div1"> 33 <ul> 34 <li>aaa</li> 35 <li>bbb</li> 36 <li>ccc</li> 37 <li>ddd</li> 38 </ul> 39 </div> 40 </body> 41 </html>
2、只能输入数字的文本框：
1 <script> 2 window.onload=function () 3 { 4 var oTxt=document.getElementById('txt1'); 5 6 oTxt.onkeydown=function (ev) 7 { 8 var oEvent=ev||event; 9 //alert(oEvent.keyCode); 10 //0- 48 11 //9- 57 12 //如果 用户按的 不是退格 并且 也不是数字 13 14 if(oEvent.keyCode!=8 && (oEvent.keyCode<48 || oEvent.keyCode>57)) 15 { 16 return false; 17 } 18 }; 19 }; 20 </script> 21 </head> 22 <body> 23 <input type="text" id="txt1" />
3、拖拽：
1 <style> 2 #div1 {width:200px; height:200px; background:red; position:absolute;} 3 </style> 4 <script> 5 window.onload=function () 6 { 7 var oDiv=document.getElementById('div1'); 8 9 var disX=0; 10 var disY=0; 11 12 oDiv.onmousedown=function (ev) 13 { 14 var oEvent=ev||event; 15 16 disX=oEvent.clientX-oDiv.offsetLeft; 17 disY=oEvent.clientY-oDiv.offsetTop; 18 19 document.onmousemove=function (ev) 20 { 21 var oEvent=ev||event; 22 var l=oEvent.clientX-disX; 23 var t=oEvent.clientY-disY; 24 25 if(l<0) 26 { 27 l=0; 28 } 29 else if(l>document.documentElement.clientWidth-oDiv.offsetWidth) 30 { 31 l=document.documentElement.clientWidth-oDiv.offsetWidth; 32 } 33 34 if(t<0) 35 { 36 t=0; 37 } 38 else if(t>document.documentElement.clientHeight-oDiv.offsetHeight) 39 { 40 t=document.documentElement.clientHeight-oDiv.offsetHeight; 41 } 42 43 oDiv.style.left=l+'px'; 44 oDiv.style.top=t+'px'; 45 }; 46 47 document.onmouseup=function () 48 { 49 document.onmousemove=null; 50 document.onmouseup=null; 51 }; 52 53 return false; 54 }; 55 }; 56 </script> 57 </head> 58 <body> 59 <div id="div1"></div>