具体内容如下:
<!DOCTYPE html>
<
html
lang
=
"en"
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>Title</
title
>
<
style
>
#pbox{
width: 100%;
height:100%;
}
#box{
width: 200px;
height: 200px;
background:red;
position: absolute;
}
</
style
>
</
head
>
<
body
>
<
input
type
=
"button"
id
=
"btn"
value
=
"随机生成"
>
<
div
id
=
"pbox"
>
<
div
id
=
"box"
>
</
div
>
</
div
>
</
body
>
<
script
>
var btn=document.getElementById("btn");//获取按钮
var box=document.getElementById("box");//获取box
var pbox=document.getElementById("pbox");//获取pbox
var arr=['#fff143','#ff7500','#a3d900','#eedeb0','#ae7000','#b35c44','#392f41','#ff461f','#44cef6','#edd1db','#003371'];//随机颜色
//给btn注册点击事件ain
btn.onclick=function(){
pbox.innerHTML="";//清空pbo
for(var i=0;i<=10;i++){
var newTip =box.cloneNode(true);
pbox.appendChild(newTip);
var left=parseInt(Math.random()*(900-100+1) + 100);//随机生成左边距
var top=parseInt(Math.random()*(500-100+1) + 100);//随机生成上边距
var bg=Math.floor((Math.random()*arr.length));//生成数组随机数获得随机数组下标
box.style.background=arr[bg];//设置颜色
box.style.top=top+"px";//设置上边距
box.style.left=left+"px";//设置左边距
}
var c=pbox.children;
for(var i=0;i<
c.length
;i++){
c[i]
.onmousedown
=
function
(e) {
// alert(this.offsetLeft);
var
spacex
=e.pageX-this.offsetLeft;
var
spacey
=e.pageY-this.offsetTop;
this.onmousemove
=
function
(e) {
this.style.left
=e.pageX-spacex+"px";
this.style.top
=e.pageY-spacey+"px";
}
};
c[i]
.onmouseup
=
function
() {
this.onmousemove
=
null
;
}
}
}
</script>
</
html
>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。
长按识别二维码并关注微信
更方便到期提醒、手机管理