首页 > 其他分享 >星星闪烁案例

星星闪烁案例

时间:2024-08-07 18:27:06浏览次数:12  
标签:星星 style star 元素 ob 案例 var 闪烁 Math

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>

标签:星星,style,star,元素,ob,案例,var,闪烁,Math
From: https://blog.csdn.net/m0_63634307/article/details/140911121

相关文章

  • Vision Pro 3D 目标跟踪实战案例:厨房场景应用
    随着苹果公司在增强现实(AR)领域的持续投入和发展,visionOS和ARKit技术已经成为构建沉浸式交互体验的关键工具。visionOS2版本更是为开发者提供了更强大的功能集,使他们能够创造出更加复杂且引人入胜的应用程序。本文将介绍如何利用visionOS2和ARKit技术,在厨房场景中实现......
  • 黑马AJAX图书管理案例
    黑马AJAX图书管理案例注意bootstrap的css与js这里是本地导入,需要自行导入一下这里是bootstrap下载链接然后直接复制到vscode打开就行代码如下总体<!DOCTYPEhtml><htmllang="cmn-hans"><head><metacharset="UTF-8"><metaname="viewport"content......
  • 简易秀投票解决方案功能展示与案例分析
    简易秀投票小程序作为一款功能丰富、操作简便的投票工具,其功能案例分析可以从以下几个方面进行:一、功能概述简易秀投票小程序支持多种投票类型和丰富的设置选项,主要包括:1.多样化的投票类型:支持视频投票、音频投票、图文投票、文字投票等多种类型,满足不同场景下的投票需求。2.......
  • 周易智慧小程序:功能特色与用户体验案例分析
    一、引言随着人们对传统文化的兴趣日益增长,结合现代科技手段的周易智慧小程序应运而生。这类小程序不仅传承了《周易》的古老智慧,还通过创新的功能设计和用户体验优化,让更多人能够轻松接触并理解周易文化。二、功能特色分析智能化占卜系统:1.采用先进的人工智能算法,根据用户输......
  • 周易测算小程序功能案例分析
    周易测算小程序功能案例分析可以从多个维度进行,以下是一个基于现有信息整理的功能案例分析:一、功能概述周易测算小程序主要通过运用《周易》的原理和算法,为用户提供占卜、预测、分析等服务。其功能通常包括卦象查询、占卜预测、历史查询、用户互动等,旨在帮助用户了解未来趋势、......
  • MYSQL死锁分析案例二(高并发增删改同一条记录)
    1、建表CREATETABLE`t1`(`id`intNOTNULL,`name`varchar(200)DEFAULTNULL,`age`intDEFAULTNULL,PRIMARYKEY(`id`),KEY`idx111`(`name`),KEY`idx_age`(`age`))ENGINE=InnoDBDEFAULTCHARSET=utf8mb4COLLATE=utf8mb4_0900_ai_ci2、数据......
  • jQuery入门(四)案例
    jQuery操作入门案例一、复选框案例功能:列表的全选,反选,全不选功能实现。实现步骤和分析:-全选1.为全选按钮绑定单击事件。2.获取所有的商品项复选框元素,为其添加checked属性,属性值为true。-全不选1.为全不选按钮绑定单击......
  • 可视化案例(1)
    一、json数据格式1.定义轻量级数据交互格式特定字符串属于各种语言的中转站2.功能数据传递数据交互3.格式类似于字典和列表4.数据转换Python和Json二、pyecharts模块百度构建的开源可视化1.安装pipinstallpyecharts2.入门操作基础折线3.全局配置set_globa......
  • Profinet转Modbus网关运用在DCS系统中与变频器的通讯案例
    一、案例背景随着工业自动化程度的不断提高,DCS系统被广泛应用于各种工业场景,而变频器作为调节电机转速的关键设备,其运行状态和数据需要被DCS系统实时监控和管理。然而,由于DCS系统往往采用Profinet等高级工业通讯协议,而部分变频器可能仅支持Modbus等较为传统的通讯协议,因此,需要借......
  • 面向对象程序设计——第3章 案例
    案例一水仙花数案例要求【案例目标】用户通过键盘输入一个整数值,判断该数值是否为“水仙花数”。【相关解释】“水仙花数”是指一个3位数,其各位数的三次方和等于该数本身。例如:水仙花例如:153是一个“水仙花数”,因为【案例效果】本案例程序运行的结果如图【具体要......