前言

网上有首页倒计时美化代码，用上之后发现过于简洁陋，而且对夜间模式貌似不怎么友好（背景颜色始终是白色），于是我进行了美化，增加了两侧有角色人物，使其不再单调，同时更改了文字渐变颜色以及背景颜色，背景颜色改为了始终为半透明黑色。
人物图形修改的话记得将<div>中的高度和宽度更改为与图片尺寸一样的大小。

效果图

代码

将以下代码添加至后台-开发者设置-首页列表最前方广告位

<style>
.gn_box{     border: none;     border-radius: 15px;overflow:hidden; } 
.gn_box { background-color: rgba(0,0,0,0.35);    padding: 10px 14px;     margin: 10px;     margin-bottom: 20px;     text-align: center;      } 
#t_d{     color: #FFCCCC;     font-size: 18px; } 
#t_h{     color: #FFFF99;     font-size: 18px; } 
#t_m{     color: #CCCCFF;     font-size: 18px; } 
#t_s{     color: #CCFF99;     font-size: 18px; }
.renwu{
    margin-top:-30px;
}
</style> 
<div class="gn_box">     
<h1>
    <font color=#BBFFFF>冲</font>
    <font color=#00E5EE>刺</font>
    <font color=#98F5FF>倒</font>
    <font color=#00F5FF>计</font>
    <font color=#00FFFF>时</font>
    </h1>
<center>
<div id="CountMsg" class="HotDate"><span id="t_d"> 天</span><span id="t_h"> 时</span><span id="t_m"> 分</span><span id="t_s"> 秒</span></div></center>
<script type="text/javascript"> 
function getRTime() {   
    var EndTime = new Date('2023/6/1 00:00:00');  
    var NowTime = new Date();  
    var t = EndTime.getTime() - NowTime.getTime();         
    var d = Math.floor(t / 1000 / 60 / 60 / 24);         
    var h = Math.floor(t / 1000 / 60 / 60 % 24);         
    var m = Math.floor(t / 1000 / 60 % 60);         
    var s = Math.floor(t / 1000 % 60); 
    var day = document.getElementById("t_d");
    if (day != null) {
        day.innerHTML = d + " 天 ";   
    }
    var hour = document.getElementById("t_h");
    if (hour != null) {
        hour.innerHTML = h + " 时 ";  
    }
    var min = document.getElementById("t_m");
    if (min != null) {
        min.innerHTML = m + " 分 ";   
    }
    var sec = document.getElementById("t_s");
    if (sec != null) {
        sec.innerHTML = s + " 秒";
    }
}     
setInterval(getRTime, 1000);     
</script>
    <div class="renwu" style="display:inline;float:right;width:74px;height:95px;background-image:url(https://pan-yz.chaoxing.com/thumbnail/0,0,100/080711b7ce5ef88bca4d558daae2d23b);"></div>
    <div class="renwu" style="display:inline;float:left;width:107px;height:95px;background-image:url(https://pan-yz.chaoxing.com/thumbnail/0,0,100/3759662b75c8c3cae48718e697ab6558);"></div>
</div>