Javascript——看星星吗

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

原创最新推荐文章于 2025-02-18 17:52:54 发布 · 144 阅读

0 ·

CC 4.0 BY-SA版权

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

128 篇文章

订阅专栏

javascript

56 篇文章

订阅专栏

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

    <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>