签到日历
改编自 https://www.cnblogs.com/youzhuxiaoyao/p/6840817.html
<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"> -->
<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
<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" id="number"></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" onclick="signin()">签到</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" onclick="nextMonth()">></i> -->
<span id="month">2017年4月</span>
<!-- <i class="iconfont icon-arrow-left fl" onclick="prevMonth()"><</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="signdaysbox">
</div>
</div>
</body>
<script>
var qd = [2,5,8,9,10,11]; //签到过的日期
$(document).ready(function(){
reset();
$("#number").html(qd.length);
});
function reset(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();
}
$("#month").html(this.year+"年"+ this.month+"月");
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();
}
function getMonth() {
var m = parseInt(this.date.getMonth()) + 1;
if (m < 10) {
m = "0" + m;
}
return m;
}
function makeDaysArray() {
// 本月日期插入数组
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});
}
}
function init() {
this.makeDaysArray();
this.makeTemplate(); // 测试
return this.daysArray;
}
function nextMonth () {
this.reset(1);
}
function prevMonth() {
this.reset(-1);
}
function makeTemplate () {
var l = this.daysArray.length;
var dom = "";
for (var i = 0; i < l; i++) {
if (this.daysArray[i].other) {
dom = dom+"<span style='color:#c4c4c4'>"+this.daysArray[i].d+"</span>"; //上月日期 和下月日期显示为灰色
}else{
var cls = "";
for(var j=0;j<l;j++){
if(this.daysArray[i].d == qd[j]){
cls ="'border-radius: 1em 1em 1em 1em;background-color: #f79974;'"; //签到过的日期添加样式
}
}
dom = dom+"<span style="+cls+">"+this.daysArray[i].d+"</span>";
}
$("#signdaysbox").html(dom);
}
}
function signin(){
var day = this.date.getDate();
for(var i=0;i<qd.length;i++){
if(day == qd[i]){
alert("今天已签到");
return;
}
}
qd.push(day);
makeTemplate();
}
</script>
</html>
