jquary简单日历签到效果实现

来源：互联网发布：coc各级墙升级数据编辑：程序博客网时间：2024/05/22 00:47

最近写的项目活动中总是会写到每天签到的这个功能，然后网上找的插件各有利弊，最后，自己花了点时间，写了一个简便版的实现日历签到页面，供大家学习参考
最终效果图：
这里写图片描述

HTML部分：

 <div class="checkin">        <div class="tit"><img src='images/t_icon.png' class='imgicon1'/><span id="now_month"></span>月签到日历<img src='images/t_icon.png' class='imgicon2'/></div>        <ul class="week">            <li>Su</li>            <li>Mo</li>            <li>Tu</li>            <li>We</li>            <li>Th</li>            <li>Fr</li>            <li>Sa</li>        </ul>        <ul class="calendarList">            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>        </ul>    </div>

CSS部分：

<style type="text/css">@charset "utf-8";*{margin:0;padding:0}img{vertical-align:top}body{background:#fee671; width:100%; font-size:14px; font-family:"Microsoft YaHei",微软雅黑,Arial,SimSun;color: #734221;}a,ul,li{margin:0px; padding:0px;} a{text-decoration:none; outline:none;}a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);}input{-webkit-appearance:none;outline:none;}ul,li{list-style:none;}.clear{clear:both}.clear:after{clear:both;display:table;content:''}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}.clearfix{*+height:1%;zoom:1} body{background: #fff6ca;font-size: 16px;}.checkin{width: 96%;height: auto;margin-left: 2%;background: #fbb224;border: 10px solid #fff;border-radius: 15px;margin-top: 20px;float:left;box-sizing: border-box;box-shadow: 0px 8px 5px #e3dbb4;}.tit{width:100%;height:45px;line-height: 45px;background: #fbae23;border-radius: 10px;font-size:18px;text-align: center;color: #fff;position: relative;border: 1px solid #fee783;box-shadow: 0px 0px 2px #9a590a;font-weight: bold;}.tit img{width:18px;height: auto;position: absolute;top: 0;margin-top: -24px;}.week,.calendarList{width: 95%;float: left;margin-left: 2.5%;margin-bottom: 15px;}.week li{float: left;width:14.2%;font-size: 18px;color: #fbb224;background: #91550c;padding: 2% 0;border-radius: 0 0 10px 10px;text-align: center;}.calendarList li{width: 13.6%;float: left;margin-right: 0.8%;margin-bottom: 2px; text-align: center; height: 32px;line-height: 32px; background: #fcc252;border-radius: 3px;font-size: 14px;color: #000;box-shadow: 0px 3px 2px #e9a121;}.calendarList li.checked{background:#fff url(images/checked.png) no-repeat center;background-size: 20px auto;background-position: center 96%;}.calendarList li:nth-child(7n){margin-right: 0;}.imgicon1{left: 20%;}.imgicon2{right: 20%;}       .signrule{width: 90%;height: auto;margin: 0 5%;float: left;margin-top: 15px;}.signrule h1{width: 96%;padding-left: 4%;height: 45px;line-height: 45px;color:#a05e0c;font-size: 20px;border-bottom: 1px dashed #a05e0c;clear: both;font-weight: 100;}.sign_detail{width: 96%;padding-left: 4%;height:250px;overflow:auto;}.sign_detail p{width: 100%; line-height: 32px;font-size:16px;color: #a05c0c;}.sign_detail p span{color: #ff0000;font-size: 16px;}    </style>

JS部分：

  <script type="text/javascript">    var curDateTime = new Date();    var nowYear = curDateTime.getFullYear(); //年    var nowMonth = curDateTime.getMonth(); //月（从0开始）    var nowDay = curDateTime.getDate(); //日    var nowDayOfWeek = curDateTime.getDay(); //星期几 (0 ~ 6)    var datamap = [1, 2, 3]; //签到的日期(默认从0开始)         var monthFirst = new Date(nowYear, nowMonth, 1).getDay(); //获取当月的第一天是星期几    var lastmonthfianlday = new Date(nowYear, nowMonth, 0).getDate(); //获取上个月的最后一天是几号    var d = new Date(nowYear, (nowMonth + 1), 0) //当月最后一天    var totalDay = d.getDate(); //获取当前月的天数    var li = $(".calendarList li");    for (var i = 0; i < totalDay; i++) {        li.eq(i + monthFirst).html(i + 1);        for (var j = 0; j < datamap.length; j++) {            if (i == datamap[j]) {                // 假设已经签到的                li.eq(i + monthFirst).addClass('checked');            }        }    }    for (var m = monthFirst - 1; m >= 0; m--, lastmonthfianlday--) {        li.eq(m).html(lastmonthfianlday).css("color", "#fff");    }    var dd = 1;    var allday = totalDay + monthFirst;    for (var n = allday; n < li.length; n++, dd++) {        li.eq(n).html(dd).css("color", "#fff");    }    $("#now_month").html(nowMonth + 1);        //var d=new Date(2017,4,1) ==> Mon May 01 2017 00:00:00 GMT+0800 (中国标准时间) 2017年的5月1号        //var a=new Date(2017,4,0) ==> Sun Apr 30 2017 00:00:00 GMT+0800 (中国标准时间) 2017年4月30号        //c = new Date(2017, 5, 0) ==>Wed May 31 2017 00:00:00 GMT+0800 (中国标准时间)   2017年5月31号    </script>

就这么简单~~~

阅读全文

0 0