随机显示图片，单机图片消失

来源：互联网发布：网络电话卡怎么使用编辑：程序博客网时间：2024/06/05 08:13

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机显示小星星</title>
<script type="text/javascript">
/*
*1.网页背景图片
*2.创建图片标记，并且放在父节点下
*3.图片的大小
4.图片显示的坐标
* 5.定时器
6.点击图片消失
7.图片显示的范围，跟窗口一样
* 8.网页加载完成，开始图片
*/
window.onload=function()
{
//添加背景图片
document.body.style.backgroundImage="url(../images/zheng3.jpg)";
//定时器
window.setInterval("start()",1000);
}
function start()
{
//加图片标记
var imgObj=document.createElement("img");
//给图片加属性

imgObj.src="../images/zheng1.jpg"
//给图片加width属性
var width=getRandom(30,180);
imgObj.width=width;
//图片显示的坐标
var x=getRandom(0,window.innerWidth?window.innerWidth:document.documentElement.clientWidth);
var y=getRandom(0,window.innerHeight?window.innerHeight:document.documentElement.clientHeight);
//图片绝对定位
imgObj.style="position:absolute;left:"+x+"px;top:"+y+"px;";
//点击图片就消失
// imgObj.onclick="removeImg(this)";
imgObj.setAttribute("onclick","removeImg(this)")
//将图片放到父节点Body下
document.body.appendChild(imgObj);

}
function getRandom(min,max)
{
var random=Math.random()*(max-min)+min;
random=Math.floor(random);
return random;
}
function removeImg(obj)
{
document.body.removeChild(obj);
}
</script>
</head>
<body>

</body>
</html>

0 0