使用JavaScript实现事件对象与随机数

我们先来写事件对象，它的布局很简单只需要一张图片，并且我们给他一个id为img，在给他一个定位position: absolute;并且在他标签上设置它的top值和left值都为0；

现在我们来写它的JavaScript。

1. 我们先声明一个变量oImg，将获取的img赋值给他var oImg=document.getElementById("img");。
2. 我们再来写一下鼠标移入事件，并且传一个参数window.οnmοusemοve=function(e){}，这里我们要考虑浏览器的兼容性，所以将两种可能都赋值给参数  e=e||window.Event;。
3. 我们再来获取一下鼠标的x轴和y轴，x=e.clientX; y=e.clientY;我们再将获取的x轴和y轴的坐标赋值给图片的top值和left值。
4. 我们在写一个window的点击事件，window.οnclick=function(){}，再将false赋值给window点鼠标移入事件，意思就是当点击页面时清除鼠标移入事件，最后将鼠标点击的位置的x轴和y轴坐标赋值给图片的top值和left值。这样就写完了。
5. 
6. 我们现在来写随机数。

1. 我们准备两个div，给第一个div一个id为div，再给他一个类为div1，我们来设置一下这个div的样式：设置它的高为height: 100px;行高为line-height:100px;宽为 width: 400px;边框为 border: 10px solid #2F99D4;外边距为margin: 100px auto 0;字体大小为font-size: 50px;垂直方向为text-align: center;边框圆角为border-radius: 20px;背景颜色为一个渐变色background:linear-gradient(toright,#6B6DCF,#1FE585,#fff,#2F99D4,#DB0E11);
2. 我们再给第二个div一个类为div，它的样式为：高height:200px;宽width: 200px;外边距margin: 10px auto 0;它里面放了一个button按钮，文本为“点我”给他设置样式为：高height:200px;宽width: 200px;背景颜色background: linear-gradient(to right, #6B6DCF,#fff,#1FE585);边框圆角border-radius: 50%;边框去除border: none;字体大小font-size: 50px;字体颜色color: #F319E4;
3. 我们封装一个函数aa，在声明三个变量为math，math2，oDiv，我们将1到101（包括1不包括101）的随机数赋值给math， var math=Math.random()*100+1;，我们再将math向下舍入的值赋值给math2，var math2=Math.floor(math);，我们再将获取的第一个div赋值给oDiv，最后将获得的数在第一个div上显示，oDiv.innerHTML=math2;，效果如下：

点击之前的效果：                         点击之后的效果：