Javascript——看星星吗

最新推荐文章于 2025-02-18 17:52:54 发布

mintsolace

最新推荐文章于 2025-02-18 17:52:54 发布

阅读量128

点赞数

CC 4.0 BY-SA版权

分类专栏：学习笔记 javascript

本文链接：https://blog.youkuaiyun.com/mintsolace/article/details/95896895

学习笔记同时被 2 个专栏收录

128 篇文章

订阅专栏

javascript

56 篇文章

订阅专栏

本文详细探讨了JavaScript在实现动态星空效果的技术细节，包括DOM操作、CSS动画和JavaScript事件处理。通过实例解析，揭示如何利用JavaScript创建交互式的星空展示，并介绍了优化性能的策略，帮助开发者提升动态效果的用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    <style>
        div{
            width: 600px;
            height: 600px;
            border: 2px solid yellow;
            background-color: black;
            position: relative;
        }
        span{
            font-size: 30px;
            color: yellow;
            position: absolute;
        }
    </style>
.....
<input type="button" value="星空" id="btn"/>
<div id="dv"></div>
<script src="common.js"></script>
<script>
    my$("btn").onclick=function(){
        setInterval(function(){
            my$("dv").innerHTML="<span>☆☆☆</span>";
            var x=parseInt(Math.random()*600+1);
            var y=parseInt(Math.random()*600+1);
            my$("dv").firstElementChild.style.left=x+"px";
            my$("dv").firstElementChild.style.top=y+"px";
        },100);
    };
</script>