首页 > 开发 > JS > 正文

JS控制鼠标拒绝点击某一按钮的实例

2024-05-06 16:41:39
字体:
来源:转载
供稿:网友

JS控制按钮禁止被选择

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> window.onload=function(){   document.getElementById("s").onmouseover=function(evet){      var _x=this.offsetLeft;   var _y=this.offsetTop;   var x=Math.random()*180+Math.random()*50;   var y=Math.random()*120+Math.random()*50;   this.style.position="absolute";   this.style.top=y+'px';   this.style.left=x+'px';   return false;  }  document.getElementById("s").onclick=function(){  alert("就知道你心里想的和表面做的是相反的!");  document.getElementById("main").style.display="none";  document.getElementById("img").style.display="block";  }  document.getElementById("w").onclick=function(){  alert("宝贝:谢谢你的爱!我爱你╮(╯▽╰)╭");  document.getElementById("main").style.display="none";  document.getElementById("img").style.display="block";  }} </script> <style> *{ margin:0; padding:0; } html{ height: 100%; background:url(http://img17.3lian.com/d/file/201702/13/9524e4e08e99e0423f9e9f299e314c72.gif) no-repeat;  background-size: cover; } span{ width: 100%; height: 100px; display: block; text-align: center; line-height: 100px; color: #fff; } section{ } section button:nth-child(1){ position: absolute; background: #DE7C2C; left: 100px; border: 0; z-index: 1; } section button:nth-child(2){ position: absolute; z-index: 0; border: 0; background: #DE7C2C; left: 150px; } div{  width:300px;   height:200px;   background:rgba(34,93,146,.7);   border:1px solid #eee;   position:absolute;  left:0;  top: 0;  bottom: 0;  right: 0;  margin: auto; } </style></head><body> <div id="main"> <span>亲爱的我爱你,你爱我吗?</span> <section> <button id="s" style="padding:1px 10px;">不</button>  <button id="w" style="padding:1px 10px;">爱</button> </section>  </div><div id="img" style=" display:none; width:100%; height:100%; background:url(http://upfile.asqql.com/2009pasdfasdfic2009s305985-ts/2017-8/20178172014060928.gif) no-repeat; background-size:cover;"></div></body></html>

以上这篇JS控制鼠标拒绝点击某一按钮的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持VeVb武林网。


注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表