加载中...
主页文章标签分类随便看看
昼夜切换繁简切换阅读模式打开Tidio镜像站跳转分享本页

lifetime

人生倒计时网页小插件

演示地址

https://muzihuaner.github.io/lifetime

安装步骤

1、引入第三方库jquery

1
2
<script src="http://libs.baidu.com/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.min.js"></script>

2.引入CSS

1
<link rel="stylesheet" href="https://fastly.jsdelivr.net/gh/muzihuaner/lifetime@main/style.css">

3.引入JS

1
<script src="https://fastly.jsdelivr.net/gh/muzihuaner/lifetime@main/script.js"></script>

4.选择合适的位置引入HTML代码,在侧栏显示,感觉位置刚刚好

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<div class="box">
<div class="aside aside-count">
<div class="p-3">人生倒计时</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>

6.好了


评论
avatar
爱rua猫的李同学
“经历的意义,在于引导你,而非定义你”
联系博主
公告
允许一起发生
接受每个时期的自己
莫道桑榆晚,为霞尚满天
自信,就是允许自己被否定
微博热搜