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

最新推荐文章于 2022-07-27 17:10:26 发布

samuel918

最新推荐文章于 2022-07-27 17:10:26 发布

阅读量426

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Shh_1758668879/article/details/57182271

本文介绍了一种使用JavaScript实现的网页随机显示小星星效果的方法。该效果包括为网页设置背景图片、定时随机出现不同大小的小星星图片、并允许通过点击移除星星。小星星的位置会在浏览器视口范围内随机生成。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>