正文

如何用JavaScript在网页中打印居中的星星效果

/0 浏览量
0706

在网页中使用JavaScript来创建居中的星星效果，可以让你的网页看起来更加生动有趣。以下是一种简单的方法，使用JavaScript和HTML结合CSS样式，来实现居中显示的星星效果。

准备工作

首先，你需要一个HTML文件，其中包含一个用于显示星星的容器元素。以下是HTML的基本结构：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>居中星星效果</title>
<style>
  body, html {
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #333;
  }
  .stars-container {
    font-size: 50px;
    color: white;
  }
</style>
</head>
<body>
<div class="stars-container" id="starsContainer"></div>
<script>
  // JavaScript代码将放在这里
</script>
</body>
</html>

JavaScript实现

在<script>标签中，我们将编写JavaScript代码来动态生成星星，并使其居中显示。

document.addEventListener('DOMContentLoaded', function() {
  const container = document.getElementById('starsContainer');
  const numberOfStars = 20; // 你可以调整星星的数量
  const maxStarsSize = 20; // 星星的最大尺寸

  for (let i = 0; i < numberOfStars; i++) {
    const star = document.createElement('div');
    star.textContent = '★';
    star.style.position = 'absolute';
    star.style.left = Math.random() * 100 + '%';
    star.style.top = Math.random() * 100 + '%';
    star.style.fontSize = Math.random() * maxStarsSize + 'px';
    star.style.color = `hsl(${Math.random() * 360}, 100%, 50%)`; // 生成随机颜色
    container.appendChild(star);
  }
});

代码解释

  1. document.addEventListener('DOMContentLoaded', function() {...}): 确保DOM完全加载后再执行内部的JavaScript代码。
  2. const container = document.getElementById('starsContainer'): 获取包含星星的容器元素。
  3. const numberOfStars = 20 和 const maxStarsSize = 20: 定义星星的数量和最大尺寸。
  4. 使用一个for循环创建星星元素，并设置其文本内容为'★'。
  5. 使用star.style.position = 'absolute'将星星设置为绝对定位，这样它们就可以自由地在容器内移动。
  6. star.style.left 和 star.style.top 设置星星的随机位置，使它们在容器内随机分布。
  7. star.style.fontSize 设置星星的随机大小。
  8. star.style.color 使用HSL颜色模式生成随机颜色，让星星的颜色更加丰富多彩。

这样，当你打开HTML文件时，你将看到一个由随机颜色和大小组成的星星，它们在网页中居中分布。你可以根据需要调整星星的数量和大小，以及颜色生成策略。

-- 展开阅读全文 --