<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
//当页面加载完成后调用匿名函数
window.onload = function(){
//获取body节点
var node_body = document.body;
node_body.setAttribute("bgColor","skyblue");
//设置定时器k
window.setInterval("star()",1000);
}
//设置star函数
function star(){
//创建图片子节点
var imgObj = document.createElement("img");
//给img增加属性
imgObj.setAttribute("src","./images/star.jpg"); //此处图片需要自己准备,以及修改相应的地址
//调用随机函数,随机设置图片的宽
var width = suiji(15,85);
imgObj.setAttribute("width",width);
//调用随机函数,随机设置图片出现的位置
var x = suiji(0,window.innerWidth-80);
var y = suiji(0,window.innerHeight-80);
imgObj.setAttribute("style","position:absolute;left:"+x+"px;top:"+y+"px;");
//增加img的onclick事件
imgObj.setAttribute("onmouseout","removeStar(this)");
//在body节点后增加子节点img
document.body.appendChild(imgObj);
}
//设置random函数
function suiji(Min,Max){
var randomNum = Math.random()*(Max-Min)+Min;
randomNum = Math.floor(randomNum);
return randomNum;
}
//设置removeStar函数
function removeStar(obj){
document.body.removeChild(obj);
}
</script>
</head>
<body>
</body>
</html>
从学习视频中学习而来,不知道能否贴上原创标签?