jquery每日签到日历插件

这是一款使用jquery来实现的每日签到日历插件源代码。该每日签到插件可以实现签到功能，查看签到次数等，非常实用。

使用方法

在页面中引入样式文件style.css，jquery.min.js和签到js主文件main.js。

<link rel="stylesheet" href="css/style.css">
<script src="js/jquery.min.js"></script>                          
<script src="js/main.js"></script>                          
                

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>    
                

展示我的签到的弹出层界面的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>                  
                

点击签到后的弹出层的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>