专栏首页J的故事Cuteen主题侧栏添加人生倒计时

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]

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Cuteen主题侧栏添加在线时间

    直接复制代码到/usr/themes/Cuteen/base/sidebar.php文件下-最新回复的上方

    RJ1027
  • WenYu特效管理插件

    <div class="tab-container post_tab box-shadow-wrap-lg">

    闻语博客
  • 基于服务器的个人博客网站搭建

    服务器与本地xshell连接,就像连接Linux系统一样,只是ip写成服务器的公网ip。

    CoreDao
  • Core + Vue 后台管理基础框架4——前端授权

      上篇,我们讲了后端的授权。与后端不同,前端主要是通过功能入口如菜单、按钮的显隐来控制授权的。具体来讲,就是根据指定用户的制定权限来加载对应侧边栏菜单和页面内...

    guokun
  • NPM插件的开发

    本文讨论的npm插件化,针对的是那种可以放在单独的页面魔改,或者代码可以剥离出来,通过某个特定的页面容器进行挂载的植入式魔改方案。

    Akilar
  • 情人节福利,手把手教你学会mysql语句操作

    这是我的第八篇原创文章 上篇文章简单说了下数据库,并教了怎样安装mysql工具和可视化工具,不知道你现在安装好了没?那今天我们继续说mysql,今天说下mysq...

    sergiojune
  • 灵活运用CSS开发技巧

    何为技巧,意指表现在文学、工艺、体育等方面的巧妙技能。代码作为一门现代高级工艺,推动着人类科学技术的发展,同时犹如文字一样承托着人类文化的进步。

    Nealyang
  • vue博客实战---逻辑优化及详情界面开发

    经过前三篇文章的介绍,其实博客基本功能已经实现。目前还缺少一个博客详情界面。本篇的主要目的修复前两篇留下的一些bug以及开发文章详情界面。

    创译科技
  • PubMed使用者指南(一)

    学习一个工具最直接有效的方式就是阅读它的官方指南,今年我们来学习一下PubMed的最新指南。

    生信菜鸟团
  • 小结CSS的float属性

    应用了float属性的元素,就像在印刷布局中,形成文字环绕图片的效果。除此之外,浮动还可以用于创建网页布局

    前端林子
  • 小结CSS的float属性

    应用了float属性的元素,就像在印刷布局中,形成文字环绕图片的效果。除此之外,浮动还可以用于创建网页布局

    腾讯云TStack
  • 你真的了解博客园的目录么。。

    非常感谢这位盆友能发现这个问题,奖励鸡腿,这是那篇博文:要嫁就嫁程序员,因为。。。

    Dawnzhang
  • 为未来的SaaS应用提供新的交互及视觉设计

    云端软件即服务已代替传统笨重的桌面软件,打造优异的用户使用界面让你的应用脱颖而出已是势在必行之事,然而这也意味着诸多的挑战。 本文介绍给大家一些基本需要关注的点...

    前朝楚水
  • Hexo+Next7.X 博客美化教程合集

    这两天刚认识Hexo博客系统,人就像着了魔一样,跟当年倒腾WordPress博客一样,每天想着怎么能让自己的博客更好看、更实用、更有人气。

    Heson
  • hexo从零开始到搭建完整

    其实平时自己写的文章并不多,偶尔看到一些东西会做点笔记,但是每次写的东西都会到处放,不好找,所以才想着自己搭建一个人博客网站,现在大家用hexo比较多,也比较方...

    JunyouYH
  • CSS3第五天

    十一、伸缩布局:控制元素对齐方式 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的 方向:默认主...

    py3study
  • 为什么人家的开源项目文档如此炫酷?原来用的是这款神器!

    VuePress是Vue驱动的静态网站生成器。对比我们的Docsify动态生成网站,对SEO更加友好。

    macrozheng
  • WORDPRESS插件大全

    WordPress博客程序是国外最火最热的一款程序,只要懂点基本的WordPress操作就能自己开发主题,除了能开发强大的主题以外,还有一个强大的功能就是Wor...

    V站CEO-西顾
  • 牛逼!我竟然能在 VS Code 里逛知乎、发文章

    基于 VSCode 的知乎客户端提供包括阅读,搜索,创作,发布等一站式服务,内容加载速度比 Web 端更快,创新的 Markdown-Latex 混合语法让内容...

    GitHubDaily

扫码关注云+社区

领取腾讯云代金券