Cuteen主题侧栏添加在线时间 侧栏添加在线时间直接复制代码到/usr/themes/Cuteen/base/sidebar.php文件下-最新回复的上方 <div class="sidebar-box sidebar-box-1"> <div class="p-3">在线时间</div> <h5 class="widget-title m-t-none text-md"> <canvas id="canvas" style="width:100%;" width="820" height="250"></canvas> <script src="https://cdn.jsdelivr.net/gh/xbwlcm/Public/js/clock.js"></script> </h5> </div>效果

Cuteen主题添加新冠疫情监控界面 使用教程在后台新建独立页面，添加自定义html内容，填入如下代码即可。<iframe src="https://www.lovestu.com/api/project/cnmapyinqing/obj.php" height="500" frameborder="no" border="0" width="100%"> </iframe> 效果图

Cuteen主题侧栏添加人生倒计时 侧栏添加人生倒计时1.先找到路径 /usr/themes/Cuteen/base/sidebar.php文件下-最新回复的上方 <div class="sidebar-box classListBox"> <div class="aside aside-count"> <div class="p-3">人生倒计时</div> <div class="content"> <div class="item" id="dayProgress"> <div class="title">今日已经过去<span>21</span>小时</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-1" style="width: 88%;"></div> </div> <div class="progress-percentage">88%</div> </div> </div> <div class="item" id="weekProgress"> <div class="title">这周已经过去<span>2</span>天</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-2" style="width: 28%;"></div> </div> <div class="progress-percentage">28%</div> </div> </div> <div class="item" id="monthProgress"> <div class="title">本月已经过去<span>22</span>天</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-3" style="width: 70%;"></div> </div> <div class="progress-percentage">70%</div> </div> </div> <div class="item" id="yearProgress"> <div class="title">今年已经过去<span>12</span>个月</div> <div class="progress"> <div class="progress-bar"> <div class="progress-inner progress-inner-4" style="width: 100%;"></div> </div> <div class="progress-percentage">100%</div> </div> </div> </div> </div> </div>2.添加完成后,在主题后台自定义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) }3.添加完成后,在到/usr/themes/Cuteen/static/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()4.最后到/usr/themes/Cuteen/base/head.php里面引入此js.(放在</head>上面即可）<script async="" src="https://qrj.hk/usr/themes/Cuteen/static/js/timeinfo.js"></script>效果[button color="danger" url="https://www.txmmp.cn/index.php/archives/28/" outline="" target="_self"]原文美化链接[/button]