关于js操作DOM的内置对象运用的小练习

写一个鼠标点击页面任意位置生成一个div

关于js操作DOM的内置对象运用的小练习
思路1:首先是在在window的onclick的事件中创建一个div给文档
关于js操作DOM的内置对象运用的小练习
思路2:给这个div添加一个类
关于js操作DOM的内置对象运用的小练习
思路3:获取鼠标的坐标
关于js操作DOM的内置对象运用的小练习
思路4:将创建的div添加到body中
关于js操作DOM的内置对象运用的小练习
当然要简单的设置一下div的样式
关于js操作DOM的内置对象运用的小练习
给个背景颜色和宽高和绝对绝对定位。
当然你也可以让它变有点意思,让它随机左右斜线动起来
给它一个随机随机整数0或者1
关于js操作DOM的内置对象运用的小练习
再给一个定时器:
在定时器中做个判断如果为0那x就-10px;否则就+10px,并将y的值固定为每次-10px。最后将x和y的值付给div的left和top;

关于js操作DOM的内置对象运用的小练习
当然因为定时器一直在走,所以如果一直走会卡顿,所以我们要清除一下定时器:
关于js操作DOM的内置对象运用的小练习
最后将上面的方法封装一下:
关于js操作DOM的内置对象运用的小练习