实例:随机显示小星星
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS实例_随机显示小星星</title>
<script type="text/javascript">
//实例:随机显示小星星
/* 1,网页背景色
2,创建图片节点,追加到<body>父节点
3,图片随机大小
4,图片随机定位坐标
5,定时器
6,网页加载完成,开始出星星
7,星星显示的范围,此处跟窗口宽高一样,(0,window.innerWidth)
8,点击星星,删除此星星
*/
//网页加载完成
window.onload = function () {
document.body.bgColor = "#000";//背景色为黑
window.setInterval("star()", 1000);//定时器
}
function star() {
var imgObj = document.createElement("img");//创建星星节点
imgObj.setAttribute("src", "images/th11.jpg");//添加图片的属性
//添加width属性,getRandom()随机数函数
var width = getRandom(1, 40);
imgObj.setAttribute("width", width);
//添加style属性,添加星星的定位,随机产生星星的定位,且保证星星不会到窗口外
var x = getRandom(0, window.innerWidth - width);
var y = getRandom(0, window.innerHeight - width);
imgObj.setAttribute("style", "position:absolute;left:" + x + "px;top:" + y + "px;");
//添加onclick事件属性,点击星星时消失
imgObj.setAttribute("onclick", "removeImg(this)");/* this是系统关键字,this只能在函数中使用,是一个对象,含义为当前对象,用户选择到的对象 */
document.body.appendChild(imgObj);//将图片节点,挂到<body>父节点下
}
function getRandom(min, max) {//随机数函数
var random = Math.random() * (max - min) + min;//随机数
random = Math.floor(random);//向下取整
return random;
}
function removeImg(obj) {//删除img节点函数
document.body.removeChild(obj);
}
</script>
</head>
<body>
</body>
</html>
显示效果如下:
用到的小星星图片如下: