满天星

最新推荐文章于 2024-07-22 06:45:45 发布

原创最新推荐文章于 2024-07-22 06:45:45 发布 · 288 阅读

1 ·

CC 4.0 BY-SA版权

网页小功能专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用HTML、CSS和JavaScript创建的动态网页，背景为黑色，通过定时器控制黄色星星在屏幕上随机位置闪烁，达到类似夜空的效果。网页中包含一个按钮，点击后开始星星的闪烁效果，并移除该按钮。

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>title</title>
  <style>
    body{
      background-color: black;
      position: relative;
      overflow: hidden;
    }
    span{
      font-size: 30px;
      color: yellow;
      position: absolute;
    }
  </style>
</head>
<body id="dv">
<input type="button" value="亮起来" id="btn"/>
<script src="common.js"></script>
<script>
  my$("btn").onclick=function () {
    setInterval(function () {
      if(my$("dv").children.length<10){
      for(var i=0;i<10;i++){
        var obj=document.createElement("span");
        my$("dv").appendChild(obj);
        obj.innerText="★";
        obj.setAttribute("id","index"+i);
      }
    }
      var xArr=[],yArr=[];
      for(var i=0;i<10;i++){
        var x = parseInt(Math.random() * window.screen.height + 1);
        var y = parseInt(Math.random() * window.screen.width + 1);
        my$("index"+i).style.top=x+"px";
        my$("index"+i).style.left=y+"px";
      }

    },100);
    document.getElementById("dv").removeChild(my$("btn"));
  };
</script>

</body>
</html>

效果图：
在这里插入图片描述