简单的签到日历
<meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" /> <title>签到赚积分</title> <meta name="format-detection" content="telephone=no"> <!-- <link rel="stylesheet" href="css/css.css"> <link rel="stylesheet" href="css/tasks.css"> <link rel="stylesheet" href="css/common.css"> --> <style> body{font-size:0.24rem;color:#666;} i{font-style:normal;} .fl{float:left;} .fr{float:right;} .tc{text-align:center;} .mem-sign-st{background:-webkit-gradient(linear, 0 bottom, 100% top, from(#fbaf74), to(#f48b73));background:gradient(linear, 0 bottom, 100% top, from(#fbaf74), to(#f48b73));height:4.93rem;position:relative;text-align:center;color:#fff;} .mem-sign-st-detail{line-height:0.5rem;font-size:0.3rem;padding:0.2rem;} .mem-sign-circle{width:2.04rem;height:2.04rem;padding:0.16rem;background:rgba(0,0,0,0.3);border-radius:50%;margin-left:2.56rem;margin-top:0.2rem;} .mem-sign-before.mem-sign-circle{background:rgba(255,255,255,0.3);} .mem-sign-circle-text{width:2.04rem;height:2.04rem;background:#efe2dc;border-radius:50%;font-size:0.48rem;line-height:2.04rem;color:#919191;} .mem-sign-before .mem-sign-circle-text{background:#fff;color:#ffa895;} .mem-sign-tips{display:inline-block;width:2.94rem;line-height:0.5rem;background:rgba(0,0,0,0.3);border-radius:0.25rem;margin-top:0.4rem;} /*签到*/ .sign-date-wrap{margin:0.2rem;background:#fff;border:1px solid #dddee0;border-radius:0.04rem;font-size:0.3rem;} .sign-date-top{line-height:0.7rem;font-size:0.28rem;padding:0 0.4rem;padding-top:0.1rem;} .sign-date-top i{color:#bebec1;font-size:0.4rem;} .sign-date-week,.sign-date-days{padding-left:0.1rem;} .sign-date-days{padding-bottom:0.2rem;} .sign-date-week span,.sign-date-days span{float:left;width:0.9rem;line-height:0.8rem;text-align:center;} /*IE7不支持的清除浮动*/ .clearfix:after{ visibility:hidden; display:block; font-size:0; content:"."; clear:both; height:0; } </style> <script type="text/javascript"> (function (root) { var docEl = document.documentElement, timer = null, width, last; function changeRem () { width = docEl.getBoundingClientRect().width; if (last === width) { return; } last = width; root.rem = (width / 750) * 100; if (/ZTE U930_TD/.test(navigator.userAgent)) { root.rem = root.rem * 1.13; } docEl.style.fontSize = root.rem + 'px'; } changeRem(); root.addEventListener('resize', function () { clearTimeout(timer); timer = setTimeout(changeRem, 300); }); root.addEventListener('orientationchange', function () { clearTimeout(timer); timer = setTimeout(changeRem, 300); }); })(window, undefined); </script> </head> <body> <div class="mem-sign-st"> <div class="mem-sign-st-detail clearfix"> <span class="fl">累计签到 <i class="u-text-yellow">4</i> 次</span> <span class="fr">累计签到积分 <i class="u-text-yellow">4</i></span> </div> <!-- <div class="mem-sign-circle"> <div class="mem-sign-circle-text">已签到</div> </div> --> <div class="mem-sign-before mem-sign-circle"> <div class="mem-sign-circle-text">签到</div> </div> <div class="mem-sign-tips">连续签到可获得更多积分</div> </div> <div class="sign-date-wrap"> <div class="sign-date-top clearfix tc"> <i class="iconfont icon-arrow-right fr">></i> 2017年4月 <i class="iconfont icon-arrow-left fl"><</i> </div> <div class="sign-date-week clearfix"> <span>日</span> <span>一</span> <span>二</span> <span>三</span> <span>四</span> <span>五</span> <span>六</span> </div> <div class="sign-date-days clearfix" id="sign-days-box"> </div> </div> </body> <script> var signDate = function () { this.reset(); } signDate.prototype.reset = function (m) { this.date = new Date(); this.year = this.date.getFullYear(); this.month = this.getMonth(); if (m < 0) { this.date = new Date(this.year, this.month - 2); this.year = this.date.getFullYear(); this.month = this.getMonth(); } if (m > 0) { this.date = new Date(this.year, this.month); this.year = this.date.getFullYear(); this.month = this.getMonth(); } this.days = new Date(this.year, this.month, 0).getDate(); // 获取当月的天数 this.firstWeek = new Date(this.year, this.month - 1, 1).getDay(); // 获取当月第一天的星期 this.lastWeek = new Date(this.year, this.month - 1, this.days).getDay(); // 获取当月最后一天的星期 this.lastMonthDays = new Date(this.year, this.month - 1, 0).getDate(); // 获取上个月的天数 this.daysArray = []; // 展示日期数组 this.init(); } signDate.prototype.getMonth = function () { var m = parseInt(this.date.getMonth()) + 1; if (m < 10) { m = "0" + m; } return m; } signDate.prototype.makeDaysArray = function () { // 本月日期插入数组 for (var i = 1; i < this.days + 1; i++) { this.daysArray.push({d: i}); } // 上月需要显示的日期 for (var j = 0; j < this.firstWeek; j++){ this.daysArray.unshift({d: this.lastMonthDays - j, other: true}); } // 下月需要显示的日期 var l = this.daysArray.length; for (var m = 1; m < 42 - l + 1; m++) { this.daysArray.push({d: m, other: true}); } } signDate.prototype.init = function () { this.makeDaysArray(); this.makeTemplate(); // 测试 return this.daysArray; } signDate.prototype.nextMonth = function () { this.reset(1); } signDate.prototype.prevMonth = function () { this.reset(-1); } signDate.prototype.makeTemplate = function () { var l = this.daysArray.length, dom = null, container = document.getElementById('sign-days-box'); for (var i = 0; i < l; i++) { dom = document.createElement('span'); dom.innerHTML = this.daysArray[i].d; if (this.daysArray[i].other) { dom.setAttribute('style', 'color:#c4c4c4') } container.appendChild(dom); } } new signDate() </script> </html>
这块的代码写了但是没绑定事件，自己绑定吧，函数写好了
signDate.prototype.nextMonth = function () {
this.reset(1);
}
signDate.prototype.prevMonth = function () {
this.reset(-1);
}
++++++++预览效果如下：++++++++++++++
