<style type="text/css">
div{
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
line-height: 50px;
text-align: center;
font-size: 12px;
cursor: move;
}
</style>
// 点击按钮时,在页面内随机位置插入一个div,div的内容随机名字,div的背景是随机颜色.
// div默认会抖动,鼠标移入div时,div停止抖动,鼠标移开时,重新抖动,并且div还是可以拖拽.
var oBtn=document.getElementById("btn");
var winW=document.documentElement.clientWidth;
var winH=document.documentElement.clientHeight;
var arr=['佩奇','乔治','','猪爸爸','猪妈妈','苏西','艾米丽','苏怡','丹尼','坎迪','瑞贝卡','理查德','佩德罗','亚历山大']
oBtn.onclick=function(){
var oDiv=document.createElement("div");
document.body.appendChild(oDiv);
oDiv.style.left=getRandom(winW-50,0)+'px';
oDiv.style.top=getRandom(winH-50,0)+'px';
oDiv.innerText=arr[getRandom(arr.length,0)];
oDiv.style.background=
'rgb('+getRandom(256,0)+','+getRandom(256,0)+','+getRandom(256,0)+')';
oDiv.timer=setInterval(dese(oDiv),20);
}
document.body.onmousedown=function (ev) {
var ev=ev||window.event;
var et=ev.target||ev.srcElement;
if(et.nodeName=='DIV'){
var disX=ev.clientX-et.offsetLeft;
var disY=ev.clientY-et.offsetTop;
document.onmousemove=function (ev) {
var ev=ev||window.event;
ev.preventDefault();
et.style.left=ev.clientX-disX+'px';
et.style.top=ev.clientY-disY+'px';
}
document.onmouseup=function () {
document.onmousemove=null;
document.onmouseup=null;
}
}
}
document.body.onmouseover=function (ev) {
var ev=ev||window.event;
var et=ev.target||ev.srcElement;
// 如果鼠标移入div,则清除这个div的定时器
if(et.nodeName=='DIV'){
clearInterval(et.timer);
}
}
document.body.onmouseout=function (ev) {
var ev=ev||window.event;
var et=ev.target||ev.srcElement;
//鼠标移开div,则重启这个div的定时器
if(et.nodeName=='DIV'){
et.timer=setInterval(dese(et),20);
}
}
function dese(ele){
return function () {
ele.style.left=ele.offsetLeft+getRandom (2,-1)+'px';
ele.style.top=ele.offsetTop+getRandom (2,-1)+'px';
}
}
//获取任意两个数之间的随机整数
function getRandom (a,b){
return Math.floor(Math.random()*(a-b)+b);
}