OneNav主题-为主题添加人生倒计时

教程开始：

第一步-先要放在什么位置，我的放在独立页面，加入以下代码：

<!-- 时间倒计时代码 --> <div class="sidebar-box classListBox"> <div class="aside aside-count"> <div class="p-3"><span style="font-size: 1.2em; color: orange;"><i class="fas fa-hourglass-half"></i></span> 人生倒计时</div> <div class="content"> <div class="item" id="dayProgress"> <div class="title">今日已经过去<span></span>小时</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-1"></div> </div> <div class="progress-percentage"></div> </div> </div> <div class="item" id="weekProgress"> <div class="title">这周已经过去<span></span>天</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-2"></div> </div> <div class="progress-percentage"></div> </div> </div> <div class="item" id="monthProgress"> <div class="title">本月已经过去<span></span>天</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-3"></div> </div> <div class="progress-percentage"></div> </div> </div> <div class="item" id="yearProgress"> <div class="title">今年已经过去<span></span>个月</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-4"></div> </div> <div class="progress-percentage"></div> </div> </div> </div> </div> </div> <!-- 时间倒计时代码 -->

第二步-添加完成后,在主题后台自定义css里添加如下代码，一般都是在主题设置-自定义设置-自定义CSS样式丢进去就行了

/* 人生倒计时css */ .aside-count .content { padding: 15px } .aside-count .content .item { margin-bottom: 15px } .aside-count .content .item:last-child { margin-bottom: 0 } .aside-count .content .item .title { font-size: 12px; color: var(--minor); margin-bottom: 5px; display: flex; align-items: center } .aside-count .content .item .title span { color: var(--theme); font-weight: 500; font-size: 14px; margin: 0 5px } .aside-count .content .item .progress { display: flex; align-items: center } .aside-count .content .item .progress .progress-bar { height: 10px; border-radius: 5px; overflow: hidden; background: var(--classC); width: 0; min-width: 0; flex: 1; margin-right: 5px } @keyframes progress { 0% { background-position: 0 0 } 100% { background-position: 30px 0 } } .aside-count .content .item .progress .progress-bar .progress-inner { width: 0; height: 100%; border-radius: 5px; transition: width 0.35s; -webkit-animation: progress 750ms linear infinite; animation: progress 750ms linear infinite } .aside-count .content .item .progress .progress-bar .progress-inner-1 { background: #bde6ff; background-image: linear-gradient(135deg, #50bfff 25%, transparent 25%, transparent 50%, #50bfff 50%, #50bfff 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .aside-count .content .item .progress .progress-bar .progress-inner-2 { background: #ffd980; background-image: linear-gradient(135deg, #f7ba2a 25%, transparent 25%, transparent 50%, #f7ba2a 50%, #f7ba2a 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .aside-count .content .item .progress .progress-bar .progress-inner-3 { background: #ffa9a9; background-image: linear-gradient(135deg, #ff4949 25%, transparent 25%, transparent 50%, #ff4949 50%, #ff4949 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .aside-count .content .item .progress .progress-bar .progress-inner-4 { background: #67c23a; background-image: linear-gradient(135deg, #4f9e28 25%, transparent 25%, transparent 50%, #4f9e28 50%, #4f9e28 75%, transparent 75%, transparent 100%); background-size: 30px 30px } .aside-count .content .item .progress .progress-percentage { color: var(--info) } /*人生倒计时css*/

第三步-添加完成后,在到主题文件/js/里面创建名为timeinfo.js后把下面代码复制进去保存.

function init_life_time() { function getAsideLifeTime() { /* 当前时间戳 */ let nowDate = +new Date(); /* 今天开始时间戳 */ let todayStartDate = new Date(new Date().toLocaleDateString()).getTime(); /* 今天已经过去的时间 */ let todayPassHours = (nowDate - todayStartDate) / 1000 / 60 / 60; /* 今天已经过去的时间比 */ let todayPassHoursPercent = (todayPassHours / 24) * 100; $('#dayProgress .title span').html(parseInt(todayPassHours)); $('#dayProgress .progress .progress-inner').css('width', parseInt(todayPassHoursPercent) + '%'); $('#dayProgress .progress .progress-percentage').html(parseInt(todayPassHoursPercent) + '%'); /* 当前周几 */ let weeks = { 0: 7, 1: 1, 2: 2, 3: 3, 4: 4, 5: 5, 6: 6 }; let weekDay = weeks[new Date().getDay()]; let weekDayPassPercent = (weekDay / 7) * 100; $('#weekProgress .title span').html(weekDay); $('#weekProgress .progress .progress-inner').css('width', parseInt(weekDayPassPercent) + '%'); $('#weekProgress .progress .progress-percentage').html(parseInt(weekDayPassPercent) + '%'); let year = new Date().getFullYear(); let date = new Date().getDate(); let month = new Date().getMonth() + 1; let monthAll = new Date(year, month, 0).getDate(); let monthPassPercent = (date / monthAll) * 100; $('#monthProgress .title span').html(date); $('#monthProgress .progress .progress-inner').css('width', parseInt(monthPassPercent) + '%'); $('#monthProgress .progress .progress-percentage').html(parseInt(monthPassPercent) + '%'); let yearPass = (month / 12) * 100; $('#yearProgress .title span').html(month); $('#yearProgress .progress .progress-inner').css('width', parseInt(yearPass) + '%'); $('#yearProgress .progress .progress-percentage').html(parseInt(yearPass) + '%'); } getAsideLifeTime(); setInterval(() => { getAsideLifeTime(); }, 1000); } init_life_time()

第四步-最后到页脚里面引入此js.(放在上面即可）

<!-- 倒计时引用的JS --> <script src="<?php $this->options->themeUrl('assets/js/timeinfo.js'); ?>"></script> <!-- 倒计时引用的JS -->

以上就是完整的代码，复制过去记得不要放错的位置，注意排查细节如果出现了进度条无法显示等问题，根本原因在于你没有引入第三方库需要加载jquery，