签到日历插件
1、html
<div class="checkin"></div>
<div class="mask">
<div class="modal">
<a href="#" class="closeBtn">×</a>
<h1 class="title_h1 clearfix"><span></span><em>签到成功</em></h1>
</div>
</div>
2、css
*{margin:0;padding:0;font:14px/1.8 "Helvetica Neue","microsoft yahei";} ul,li{list-style:none; padding-left: 1.5rem;} 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: 40px;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: 8px;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: 300px;height: 300px;border-radius: 10px;position: absolute;margin-top: -150px;margin-left:-150px;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: 40px;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: 22%;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);}
3、js
(function($) { var Checkin = function(ele, options) { this.ele = ele; this.opt = options; this.defaults = { width: 320, 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++) { /*7列*/ _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() / 8) + 'px', height: 40 + 'px', borderRight: '1px solid #f90', boxSizing: 'border-box', background: '#b25d06' }); $li.css({ width: (_self.width() / 8) + 'px', height: 40 + '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'); /*找到当天的li,添加样式able-qiandao*/ _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 */ /*判断当天li中存不存在able-qiandao样式*/ if ($(this).hasClass('able-qiandao')) { $(this).addClass('checked'); /*样式存在,添加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');
4、效果
5、一个页面嵌入另一个页面
<iframe src="top1.html" frameBorder="0" width="900" scrolling="no" height="90"></iframe>