寄言
没事看看今年过了多少了, 鼓励自己赶紧学习.
效果图
进度条会占父级标签
100%
的宽度
代码
Today.css
.container_today { margin: 0 auto; background: #2f3640; padding: 5px; border-radius: 0 0 5px 5px; } /* 头部 */ .header_today { text-align: center; height: 30px; line-height: 30px; font-size: 20px; position: relative; } .header_today .year_today { color: white; position: absolute; left: 5px; } .header_today .per_today { color: #E03255; font-weight: 900; } .header_today .detail_today { color: #BCF745; position: absolute; right: 5px; top: 0px; } /* 天数 */ .dots_today .dot_today { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: #34645D; margin: 0 2px; } .dots_today .active_today { background: #14F7CD; } /* 动画 */ /* chrome */ @-webkit-keyframes stars{ 0% { background: #34645D; } 25% { background: #14F7CD; } 50% { background: #34645D; } 75% { background: #14F7CD; } 100% { background: #34645D; } } /* firefox */ @-moz-keyframes stars{ 0% { background: #34645D; } 25% { background: #14F7CD; } 50% { background: #34645D; } 75% { background: #14F7CD; } 100% { background: #34645D; } } .lamp_today { -webkit-animation: stars 3s ease 0s infinite; -moz-animation: stars 3s ease 0s infinite; }
Today.js
Today = { data: { year: new Date().getFullYear(), month: new Date().getMonth(), day: new Date().getDate(), year_sum: 0, today_sum: 0, per: 0 }, init: function (ele) { this.data.year_sum = this.getYearDayNum() this.data.today_sum = this.getToDay() this.data.per = Math.floor(this.data.today_sum / this.data.year_sum * 100) + '%' this.createLayout(ele) console.log("%c wzblog(惜梦) %c http://github.com/wzblog and https://blog.wz52.cn/project.html", "color: #fff; background-image: linear-gradient(90deg, rgb(47, 172, 178) 0%, rgb(45, 190, 96) 100%); padding:5px 1px;", "background-image: linear-gradient(90deg, rgb(45, 190, 96) 0%, rgb(255, 255, 255) 100%); padding:5px 0;"); }, createLayout: function (ele) { // 创建容器 var container = $('<div></div>').addClass('container_today') // 创建头部 var header = $('<div></div>').addClass('header_today') // 创建年份 var year = $('<div></div>').addClass('year_today') // 创建进度 var per = $('<div></div>').addClass('per_today') // 创建天数详情 var detail = $('<div></div>').addClass('detail_today') // 创建天数盒子 var dots = $('<div></div>').addClass('dots_today') // 组合布局 // 插入头部 year.html(this.data.year) header.append(year) per.html(this.data.per) header.append(per) detail.html(this.data.today_sum + '/' + this.data.year_sum) header.append(detail) container.append(header) // 插入点 for (var i = 0; i < this.data.year_sum; i++) { var dot if (i < this.data.today_sum) { dot = this.createDot(true) if (i == this.data.today_sum - 1) { dot.addClass('lamp_today') } } else { dot = this.createDot() } dots.append(dot) } container.append(dots) // 插入容器 $(ele).append(container) }, // 创建点 createDot: function (mark) { var dot = $('<a></a>').addClass('dot_today') if (mark === true) { dot.addClass('active_today') } return dot }, // 获取全年天数 getYearDayNum: function () { var days = 0 for (var i = 1; i < 13; i++) { var d = new Date(this.data.year, i, 0) days += d.getDate() } return days }, // 获取从本年1月1日到现在的天数 getToDay: function () { var days = 0 for (var i = 1; i <= this.data.month; i++) { var d = new Date(this.data.year, i, 0) days += d.getDate() } days += this.data.day return days } }
使用方式
1.在你需要显示的位置写上一个 div
标签用于限制 Today
的大小
class
的名称可以自己随便写, 只要是符合class
属性的规则即可.
可以在div
标签中添加style
属性来设置width
(宽度)限制大小, 或者使用其他方式来设置样式都可以.
2.引入 Today.js
和 Today.css
以及 jQuery.js
内联
或 外联
方式Today.js
和 Today.css
为进度条核心文件, jQuery.js
为工具组件为核心代码提供工具支持
外联方式 <link rel="stylesheet" href="./Today.css"> <!-- 写在 head 中 --> <script src="./jQuery.js"></script> <!-- 写在 <\\body> 上一行 --> <script src="./Today.js"></script> <!-- 写在 <\\body> 上一行, 该文件必须在 jQuery.js 文件后引入 --> 内联方式 <style> // 将 Today.css 文件中的代码复制到此 </style> <script src="./jQuery.js"></script> <!-- 写在 <\\body> 上一行 --> <script> // 将 Today.js 文件中的代码复制到此 </script>
3.初始化 Today
显示在网页
.wzblog_today 为
JQ选择器
可以自行修改只要符合 JQ选择器规则 便可以使用
<script> Today.init('.wzblog_today') // 初始化, 写在 Today.js 文件之后 </script>