<style></style> <body> <input type="text" value="请输入内容"/> <input type="button" value="全选" /> </body> <script> var oText = document.getElementById('text1'); var oBtn = document.getElementById('btn'); oText.onfocus = function(){ if(this.value == '请输入内容'){ this.value = ''; } } oText.onblur = function(){ if(this.value == ''){ this.value = '请输入内容'; } } oBtn.onclick = function(){ oText.select(); } </script>
仿select控件：
<style> #div1{ width: 100px; height: 200px; border: 1px solid red; display: none; } </style> <body> <input type="button" value="按钮" /> <div></div> <p>ppppppppp</p> <p>ppppppppp</p> <p>ppppppppp</p> <p>ppppppppp</p> <p>ppppppppp</p> </body> <script> window.onload = function(){ var oBtn = document.getElementById('btn'); var oDiv = document.getElementById('div1'); oBtn.onclick = function(ev){ var ev = ev || event; ev.cancelBubble = true; oDiv.style.display = 'block'; } document.onclick = function(){ oDiv.style.display = 'none'; } } </script>
留言本:
<style></style> <body> <input type="text"/> <ul></ul> </body> <script> var oUl = document.getElementById('box'); var oText = document.getElementById('con'); document.onkeyup = function(ev){ var ev = ev || even; if(ev.keyCode != ''){ if(ev.keyCode == 13){ var oLi = document.createElement('li'); oLi.innerHTML = oText.value; if(oUl.children[0]){ oUl.insertBefore(oLi,oUl.children[0]); }else{ oUl.appendChild(oLi); } } } } </script>
自定义右键菜单:
<style> body{ height: 2000px; } #box{ width: 100px; height: 200px; background: red; display: none; position: absolute;; } </style> <body> <div></div> </body> <script> var oBox = document.getElementById('box'); document.oncontextmenu = function(ev){ var ev = ev || event; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft; oBox.style.display = 'block'; oBox.style.top = scrollTop + ev.clientY + 'px'; oBox.style.left = scrollLeft + ev.clientX + 'px'; return false; } document.onclick = function(){ oBox.style.display = 'none'; } </script>
键盘控制div运动:
<style> #box{ width: 100px; height: 100px; background: red; position: absolute; } </style> <body> <div></div> </body> <script> var oBox = document.getElementById('box'); var timer = null; var oLeft = false; var oTop = false; var oRight = false; var oBottom = false; // 运动一直就绪，等待按键操作 timer = setInterval(function(){ if(oLeft){ oBox.style.left = oBox.offsetLeft - 10 + 'px'; }else if(oTop){ oBox.style.top = oBox.offsetTop - 10 + 'px'; }else if(oRight){ oBox.style.left = oBox.offsetLeft + 10 + 'px'; }else if(oBottom){ oBox.style.top = oBox.offsetTop + 10 + 'px'; } // 防止溢出 limit(); },10); // 按键按下，开始运动 document.onkeydown = function(ev){ var ev = ev || even; switch (ev.keyCode){ case 37: oLeft = true; break; case 38: oTop = true; break; case 39: oRight = true; break; case 40: oBottom = true; break; } } // 按键抬起，停止运动 document.onkeyup = function(ev){ var ev = ev || even; switch (ev.keyCode){ case 37: oLeft = false; break; case 38: oTop = false; break; case 39: oRight = false; break; case 40: oBottom = false; break; } } function limit(){ // 控制左边 if(oBox.offsetLeft <= 0){ oBox.style.left = 0; } // 控制上边 if(oBox.offsetTop <= 0){ oBox.style.top = 0; } // 控制右边 if(document.documentElement.clientWidth - oBox.offsetLeft - oBox.offsetWidth < 0){ oBox.style.left = document.documentElement.clientWidth - oBox.offsetWidth + 'px'; } // 控制下边 if(document.documentElement.clientHeight - oBox.offsetTop - oBox.offsetHeight < 0){ oBox.style.top = document.documentElement.clientHeight - oBox.offsetHeight + 'px'; } } </script>