jQuery插件版日历签到 jquery插件

> **2017-05-24 14:48:49 星期三**

------------

# jQuery插件版日历签到
### 版本一（使用方法）
1. 在页面中引入样式文件style.css，jquery.min.js和签到js主文件main.js。
```html
<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>
<script src="js/main.js"></script> 
```
2. 签到界面的HTML结如下：
```html
<div class="qiandao-warp">
    <div class="qiandap-box">
        <div class="qiandao-con clear">
            <div class="qiandao-left">
                <div class="qiandao-left-top clear">
                    <div class="current-date">2016年1月6日</div>
                    <div class="qiandao-history qiandao-tran qiandao-radius" id="js-qiandao-history">我的签到</div>
                </div>
                <div class="qiandao-main" id="js-qiandao-main">
                    <ul class="qiandao-list" id="js-qiandao-list">
                    </ul>
                </div>
            </div>
            <div class="qiandao-right">
                <div class="qiandao-top">
                    <div class="just-qiandao qiandao-sprits" id="js-just-qiandao">
                    </div>
                    <p class="qiandao-notic">今日已领<span>0.1</span>元，请明日继续签到</p>
                </div>
                <div class="qiandao-bottom">
                    <div class="qiandao-rule-list">
                        <h4>签到规则</h4>
                        <p>首次签到获得0.05元现金奖励</p>
                        <p>连续签到每天增加0.01元现金奖励</p>
                        <p>连续签到16天及以上每天获得0.2元现金奖励</p>
                    </div>
                    <div class="qiandao-rule-list">
                        <h4>其他说明</h4>
                        <p>如果中间有一天间断未签到的，重先开始计算连续签到时间。</p>
                        <p>连续签到获得奖励后分享到QQ空间、微信朋友圈后再获得一次奖励，每天只限分享一次。</p>
                        <p>获得的奖励不能直接提现，只能投资后转让变现。</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>    
```
3. 展示我的签到的弹出层界面的HTML结构如下：
```html
<div class="qiandao-layer qiandao-history-layer">
    <div class="qiandao-layer-con qiandao-radius">
        <a href="javascript:;" class="close-qiandao-layer qiandao-sprits"></a>
        <ul class="qiandao-history-inf clear">
            <li>
                <p>连续签到</p>
                <h4>5</h4>
            </li>
            <li>
                <p>本月签到</p>
                <h4>17</h4>
            </li>
            <li>
                <p>总共签到数</p>
                <h4>28</h4>
            </li>
            <li>
                <p>签到累计奖励</p>
                <h4>30</h4>
            </li>
        </ul>
        <div class="qiandao-history-table">
            <table>
                <thead>
                    <tr>
                        <th>签到日期</th>
                        <th>奖励</th>
                        <th>说明</th>
                    </tr>
                </thead>
                <table>
                    <tr>
                        <td>2016-1-6 14:23:45</td>
                        <td>0.20</td>
                        <td>连续签到19天奖励</td>
                    </tr>
                    <tr>
                        <td>2016-1-6 14:23:45</td>
                        <td>0.20</td>
                        <td>分享奖励</td>
                    </tr>
                    <tr>
                        <td>2016-1-6 14:23:45</td>
                        <td>0.20</td>
                        <td>连续签到19天奖励</td>
                    </tr>
                    <tr>
                        <td>2016-1-6 14:23:45</td>
                        <td>0.20</td>
                        <td>连续签到19天奖励</td>
                    </tr>
                    <tr>
                        <td>2016-1-6 14:23:45</td>
                        <td>0.20</td>
                        <td>连续签到19天奖励</td>
                    </tr>
                    <tr>
                        <td>2016-1-6 14:23:45</td>
                        <td>0.20</td>
                        <td>连续签到19天奖励</td>
                    </tr>
                    <tr>
                        <td>2016-1-6 14:23:45</td>
                        <td>0.20</td>
                        <td>连续签到19天奖励</td>
                    </tr>
                    <tr>
                        <td>2016-1-6 14:23:45</td>
                        <td>0.20</td>
                        <td>连续签到19天奖励</td>
                    </tr>
                </table>
            </table>
        </div>
    </div>
    <div class="qiandao-layer-bg"></div>
</div> 
```
4. 点击签到后的弹出层的HTML结构如下：
```html
<div class="qiandao-layer qiandao-active">
    <div class="qiandao-layer-con qiandao-radius">
        <a href="javascript:;" class="close-qiandao-layer qiandao-sprits"></a>
        <div class="yiqiandao clear">
            <div class="yiqiandao-icon qiandao-sprits"></div>您已连续签到<span>2</span>天
        </div>
        <div class="qiandao-jiangli qiandao-sprits">
            <span class="qiandao-jiangli-num">0.55<em>元</em></span>
        </div>
        <a href="#" class="qiandao-share qiandao-tran">分享获取双倍收益</a>
    </div>
    <div class="qiandao-layer-bg"></div>
</div> 
```
5.main.js
```javascript
var signFun = function() {

var dateArray = [1, 2, 4, 6]；
        var $dateBox = $("#js-qiandao-list"),
            $currentDate = $(".current-date"),
            $qiandaoBnt = $("#js-just-qiandao"),
            _html = '',
            _handle = true,
            myDate = new Date();
        $currentDate.text(myDate.getFullYear() + '年' + parseInt(myDate.getMonth() + 1) + '月' + myDate.getDate() + '日');

var monthFirst = new Date(myDate.getFullYear(), parseInt(myDate.getMonth()), 1).getDay();

var d = new Date(myDate.getFullYear(), parseInt(myDate.getMonth() + 1), 0);
        var totalDay = d.getDate();

for (var i = 0; i < 42; i++) {
            _html += ' <li><div class="qiandao-icon"></div></li>'
        }
        $dateBox.html(_html)

$(".date" + myDate.getDate()).addClass('able-qiandao');

$dateBox.on("click", "li", function() {
                if ($(this).hasClass('able-qiandao') && _handle) {
                    $(this).addClass('qiandao');
                    qiandaoFun();
                }
            })

$qiandaoBnt.on("click", function() {
            if (_handle) {
                qiandaoFun();
            }
        });

function qiandaoFun() {
            $qiandaoBnt.addClass('actived');
            openLayer("qiandao-active", qianDao);
            _handle = false;
        }

function qianDao() {
            $(".date" + myDate.getDate()).addClass('qiandao');
        }
    }();

function openLayer(a, Fun) {
        $('.' + a).fadeIn(Fun)
    }

var closeLayer = function() {
            $("body").on("click", ".close-qiandao-layer", function() {
                $(this).parents(".qiandao-layer").fadeOut()
            })
        }()

$("#js-qiandao-history").on("click", function() {
        openLayer("qiandao-history-layer", myFun);

function myFun() {
            console.log(1)
        } 
    })
```

### 版本二
```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>签到</title>
	<style>
	*{margin:0;padding:0;font:14px/1.8 "Helvetica Neue","microsoft yahei";}
	ul,li{list-style:none;}
	body{background: #fff; }
	.checkin{margin: auto auto auto auto; }
	.clear {clear:both; height:0; overflow:hidden; display:block; line-height:0}
	.clearfix:after {clear:both;font-size:0; height:0; display:block; visibility:hidden; content:" "; line-height:0}
	.clearfix {zoom:1}/* for IE6 IE7 */
	.title{height: 36px;line-height: 36px;font-size: 16px;margin-bottom: 10px;}
	.title p{float: left;width: 80%;height: 36px;line-height: 36px;font-size: 16px;}
	.title a{display: inline-block;width: 20%;height: 36px;line-height: 36px;text-align: center;background: #42941a;border-radius: 5px;color: #fff;text-decoration: none;font-size: 16px;}
	.checkin li{background: #fee684; float: left;padding: 10px;text-align: center;}

li.able-qiandao{background: #e9c530; }
	li.checked{background:#fee684 url(http://i2.piimg.com/508767/a9576b09fc014d6e.png) no-repeat center;}
	.mask{ width: 100%;height: 100%;position: absolute;top: 0;left: 0; background-color: rgba(0,0,0,0.55);visibility: hidden;transition: all 0.25s ease}
	.modal{background:#fff;width: 450px;height: 400px;border-radius: 10px;position: absolute;margin-top: -200px;margin-left:-225px;left: 50%;top: 50%;border:5px solid #42941a;box-sizing:border-box;overflow: hidden;transform: translateY(-200%);transition: all 0.25s ease}
	a.closeBtn{display: block;position: absolute;right: 10px;top: 5px;font-family: 'simsun';font-size: 18px;text-decoration: none;font-weight: bolder;color: #333}
	.title_h1{text-align: center;font-size: 40px;font-weight: normal;padding-top: 80px;display: block;width: 100%}
	.title_h1 span{display: inline-block;width: 40px;height: 40px;border-radius: 100%;background: #42941a;color: #fff;position: relative;float: left;margin-left: 30%;margin-top: 7px;}
	.title_h1 span::before{width: 10px;height: 2px;background: #fff;position: absolute;left: 8px;top: 23px;display: block;line-height: 0;font-size: 0;content: ""; transform: rotate(52deg);}
	.title_h1 span::after{width: 24px;height: 2px;background: #fff;position: absolute;left: 12px;top: 20px;display: block;line-height: 0;font-size: 0;content: "";transform: rotate(-45deg);}
	.title_h1 em{display: inline-block;font-size: 30px;float: left;margin-left: 10px;}
	.title_h1 i{display: inline-block;font-size: 16px;float: left;margin: 14px 0 0 10px;}
	.title_h2{text-align: center;font-size: 16px;display: block;padding-top: 20px;}
	.title_h2 span{font-size: 36px;color: #b25d06;}
	.trf{visibility: visible;}
	.trf .modal{transform: translateY(0);}
	</style>	
	<script src="http://apps.bdimg.com/libs/jquery/1.10.1/jquery.min.js"></script>        
	 
</head>
<body>
	<div class="checkin">
		
	</div>
	<div class="mask">
		<div class="modal">
			<a href="#" class="closeBtn">×</a>
			<h1 class="title_h1 clearfix"><span></span><em>已签到</em> <i>您已签到2天</i></h1>
			<h2 class="title_h2">您获得现金<span>0.88元</span></h2>
		</div>
	</div>
	<script>
	;
	(function($) {
		var Checkin = function(ele, options) {
			this.ele = ele;
			this.opt = options;
			this.defaults = {
				width: 452,
				height: 'auto',
				background: '#f90',
				radius: 10,
				color: '#fff',
				padding: 10,
				dateArray: [1, 2, 4, 6], // 假设已签到的天数+1
			};
			this.obj = $.extend({}, this.defaults, this.opt);
		}
		Checkin.prototype.init = function() {
			var _self = this.ele,
				html = '',
				myDate = new Date(),
				year = myDate.getFullYear(),
				month = myDate.getMonth(),
				day = myDate.getDate(),
				weekText = ['日', '一', '二', '三', '四', '五', '六'];
			_self.css({
				width: this.obj.width + 'px',
				height: this.obj.height,
				background: this.obj.background,
				borderRadius: this.obj.radius,
				color: this.obj.color,
				padding: this.obj.padding
			}).append("<div class='title'><p>" + year + '年' + (month + 1) + '月' + day + '日' + "</p><a class=\'checkBtn\' href=\"javascript:;\">签到</a></div>");
			$("<ul class='week clearfix'></ul><ul class='calendarList clearfix'></ul>").appendTo(_self);
			for (var i = 0; i < 7; i++) {
				_self.find(".week").append("<li>" + weekText[i] + "</li>")
			};
			for (var i = 0; i < 42; i++) {
				html += "<li></li>"
			};
			_self.find(".calendarList").append(html);
			var $li = _self.find(".calendarList").find("li");
			_self.find(".week li").css({
				width: (_self.width() / 7) + 'px',
				height: 50 + 'px',
				borderRight: '1px solid #f90',
				boxSizing: 'border-box',
				background: '#b25d06'
			});
			$li.css({
				width: (_self.width() / 7) + 'px',
				height: 50 + 'px',
				borderRight: '1px solid #f90',
				borderBottom: '1px solid #f90',
				boxSizing: 'border-box',
				color: "#b25d06"
			});
			_self.find(".calendarList").find("li:nth-child(7n)").css('borderRight', 'none');
			_self.find(".week li:nth-child(7n)").css('borderRight', 'none');
			var monthFirst = new Date(year, month, 1).getDay();
			var d = new Date(year, (month + 1), 0)
			var totalDay = d.getDate(); //获取当前月的天数
			for (var i = 0; i < totalDay; i++) {
				$li.eq(i + monthFirst).html(i + 1);
				$li.eq(i + monthFirst).addClass('data' + (i + 1))
				if (isArray(this.obj.dateArray)) {
					for (var j = 0; j < this.obj.dateArray.length; j++) {
						if (i == this.obj.dateArray[j]) {
							// 假设已经签到的
							$li.eq(i + monthFirst).addClass('checked');
						}
					}
				}
			}
			//$li.eq(monthFirst+day-1).css('background','#f7ca8e')
			_self.find($(".data" + day)).addClass('able-qiandao');
		}
		var isChecked = false;
		Checkin.prototype.events = function() {
			var _self = this.ele;
			var $li = _self.find(".calendarList").find("li");
			$li.on('click', function(event) {
				event.preventDefault();
				/* Act on the event */
				if ($(this).hasClass('able-qiandao')) {
					$(this).addClass('checked');
					modal(_self);
					isChecked = true;
				}
			});
			var checkBtn = _self.find(".checkBtn");
			checkBtn.click(function(event) {
				modal(_self);
				_self.find('.able-qiandao').addClass('checked');
				isChecked = true;
			});
		}
		var modal = function(e) {
			var mask = e.parents().find(".mask");
			var close = e.parents().find(".closeBtn");
			if (mask && !isChecked) {
				mask.addClass('trf');
			} else {
				return
			};
			close.click(function(event) {
				event.preventDefault();
				mask.removeClass('trf')
			});
			e.parents().find('.checkBtn').text("已签到");
		}
		$.fn.Checkin = function(options) {
			var checkin = new Checkin(this, options);
			var obj = [checkin.init(), checkin.events()]
			return obj
		}
		var isArray = function(arg) {
			return Object.prototype.toString.call(arg) === '[object Array]';
		};
	})(jQuery);
	// 插件调用
	$(".checkin").Checkin();
	// 元素居中显示，与插件无关，根本自己需要修改；
	$(".checkin").css('marginTop',parseInt(($(window).innerHeight()-$(".checkin").outerHeight())/2)+'px');
	</script>
</body>
</html>
```

xinxin

痛苦犹如一艘船，欲望是指南针。

创建： 2017-05-24 22:56:19

更新： 2018-09-15 09:09:01

jQuery插件版日历签到 jquery插件

TA的最新笔记

TA的最热笔记

欢 迎

登录

新朋友 注册

注册

老朋友 登录

jQuery插件版日历签到 jquery插件

TA的最新笔记

TA的最热笔记

欢迎

新朋友注册

老朋友登录