前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >为handsome博客添加侧边栏倒计时

为handsome博客添加侧边栏倒计时

作者头像
小屁的博客
发布2022-05-13 19:58:52
2560
发布2022-05-13 19:58:52
举报
文章被收录于专栏:小屁折腾日记

侧边栏显示倒计时

代码/usr/themes/handsome/component/sitebar.php 大约第26行位置添加

代码语言:javascript
复制
<style>  .gn_box{     border: none;     border-radius: 10px; }  .gn_box {     padding: 8px 10px;     margin: 8px;     margin-bottom: 15px;     text-align: center;     background-color: ; }  #t_d{     color: grey;     font-size: 18px; }  #t_h{     color: grey;     font-size: 18px; }  #t_m{     color: grey;     font-size: 18px; }  #t_s{     color: grey;     font-size: 18px; }  </style>  <div class="gn_box">      <h3>距2023年高考还有</h3><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/06/7 00:09: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></img>

在主题设置-开发者设置-自定义输出body 尾部的HTML代码 下载js文件: https://cos.xpblog.cn/cos-for-xpbloger/handsome8.3.0Pro/assets/js/timeinfo.js

代码语言:javascript
复制
<!-- 倒计时引用的JS -->    
<script src="js的地址"></script>
    <!-- 倒计时引用的JS -->
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2022 年 01 月,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 侧边栏显示倒计时
相关产品与服务
对象存储
对象存储(Cloud Object Storage,COS)是由腾讯云推出的无目录层次结构、无数据格式限制,可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限,无需分区管理,适用于 CDN 数据分发、数据万象处理或大数据计算与分析的数据湖等多种场景。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档