JavaScript实现随机显示小星星

最新推荐文章于 2021-09-08 22:50:31 发布

Dev-Liangjian

最新推荐文章于 2021-09-08 22:50:31 发布

阅读量1.6k

点赞数 2

分类专栏： JavaScript 文章标签： javascript 随机小星星

本文链接：https://blog.csdn.net/qq_34804120/article/details/78740052

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
    <!--实例：随机显示小星星
    (1)网页加载完成，利用定时器加载星星
    (2)创建图片节点，追加到<body>父节点
    (3)设置小星星图片的属性：图片随机大小
    (4)图片随机定位坐标(x,y) 图片的显示坐标不要超出浏览器窗口范围
    (5)为星星添加onclick事件 单击星星移除图片-->
    <head>
        <meta charset="UTF-8">
        <title>随机显示小星星</title>
        <script type="text/javascript">
            //页面加载完成开始加载小星星
            window.onload = function(){
                //设置定时器   1秒钟显示一个小星星
                window.setInterval("ShowStart()",1000);
            }
            //动画主函数
            function ShowStart(){
                //创建图片节点
                var img = document.createElement("img");
                //将图片节点追加到body节点下
                document.body.appendChild(img);
                //设置img的属性
                img.setAttribute("src","img/xingxing.PNG");
                var width = getRandom(30,80);
                img.setAttribute("width",width);
                //设置星星的随机坐标
                var x = getRandom(0,window.innerWidth-50);
                var y = getRandom(0,window.innerHeight-50);
                img.setAttribute("style","position: absolute;left:"+x+"px; top:"+y+"px;");
                //为星星添加onclick事件属性
                img.setAttribute("onclick","removeImg(this)");
            }
            //随机数函数
            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>

Dev-Liangjian

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现随机显示小星星

<!DOCTYPE html><html>  <head
复制链接

扫一扫

专栏目录