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 相关文章推荐
web前端开发也需要日志
Dec 09 Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 Javascript
JavaScript用JSONP跨域请求数据实例详解
Jan 06 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
vue.js学习之vue-cli定制脚手架详解
Jul 02 Javascript
Node.js简单入门前传
Aug 21 Javascript
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
vue axios请求拦截实例代码
Mar 29 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
详解vue高级特性
Jun 09 Javascript
vuex管理状态仓库使用详解
Jul 29 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超全局数组(Superglobals)介绍
2015/07/01 PHP
php目录拷贝实现方法
2015/07/10 PHP
深入理解php printf() 输出格式化的字符串
2016/05/23 PHP
javascript-TreeView父子联动效果保持节点状态一致
2007/08/12 Javascript
用js实现上传图片前的预览(TX的面试题)
2007/08/14 Javascript
Javascript 圆角div的实现代码
2009/10/15 Javascript
js以对象为索引的关联数组
2010/07/04 Javascript
基于jQuery的Spin Button自定义文本框数值自增或自减
2010/07/17 Javascript
JS调用CS里的带参方法实例
2013/08/01 Javascript
Flexigrid在IE下不显示数据的有效处理方法
2014/09/04 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
angular分页指令操作
2017/01/09 Javascript
JavaScript 事件对内存和性能的影响
2017/01/22 Javascript
JS简单实现获取元素的封装操作示例
2017/04/07 Javascript
angularjs实现分页和搜索功能
2018/01/03 Javascript
集成vue到jquery/bootstrap项目的方法
2018/02/10 jQuery
Vue.js 使用v-cloak后仍显示变量的解决方法
2018/11/19 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
举例讲解Python设计模式编程的代理模式与抽象工厂模式
2016/01/16 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python调用钉钉自定义机器人的实现
2020/01/03 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
Python字符串及文本模式方法详解
2020/09/10 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
帕克纽约:PARKER NY
2018/12/09 全球购物
Nike香港官网:Nike HK
2019/03/23 全球购物
党员违纪检讨书
2014/02/18 职场文书
《夜晚的实验》教学反思
2014/02/19 职场文书
高一学生评语大全
2014/04/25 职场文书
十佳青年事迹材料
2014/08/21 职场文书
社区灵活就业证明
2014/11/03 职场文书
写给医生的感谢信
2015/01/22 职场文书
领导激励员工的演讲稿,各种会上用得到,建议收藏
2019/08/13 职场文书
一条慢SQL语句引发的改造之路
2022/03/16 MySQL