html+css+js:制作米游社原神wiki专栏的祈愿模块倒计时

效果图：

 html结构部分：

<div class="right-module-wrap">
                    <div class="icon-title">
                        <h3>
                            <img src="./img/限时祈愿-icon.png" alt="">
                            <span>限时祈愿</span>
                        </h3>
                    </div>
                    <!-- 右侧通用内容模板 限时祈愿 -->
                    <div class="right-content-module">
                        <ul class="pray-wrap">
                            <li>
                                <div class="pray-top clearfix">
                                    <div class="pray-top-title">
                                        <h2>「焰色天河」祈愿</h2>
                                        <p>限定五星角色「宵宫」即将限时UP！</p>
                                    </div>
                                    <div class="pray-top-voice-wrap clearfix">
                                        <img src="./img/宵宫voice.png" alt="">
                                        <div class="pray-top-audio-wrap">
                                            <div class="pray-top-audio">
                                                <!-- 插入audio暂未实现 -->
                                                <div class="pray-top-voice"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="pray-bottom">
                                    <a href="#"><img src="./img/宵宫证件照.png" alt=""></a>
                                    <a href="#"><img src="./img/班尼特证件照.png" alt=""></a>
                                    <a href="#"><img src="./img/辛焱证件照.png" alt=""></a>
                                    <a href="#"><img src="./img/云堇证件照.png" alt=""></a>
                                </div>
                            </li>
                            <li>
                                <div class="pray-top clearfix">
                                    <div class="pray-top-title">
                                        <h2>「叶落风随」祈愿</h2>
                                        <p class="timer">还有<span id="_d">00</span>天<span id="_h">00</span>小时<span id="_m">00</span>分钟<span id="_s">00</span>秒
                                        </p>
                                    </div>
                                    <div class="pray-top-voice-wrap clearfix">
                                        <img src="./img/叶天帝voice.png" alt="">
                                        <div class="pray-top-audio-wrap">
                                            <div class="pray-top-audio">
                                                <!-- 插入audio暂未实现 -->
                                                <div class="pray-top-voice"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="pray-bottom">
                                    <a href="#"><img src="./img/叶天帝证件照.png" alt=""></a>
                                    <a href="#"><img src="./img/小鹿证件照.png" alt=""></a>
                                    <a href="#"><img src="./img/凝光证件照.png" alt=""></a>
                                    <a href="#"><img src="./img/托马证件照.png" alt=""></a>
                                </div>
                            </li>
                            <li>
                                <div class="pray-top clearfix">
                                    <div class="pray-top-title">
                                        <h2>「闪焰的驻足」祈愿</h2>
                                        <p class="timer">还有<span id="_d2">00</span>天<span id="_h2">00</span>小时<span id="_m2">00</span>分钟<span id="_s2">00</span>秒
                                        </p>
                                    </div>
                                    <div class="pray-top-voice-wrap clearfix">
                                        <img src="./img/可莉voice.png" alt="">
                                        <div class="pray-top-audio-wrap">
                                            <div class="pray-top-audio">
                                                <!-- 插入audio暂未实现 -->
                                                <div class="pray-top-voice"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="pray-bottom">
                                    <a href="#"><img src="./img/可莉证件照.png" alt=""></a>
                                    <a href="#"><img src="./img/小鹿证件照.png" alt=""></a>
                                    <a href="#"><img src="./img/凝光证件照.png" alt=""></a>
                                    <a href="#"><img src="./img/托马证件照.png" alt=""></a>
                                </div>
                            </li>
                        </ul>
                    </div>

css部分：

.main-right > .right-module-wrap {
  background: white;
  padding: 20px;
  border-radius: 4px;
  margin-top: 20px;
}

.right-content-module {
  margin-right: -10px;
  overflow: hidden;
  margin-top: -10px;
}
/* 右侧限时祈愿 */
.pray-wrap {
  margin-bottom: -10px;
  margin-top: 10px;
}
.pray-wrap li {
  background: #f5f5f5;
  border-radius: 3px;
  margin-bottom: 12px;
  padding: 12px 13.5px;
  margin-right: 10px;
  cursor: pointer;
  position: relative;
  box-sizing: border-box;
}
.pray-top {
  display: flex;
  justify-content: space-between;
  font-size: 0;
}

.pray-top-title {
  width: 80%;
}
.pray-top-title h2 {
  font-size: 14px;
  color: #333;
  line-height: 14px;
  margin-bottom: 8px;
}
.pray-top-title p {
  font-size: 12px;
  color: #a6a6a6;
  line-height: 12px;
}
.pray-top-voice-wrap {
  position: relative;
  margin-top: 6px;
}
.pray-top-voice-wrap img {
  width: 40px;
  height: 40px;
  background-image: url(../img/祈愿人物背景图.png);
  background-size: 20px 20px;
  background-repeat: no-repeat;
  background-position: 9px 19px;
  position: absolute;
  left: -8px;
  top: -18px;
}
.pray-top-audio-wrap {
  background: #f0ece8;
  border-radius: 13px;
  border: 1px solid #e0dad3;
  display: flex;
  width: 48px;
  height: 22px;
  box-sizing: border-box;
  justify-content: flex-end;
}
.pray-top-audio-wrap:hover{
  background: #e0dad3;
}

.pray-top-audio {
  padding: 3px 6px;
}

.pray-top-voice{
  width: 16px;
  height: 16px;
  background: url(../img/audio播放器.png)  0 0  no-repeat;
  background-size: cover;
}
.pray-top-title .timer span{
 color: #967c68;
 font-weight: bold;
}



/* 底部证件照部分 */
.pray-bottom{
 margin: 12px -9px 0 0;
 font-size: 0;
 margin-left: 2.5px;
}
.pray-bottom a{
  display: inline-block;
}
.pray-bottom img{
 width: 60px;
 height: 60px;
 border-radius: 3px;
 margin-right: 8px;
}

js部分（主要就是倒计时部分）：

function countTime() {
  //获取当前时间
  var date = new Date();
  var now = date.getTime();
  //设置截⽌时间
  var str = "2022/8/2 18:00:00";
  var endDate = new Date(str);
  var end = endDate.getTime();
  //时间差
  var leftTime = end - now;
  //定义变量 d,h,m,s保存倒计时的时间
  var d, h, m, s;
  if (leftTime >= 0) {
    d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
    h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
    m = Math.floor((leftTime / 1000 / 60) % 60);
    s = Math.floor((leftTime / 1000) % 60);
  }
  //将倒计时赋值到div中
  document.getElementById("_d").innerHTML = d;
  document.getElementById("_h").innerHTML = h;
  document.getElementById("_m").innerHTML = m;
  document.getElementById("_s").innerHTML = s;
  //递归每秒调⽤countTime⽅法，显⽰动态时间效果
  setTimeout(countTime, 1000);
}

希望可以帮助大家！