前端：JS/26/实例：随机显示小星星

最新推荐文章于 2022-04-27 18:59:07 发布

浅香沉木

最新推荐文章于 2022-04-27 18:59:07 发布

阅读量487

点赞数

文章标签： js

本文链接：https://blog.csdn.net/Java_53/article/details/106096299

版权

实例：随机显示小星星

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

显示效果如下：

用到的小星星图片如下：

@沉木

浅香沉木

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端：JS/26/实例：随机显示小星星

实例：随机显示小星星<!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/ja
复制链接

扫一扫