前言

网上有首页倒计时美化代码,用上之后发现过于简陋,而且对夜间模式貌似不怎么友好(背景颜色始终是白色),于是我进行了美化,增加了两侧有角色人物,使其不再单调,同时更改了文字渐变颜色以及背景颜色,背景颜色改为了始终为半透明黑色。
人物图形修改的话记得将<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>
    <font color=#97FFFF>计</font>
    <font color=#7FFFD4>时</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('2021/11/8 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://cs-ans.chaoxing.com/download/080711b7ce5ef88bca4d558daae2d23b);"></div>
    <div class="renwu" style="display:inline;float:left;width:107px;height:95px;background-image:url(https://cs-ans.chaoxing.com/download/3759662b75c8c3cae48718e697ab6558);"></div>
<!--     <img style="float:right;"src="https://cs-ans.chaoxing.com/download/080711b7ce5ef88bca4d558daae2d23b" >
    <img style="float:left;"src="https://cs-ans.chaoxing.com/download/3759662b75c8c3cae48718e697ab6558" > -->
</div>
Last modification:April 27th, 2021 at 07:57 pm
如果觉得我的文章对你有用,请随意赞赏