点击这里给我发消息 点击这里给我发消息

javascript---逃走的按钮

添加时间:2013-12-7
    相关阅读: 网页 HTML

  一、 由来

  曾有一些“纯属娱乐”的网页,有一些有奖问答题,但又故意让你点不到正确的答案:当你鼠标

  一靠近按钮,按钮就逃开了。自己也试着做了一个,供大家学习娱乐。

  二、 原理

  其实非常简单:当鼠标放到按钮上面时,改变按钮的位置(赋随机值)。

  三、 代码

  代码

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html>

  <head>

  <title>你中奖了!!!!</title>

  <style>

  body {

  text-align:center;

  }

  #d {

  margin-left:0 auto;

  margin-right:0 auto;

  text-align:center;

  }

  input {

  width:100px;

  height:40px;

  }

  </style>

  </head>

  <body>

  <div id="d">

  <h2>恭喜你得了一等奖,点击领取:</h2>

  <input type="button" onmouseover="move(this);" onclick="alert('骗你的=_=');" value="确定" />

  </div>

  </body>

  <script type="text/javascript" >

  var height = document.documentElement.clientHeight - 100;    //按钮可能上下移动的距离

  var width = document.documentElement.clientWidth - 40;        //按钮可能左右移动的距离

  function move(obj) {

  obj.style.position = "absolute";

  obj.style.top = Math.random() * height + "px";

  obj.style.left = Math.random() * width + "px";

  }

  function cancel() {

  alert("你已放弃领奖,谢谢!");

  window.close();

  }

  </script>

  </html>

  四、 注意

  (1) style下的属性在被赋值之前为空。

  (2) 记得要在style.top/left等之后加上px,否则对于许多浏览器都不能正确设置该

  值。

咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册