❤️创意网页：高考加油倒计时网页文字加多版 - 增加祝福语句和下雪背景效果

命运之光

发布于 2024-03-20 12:49:53

650

发布于 2024-03-20 12:49:53

文章被收录于专栏：我在本科期间写的文章我在本科期间写的文章

简介

欢迎来到本篇技术博客！今天，我们将一起学习如何使用HTML、CSS和JavaScript来创造一个有趣的高考加油倒计时网页。我们将增加祝福语句和下雪背景效果，为高考考生送上美好的祝福。让我们开始吧！

动态图展示

静态图展示

图片1

图片2

HTML 结构

我们的网页将由以下几个元素组成：

距离高考还剩的倒计时时钟
祝福语句
输入框和计算按钮，用于设置想考入的院校和显示考入几率
下雪背景效果

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>高考加油倒计时网页文字加多版</title>
  <!-- CSS 样式在这里添加 -->
</head>
<body>
  <!-- 距离高考还剩 -->
  <div id="countdown-label">距离高考还剩</div>
  
  <!-- 倒计时时钟 -->
  <div id="countdown"></div>
  
  <!-- 祝福语句 -->
  <div id="message">
    Best wishes!
  </div>
  
  <!-- 输入框和计算按钮 -->
  <div id="input-box">
    <input type="text" id="college-input" placeholder="请输入想考入的院校">
    <button id="calculate-btn">计算</button>
  </div>

  <!-- 下雪背景效果 -->
  <div id="snow-container"></div>
  
  <!-- JavaScript 代码在这里添加 -->
</body>
</html>

CSS 样式

为了实现全屏背景渐变效果和祝福语句动画效果，我们需要添加以下 CSS 样式：

/* 全屏背景渐变效果 */
body {
  /* ... 其他样式 ... */
}

/* 祝福语句动画效果 */
#message {
  /* ... 其他样式 ... */
}

JavaScript 代码

我们需要使用 JavaScript 来实现倒计时时钟、输入框和计算按钮的交互，以及下雪背景效果。以下是完整的 JavaScript 代码：

// 更新倒计时时钟
function updateCountdown() {
  // ... 倒计时逻辑 ...
}

// 每秒钟更新倒计时时钟
setInterval(updateCountdown, 1000);

// 设置考中几率为100%
document.getElementById("calculate-btn").addEventListener("click", function() {
  // ... 计算几率的逻辑 ...
});

// 下雪背景效果
function createSnowflake() {
  // ... 创建雪花 ...
}

function getRandomColor() {
  // ... 随机生成颜色 ...
}

function snowfall() {
  // ... 雪花下落效果 ...
}

snowfall();

JavaScript 逻辑解释

updateCountdown 函数用于更新倒计时时钟。我们通过计算当前时间与目标时间（2023年6月7日9点）之间的差值，来实现倒计时效果，并将结果展示在网页上。
setInterval(updateCountdown, 1000) 将会每秒钟调用 updateCountdown 函数，从而实现倒计时时钟的实时更新。
当用户点击计算按钮时，我们将读取输入框中的院校名称，并在页面上显示考入该院校的几率为100%的祝福语句。
createSnowflake 函数用于创建一个雪花元素。我们设置随机位置、大小、颜色和动画效果，从而实现下雪背景效果。
getRandomColor 函数用于随机生成颜色代码，用于设置雪花的背景色。
snowfall 函数用于控制雪花下落的效果。我们通过创建多个雪花元素，并设置动画效果实现下雪背景效果。

运行效果

保存上述代码为一个 HTML 文件，并在浏览器中打开它。您将会看到一个漂亮的网页，有倒计时时钟和下雪背景效果，并可以通过输入框和计算按钮查看祝福语句。祝愿高考考生们取得优异的成绩，实现自己的梦想！

完整代码

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>高考加油倒计时网页文字加多版</title>
  <style>
    /* 全屏背景渐变效果 */
    body {
      background: linear-gradient(to bottom, #000000, #333333);
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: white;
      font-family: Arial, sans-serif;
      overflow: hidden;
    }
    
    /* 倒计时时钟样式 */
    #countdown-label {
      font-size: 24px;
    }
    
    #countdown {
      font-size: 48px;
    }
    
    /* 祝福语句动画效果 */
    #message {
      opacity: 0;
      animation: fade-in 2s forwards;
    }
    
    @keyframes fade-in {
      0% {
        opacity: 0;
      }
      100% {
        opacity: 1;
      }
    }
    
    /* 输入框和按钮样式 */
    #input-box {
      margin-top: 20px;
    }
    
    #calculate-btn {
      margin-top: 10px;
      padding: 5px 10px;
    }

    /* 下雪背景效果 */
    #snow-container {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: -1;
    }

    .snowflake {
      position: absolute;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      opacity: 0.8;
      pointer-events: none;
      animation: snowfall linear infinite;
    }

    @keyframes snowfall {
      0% {
        transform: translateY(-100%);
      }
      100% {
        transform: translateY(100vh);
      }
    }
  </style>
</head>
<body>
  <!-- 距离高考还剩 -->
  <div id="countdown-label">距离高考还剩</div>
  
  <!-- 倒计时时钟 -->
  <div id="countdown"></div>
  
  <!-- 祝福语句 -->
  <div id="message">
    Best wishes!
  </div>
  
  <!-- 输入框和计算按钮 -->
  <div id="input-box">
    <input type="text" id="college-input" placeholder="请输入想考入的院校">
    <button id="calculate-btn">计算</button>
  </div>

  <!-- 下雪背景效果 -->
  <div id="snow-container"></div>
  
  <script>
    // 更新倒计时时钟
    function updateCountdown() {
      var now = new Date();
      var targetDate = new Date("2024-6-7 9:00");
      var timeDiff = targetDate.getTime() - now.getTime();
      
      var days = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
      var hours = Math.floor((timeDiff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var minutes = Math.floor((timeDiff % (1000 * 60 * 60)) / (1000 * 60));
      var seconds = Math.floor((timeDiff % (1000 * 60)) / 1000);
      
      var countdownLabelElement = document.getElementById("countdown-label");
      countdownLabelElement.textContent = "距离高考还剩";
      
      var countdownElement = document.getElementById("countdown");
      countdownElement.textContent = days + "天 " + hours + "小时 " + minutes + "分钟 " + seconds + "秒";
    }
    
    // 每秒钟更新倒计时时钟
    setInterval(updateCountdown, 1000);
    
    // 设置考中几率为100%
    document.getElementById("calculate-btn").addEventListener("click", function() {
      var collegeInput = document.getElementById("college-input").value;
      var resultElement = document.createElement("div");
      resultElement.textContent = "您考入 " + collegeInput + " 的几率为 100%！";
      resultElement.style.color = 'red';
      document.body.appendChild(resultElement);
    });

    // 下雪背景效果
    function createSnowflake() {
      const snowflake = document.createElement('div');
      snowflake.classList.add('snowflake');
      snowflake.style.left = Math.random() * window.innerWidth + 'px';
      snowflake.style.animationDuration = Math.random() * 3 + 2 + 's';
      snowflake.style.opacity = Math.random();
      snowflake.style.fontSize = Math.random() * 10 + 10 + 'px';

      const randomColor = getRandomColor();
      snowflake.style.backgroundColor = randomColor;

      const slogans = ["你的名字那么好听一定要出现在录取通知书上", "人生没有白走的路，每一步都算数", "愿你在合上笔盖的那一刻，有着战士收刀入鞘的骄傲", "高考加油 成功上岸", "我们的青春都会在盛夏绽放", "当我在追光，我与光同行", "当下的坚持会胜过日后的千千万万倍，一定会迎来最终的胜利！", "高考那天所有人会为你的前途让路", "六月好事正酿，愿大家都如愿以偿"]; // Add your slogans here
      snowflake.innerHTML = slogans[Math.floor(Math.random() * slogans.length)];

      return snowflake;
    }

    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    function snowfall() {
      const snowContainer = document.getElementById('snow-container');
      const numSnowflakes = 50; // Adjust the number of snowflakes here

      for (let i = 0; i < numSnowflakes; i++) {
        const snowflake = createSnowflake();
        snowContainer.appendChild(snowflake);
      }
    }

    snowfall();
  </script>
</body>
</html>