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


Posted in Javascript onDecember 29, 2017

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控制鼠标拒绝点击某一按钮的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
基于jQuery实现仿QQ空间送礼物功能代码
May 24 Javascript
巧用jQuery选择器提高写表单效率的方法
Aug 19 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
Bootstrap框架安装使用详解
Jan 21 Javascript
利用jquery去掉时光轴头尾部线条的方法实例
Jun 16 jQuery
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 Javascript
vue2.0实现前端星星评分功能组件实例代码
Feb 12 Javascript
Cocos2d实现刮刮卡效果
Dec 20 Javascript
javascript 易错知识点实例小结
Apr 25 Javascript
vue使用nprogress加载路由进度条的方法
Jun 04 Javascript
JS实现简单的浮动碰撞效果示例
Dec 28 #Javascript
bootstrap-table.js扩展分页工具栏(增加跳转到xx页)功能
Dec 28 #Javascript
基于substring()和substr()的使用以及区别(实例讲解)
Dec 28 #Javascript
JavaScript判断变量名是否存在数组中的实例
Dec 28 #Javascript
JS实现延迟隐藏功能的方法(类似QQ头像鼠标放上展示信息)
Dec 28 #Javascript
Angular实现的简单定时器功能示例
Dec 28 #Javascript
Angular实现的自定义模糊查询、排序及三角箭头标注功能示例
Dec 28 #Javascript
You might like
php foreach如何跳出两层循环(详解)
2016/11/05 PHP
PHP数组去重的更快实现方式分析
2018/05/09 PHP
php5.6.x到php7.0.x特性小结
2019/08/17 PHP
JavaScript Event学习第七章 事件属性
2010/02/07 Javascript
JS定时器实例
2013/04/17 Javascript
js 事件截取enter按键页面提交事件示例代码
2014/03/04 Javascript
2则自己编写的jQuery特效分享
2015/02/26 Javascript
JavaScript列表框listbox全选和反选的实现方法
2015/03/18 Javascript
JavaScript生成.xls文件的代码
2016/12/22 Javascript
JS使用正则截取两个字符串之间的字符串实现方法详解
2017/01/06 Javascript
浅谈angularjs中响应回车事件
2017/04/24 Javascript
javascript实现Java中的Map对象功能的实例详解
2017/08/21 Javascript
微信小程序 Storage更新详解
2019/07/16 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
[02:30]DOTA2英雄基础教程 暗影恶魔
2013/12/17 DOTA
[11:33]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第二场
2018/04/06 DOTA
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
Python基于checksum计算文件是否相同的方法
2015/07/09 Python
Python工程师面试题 与Python Web相关
2016/01/14 Python
python常见排序算法基础教程
2017/04/13 Python
Python使用pymysql小技巧
2017/06/04 Python
python 利用pywifi模块实现连接网络破解wifi密码实时监控网络
2019/09/16 Python
python写一个随机点名软件的实例
2019/11/28 Python
如何解决tensorflow恢复模型的特定值时出错
2020/02/06 Python
完美解决Pycharm中matplotlib画图中文乱码问题
2021/01/11 Python
详解FireFox下Canvas使用图像合成绘制SVG的Bug
2019/07/10 HTML / CSS
日本热销NO.1胶原蛋白冻:Aishitoto爱希特多
2019/06/20 全球购物
Java编程面试题
2016/04/04 面试题
大学生工作推荐信范文
2013/12/02 职场文书
2014年党的群众路线教育实践活动总结
2014/04/25 职场文书
教育系统干部作风整顿心得体会
2014/09/09 职场文书
学校党委干部个人对照检查材料思想汇报
2014/10/09 职场文书
简历中的自我评价怎么写呢?
2019/04/30 职场文书
详解Python生成器和基于生成器的协程
2021/06/03 Python
Sleuth+logback 设置traceid 及自定义信息方式
2021/07/26 Java/Android
Java面试题冲刺第十九天--数据库(4)
2021/08/07 Java/Android