回顾2023 展望2024

Mika-1001

已于 2024-02-29 14:53:44 修改

阅读量373

点赞数 9

文章标签： html javascript css

于 2024-01-01 00:31:46 首次发布

本文链接：https://blog.csdn.net/2301_76479167/article/details/135321161

版权

一、本程序大致效果就是：

有一个到2024年1月1日的倒计时，在未到时间的时候，会有一个背景音乐和图片，当时间到了以后，会有一个另外一个背景音乐和图片。

并且本程序为HTML，以下为代码：

HTML :

<!DOCTYPE html>  
<html>  
<head>  
    <link rel="stylesheet" type="text/css" href="styles.css">  
</head>  
<body>  
    <div id="countdown" class="countdown"></div>  
    <audio id="bgAudio" loop>  
        <source src="https://m801.music.126.net/20240101002055/c6c589c27c9a679dbcd1e4ffe5cd908a/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/31096205264/9d5e/f1d8/9e34/d140f83e3b86fe6f566857b383979703.m4a" type="audio/mpeg">  
        Your browser does not support the audio element.  
    </audio>  
    <img id="bgImage" src="https://img-blog.csdnimg.cn/direct/bc1ee1c72b6741938af3ae8cbd260a2d.jpeg" alt="Background Image">  
    <script src="script.js"></script>  
</body>  
</html>

JavaScript(注意将其命名为script) :

// 获取当前日期和时间  
var countDownDate = new Date("Jan 1, 2024 00:00:00").getTime();  
var x = setInterval(function() {  
    // 获取当前日期和时间  
    var now = new Date().getTime();  
    // 计算时间差  
    var distance = countDownDate - now;  
    // 计算天、小时、分钟和秒数  
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));  
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));  
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));  
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);  
    // 更新倒计时显示  
    document.getElementById("countdown").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s ";  
    // 如果时间到达，切换背景图片和背景音乐文件  
    if (distance < 0) {  
        document.getElementById("bgImage").src = "https://img-blog.csdnimg.cn/direct/1813262168e1446f8d594fa1eec877dd.jpeg";  // 新背景图片路径  
        document.getElementById("bgAudio").src = "https://m801.music.126.net/20240101003502/51f179b42e75b2360d91b5bc99eec1f0/jdyyaac/obj/w5rDlsOJwrLDjj7CmsOj/17167684040/30df/a7f8/ca39/8f5da4d53dc22c73a951efb12a0d5d0f.m4a";  // 新背景音乐文件路径  
        clearInterval(x);  // 停止计时器，避免重复切换背景图片和背景音乐文件  
    }  
}, 1000);  // 每秒更新一次倒计时显示

CSS(注意将其命名为styles) :

body {  
  background-color: #f0f0f0;  
  margin: 0;  
  padding: 0;  
}  

.countdown {  
  font-family: 'SimHei', sans-serif;  /* 二号仿宋 */  
  font-size: 50px;  
  position: fixed;  
  bottom: 20px;  
  right: 20px;  
  color: white;  
}

以上就是本程序的所有代码,两，两个歌曲和两个背景可根据个人需求替换。

我在这里觉得遗憾的地方就是没有，在2024年之前发布,555。

谢谢大家。