JavaScript 随机显示照片

最新推荐文章于 2023-11-05 21:18:21 发布

呆呆敲代码丫

最新推荐文章于 2023-11-05 21:18:21 发布

阅读量3.4k

点赞数 39

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46474458/article/details/107450314

版权

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>无标题文档</title>
    <script type="text/javascript">
        var x_left = 0;
        var x_right = 0;
        var y_top = 0;
        var y_bottom = 0;
        var img_width_min = 10;
        var img_width_max = 80;

        function init() {
            //取得body对象，设置网页背景色
            body_node = document.body;
            body_node.bgColor = "#000000";
            //取得网页的宽度
            x_right = window.innerWidth - img_width_max;
            y_bottom = window.innerHeight - img_width_max;


            //调用showStar()函数
            setInterval("showStar()", 1000);
        }

        //取得随机数
        function getRandomNum(num1, num2) {
            return Math.floor(Math.random() * (num2 - num1)) + num1;
        }

        //点击星星消失
        function removeStar(obj) {
            document.body.removeChild(obj);
        }

        //显示星星
        function showStar() {
            var node_img = document.createElement("img");
            var x = getRandomNum(x_left, x_right);
            var y = getRandomNum(y_top, y_bottom);
            var width = getRandomNum(img_width_min, img_width_max);
            var str = "position:absolute;left:" + x + "px;top:" + y + "px;width:" + width + "px;";
            node_img.setAttribute("src", "img/你的名字1.jpg");
            node_img.setAttribute("style", str);
            node_img.setAttribute("onclick", "removeStar(this)");
            body_node.appendChild(node_img);
        }
    </script>

    <style type="text/css">
        form {
            padding-top: 10px;
        }
        
        td {
            padding: 3px;
        }
    </style>
</head>

<body onload="init()">
</body>

</html>