星星闪烁案例

最新推荐文章于 2024-08-06 16:15:26 发布

m0_63634307

最新推荐文章于 2024-08-06 16:15:26 发布

阅读量268

点赞数 11

文章标签：原型模式

本文链接：https://blog.csdn.net/m0_63634307/article/details/140911121

版权

prototype（原型对象）

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。

Math.floor() 函数总是返回小于等于一个给定数字的最大整数

Math.random() 静态方法返回一个大于等于 0 且小于 1 的伪随机浮点数，并在该范围内近似均匀分布，然后你可以缩放到所需的范围。其实现将选择随机数生成算法的初始种子；它不能由用户选择或重置。

clientHeight：元素的像素高度,包含元素的高度+内边距,不包含水平滚动条,边框和外边距

offsetHeight：元素内容的高度,包括溢出的不可见内容

offsetLeft：返回元素左上角相对于offsetParent的左边界的偏移像素值

overflow:hidden 溢出隐藏

Document.createElement() 方法用于创建一个由标签名称 tagName 指定的 HTML 元素。如果用户代理无法识别 tagName，则会生成一个未知 HTML 元素 HTMLUnknownElement。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>

<body style="background:#000;">
    <div id="stars">
    </div>
    <script>
        //获取id为star_box的元素
        var stars = document.getElementById("stars")
        //创建一个对象
        var Obj = function () {}
        //增加原型对象的方法
        Obj.prototype.drawStar = function () {
            //创建星星标签 
            var ob = document.createElement("div")
            // 给星星标签加样式
            ob.style.width = "7px"
            ob.style.height = "7px"
            //设置相对定位
            ob.style.position = "relative"
            //div的left值不能超出屏幕的宽度
            ob.style.left = Math.floor(document.body.clientWidth * Math.random()) + 'px'; 
            //div的left值不能超出屏幕的高度
            ob.style.top = Math.floor(document.body.clientHeight * Math.random()) + 'px';
            //ob元素溢出隐藏
            ob.style.overflow = "hidden"
            // 把div加到stars
            stars.appendChild(ob)
            // 追加一个img标签
            var star = document.createElement("img")
            star.style.width = "49px"
            star.style.height = "7px"
            star.src = "../images/star.png"
            //将star元素设置成绝对定位
            star.style.position = "absolute"
            star.style.top = "0px"
            ob.appendChild(star)
            // 追加闪烁方法
            Play(star)
        }

        function Play(ele) {
            // 定义闪烁方法
            var i = Math.floor(Math.random() * 7)//为了使星星不同时闪烁，设置随机值
            var timer = setInterval(function () {//为了使星星不同时闪烁，设置随机值
                if (i < 7) {
                    console.log(-i * 7 + "px");
                    ele.style.left = -i * 7 + "px"
                    i++
                } else {
                    i = 0
                }
            }, 100)
        }
        // 使用循环创建30个不同对象
        for (var i = 0; i <= 30; i++) {
            var obj = new Obj()
            obj.drawStar()
        }
    </script>
</body>

</html>

m0_63634307

关注

11
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
星星闪烁案例

静态方法返回一个大于等于 0 且小于 1 的伪随机浮点数，并在该范围内近似均匀分布，然后你可以缩放到所需的范围。其实现将选择随机数生成算法的初始种子；所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。元素的像素高度,包含元素的高度+内边距,不包含水平滚动条,边框和外边距。返回元素左上角相对于offsetParent的左边界的偏移像素值。指定的 HTML 元素。如果用户代理无法识别。函数总是返回小于等于一个给定数字的最大整数。元素内容的高度,包括溢出的不可见内容。
复制链接

扫一扫