美文网首页
每日签到js

每日签到js

作者: 多点干货少点废话 | 来源:发表于2019-12-31 10:57 被阅读0次
    // 每日签到

var calUtil = {
    //当前日历显示的年份
    showYear: 2019,
    //当前日历显示的月份
    showMonth: 9,
    //当前日历显示的天数
    showDays: 1,
    eventName: "load",
    // 保存底部buttom
    footTextDiv:null,
    //初始化日历
    init: function() {
        this.setMonthAndDay();
        // 获取数据
        let signList = this.getData(this.changeUnix(this.getDateDay(this.showYear,this.showMonth)));
        this.draw(signList);
        this.bindEnvent();
    },
    draw: function(signList) {
        //绑定日历
        var str = this.drawCal(this.showYear, this.showMonth, signList);
        $("#calendar").html(str);
        $("#sign_cal").append(this.footTextDiv)
        //绑定日历表头
        var calendarName = this.showYear + "年" + this.showMonth + "月";
        $(".calendar_month_span").html(calendarName);
    },
    //绑定事件
    bindEnvent: function() {
        var _this = this
        //绑定上个月事件
        $(".calendar_month_prev").click(function() {
            _this.eventName = "prev";
            _this.init();
        });
        //绑定下个月事件
        $(".calendar_month_next").click(function() {
            _this.eventName = "next";
            _this.init();
        });
        $('.day-sign-close').click(function(){
            $('.day-sign').hide();
        })
    },
    //获取当前选择的年月
    setMonthAndDay: function() {
        switch (this.eventName) {
            case "load":
                var current = new Date();
                this.showYear = current.getFullYear();
                this.showMonth = current.getMonth() + 1;
                break;
            case "prev":
                var nowMonth = $(".calendar_month_span").html().split("年")[1].split("月")[0];
                this.showMonth = parseInt(nowMonth) - 1;
                if (this.showMonth == 0) {
                    this.showMonth = 12;
                    this.showYear -= 1;
                }
                break;
            case "next":
                var nowMonth = $(".calendar_month_span").html().split("年")[1].split("月")[0];
                this.showMonth = parseInt(nowMonth) + 1;
                if (this.showMonth == 13) {
                    this.showMonth = 1;
                    this.showYear += 1;
                }
                break;
        }
    },
    getDaysInmonth: function(iMonth, iYear) {
        var dPrevDate = new Date(iYear, iMonth, 0);
        return dPrevDate.getDate();
    },
    // 本月日期数组
    bulidCal: function(iYear, iMonth) {
        // 构建本月日期数组
        var aMonth = new Array();
        aMonth[0] = new Array(7);
        aMonth[1] = new Array(7);
        aMonth[2] = new Array(7);
        aMonth[3] = new Array(7);
        aMonth[4] = new Array(7);
        aMonth[5] = new Array(7);
        aMonth[6] = new Array(7);
        // 找到当前月一号
        var dCalDate = new Date(iYear, iMonth - 1, 1);
        //返回一号是周几
        var iDayOfFirst = dCalDate.getDay();
        // 这个月有多少天
        var iDaysInMonth = this.getDaysInmonth(iMonth, iYear);
        // 实例化本月日期
        var iVarDate = 1;
        // 定义d：天   w：周
        var d, w;
        aMonth[0][0] = "S";
        aMonth[0][1] = "M";
        aMonth[0][2] = "T";
        aMonth[0][3] = "W";
        aMonth[0][4] = "T";
        aMonth[0][5] = "F";
        aMonth[0][6] = "S";
        // 找到当月第一周第一天  开始排列
        for (d = iDayOfFirst; d < 7; d++) {
            aMonth[1][d] = iVarDate;
            iVarDate++;
        }
        // 第二周开始排列
        for (w = 2; w < 7; w++) {
            for (d = 0; d < 7; d++) {
                if (iVarDate <= iDaysInMonth) {
                    aMonth[w][d] = iVarDate;
                    iVarDate++;
                }
            }
        }
        return aMonth;
    },
    // 判断本月有没有签到
    ifHasSigned: function(signList, day) {
        var signed = false;
        $.each(signList, function(index, item) {
            if (item.signDay == day) {
                signed = true;
                return false;
            }
        });
        return signed;
    },
    // 构建签到日历
    drawCal: function(iYear, iMonth, signList) {
        var myMonth = this.bulidCal(iYear, iMonth);
        var htmls = new Array();
        htmls.push("<div class='sign_main' id='sign_layer'>");
        htmls.push("<div class='sign_succ_calendar_title'>");
        htmls.push("<div class='calendar_month_prev'></div>");
        htmls.push("<div class='calendar_month_span'></div>");
        htmls.push("<div class='calendar_month_next'></div>");
        htmls.push("</div>");
        htmls.push("<div class='sign' id='sign_cal'>");
        htmls.push("<div>");
        htmls.push("<div class='sign-date-top'>");
        htmls.push("<div>" + myMonth[0][0] + "</div>");
        htmls.push("<div>" + myMonth[0][1] + "</div>");
        htmls.push("<div>" + myMonth[0][2] + "</div>");
        htmls.push("<div>" + myMonth[0][3] + "</div>");
        htmls.push("<div>" + myMonth[0][4] + "</div>");
        htmls.push("<div>" + myMonth[0][5] + "</div>");
        htmls.push("<div>" + myMonth[0][6] + "</div>");
        htmls.push("</div>");
        var d, w;
        for (w = 1; w < 7; w++) {
            if(w==1){
                htmls.push("<div class='sign-date-item' style='padding-top:10px'>");
            }else{
                htmls.push("<div class='sign-date-item'>");
            }
            for (d = 0; d < 7; d++) {
                var ifHasSigned = this.ifHasSigned(signList, myMonth[w][d]);
                if (ifHasSigned) {
                    htmls.push("<div class='sign-on-check'>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</div>");
                } else {
                    htmls.push("<div>" + (!isNaN(myMonth[w][d]) ? myMonth[w][d] : " ") + "</div>");
                }
            }
            htmls.push("</div>");
        }
        htmls.push("</div>");
        return htmls.join('');
    },
    changeUnix: function(time) {
        var date = new Date(time);
        return date.getTime()
    },
    getDateDay: function(years,month){
        var str = years +"-"+(month<10?'0'+month:month)+'-01 00:00:00';
        return str
    },
    getData: function(data){
        // 获取签到的日期
        var list = [];
        $.ajax({
            url: '获取签到的日期',
            dataType: 'json',
            type: "GET",
            data:{
                time:data
            },
            async:false,
            success: function(res) {
                if (res.code == '0000') {
                    if(res.data.length == 0){
                        list = []
                    }else{
                        for(let i =0;i<res.data.length;i++){
                            let obj = {
                                "signDay": res.data[i]
                            }
                            list.push(obj)
                        }
                    }
                }else{
                    list = []
                }
            }
        })
        return list
    },
    signIn:function(){
        var _this = this;
        $.ajax({
            url: '/confirmRights/addFreeNumber',
            dataType: 'json',
            type: "GET",
            async:false,
            success: function(res) {
                if (res.code == '0000') {
                    let arr = res.msg.split('，')
                    let html = '';
                    for(let i =0;i<arr.length;i++){
                        html+='<p>'+arr[i]+'</p>'
                    }
                                        //业务逻辑s
                    $('.top-sign-btn').addClass('top-sign-on');
                    $('.top-sign-btn').removeClass('top-sign-in');
                    $('.sign-modal').show();
                    $('.sign-modal-con').empty();
                    $('.sign-modal-con').html(html);
                                         _this.modalEventClose()
                                        //业务逻辑e
                    
                }else{
                    $('.sign-modal').hide();
                }
            }
        })
    },
    isCheckIn:()=>{
        $.ajax({
            url: '这个是判断当天有没有签到（业务逻辑可以不需要）',
            dataType: 'json',
            type: "POST",
            async:false,
            success: function(res) {
                if (res.code == '0000') {
                    if(res.data.isCheckIn == 1){
                        $('.top-sign-btn').addClass('top-sign-on')
                        $('.top-sign-btn').removeClass('top-sign-in')
                    }else{
                        $('.top-sign-btn').removeClass('top-sign-on')
                        $('.top-sign-btn').addClass('top-sign-in')
                    }
                }else{
                    
                }
            }
        })
    },
    getContSignDay:()=>{
        var _this = this;
        let text="";
        $.ajax({
            url: '获取本月哪日签到过',
            dataType: 'json',
            type: "GET",
            async:false,
            success: function(res) {
                if (res.code == '0000') {
                    let arr = res.msg.split('，')
                    text+="<div class='day-sign-btn'>"+arr[0]+"</div><div class='day-sign-p'>"+arr[1]+"</div></div></div>";
                    calUtil.footTextDiv = text;
                    console.log(_this)
                }else{
                    
                }
            }
        })
    },
    modalEventClose:()=>{
        $('.sign-modal-close').on('click',()=>{
            $('.sign-modal').hide();
        })
        $('.sign-modal-btn').on('click',()=>{
            $('.sign-modal').hide();
        })
    }
};
// 判断是否签到
 calUtil.isCheckIn();
// 查看签到/立即签到
$('.top-sign-btn').on('click',function(){
    calUtil.eventName = "load";
        //业务逻辑
    //calUtil.signIn();
          //业务逻辑
    //calUtil.getContSignDay();
    calUtil.init();
    $('.day-sign').show();
})

    效果图：


    image.png
    image.png

    style:

    .top-sign {
    display: block;
    width: 1170px;
    height: 88px;
    position: relative;
    background: url('/resources/author/authorization/img/sign-bg.png');
    background-size: 1170px 88px;
    background-repeat: no-repeat;
}
.top-sign-btn{
    display: block;
    width: 240px;
    height: 88px;
    position: absolute;
    background-size: 240px 88px;
    background-repeat: no-repeat;
    right: 167px;
    cursor: pointer;
}
.top-sign-in{
    background-image: url('/resources/author/authorization/img/sign-btn-now.png');
}
.top-sign-on{
    background-image: url('/resources/author/authorization/img/sign-btn-on.png');
}

.day-sign{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    background: rgba(0,0,0,.3);
    top: 0;
    left: 0;
    z-index: 1000;
}
.sign-modal{
    display: none;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.3);
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1500;
}
.sign-modal-center{
    width: 320px;
    height: auto;
    position: absolute;
    top: 40%;
    left: 50%;
    margin-left: -160px;
    margin-top: -101px;
    background: #fff;
    border-radius: 6px;
    padding: 0 24px;
}
.sign-modal-top{
    height: 46px;
    width: 100%;
    position: relative;
    line-height: 46px;
    color: #333333;
    font-size:16px;
    font-family:Source Han Sans CN;
    font-weight:bold;
}
.sign-modal-top span{
    display: inline-block;
    width: 16px;
    height: 16px;
    position: absolute;
    top: 16px;
    right: 1px;
    background: url('/resources/author/authorization/img/signmodalclose.png');
    background-size: 16px 16px;
    background-repeat: no-repeat;
    cursor: pointer;
}
.sign-modal-con {
    padding-top: 20px;
    text-align: center;
}
.sign-modal-btn{
    width: 214px;
    height: 36px;
    color: #fff;
    background: #3999D8;
    line-height: 36px;
    margin: 24px auto;
    border:1px solid rgba(227,229,232,1);
    border-radius:3px;
    text-align: center;
    cursor: pointer;
}
.day-sign-outer{
    width: 287px;
    height: auto;
    position: relative;
    top: 25%;
    margin-left: -143.5px;
    left: 50%;
    background: #fff;
    border-radius:6px;
    box-shadow:0px 2px 7px 0px rgba(102,102,102,0.22);
    overflow: hidden;
}
.day-sign-title{
    width: 100%;
    height: 42px;
    color: #fff;
    text-align: center;
    background: #6699FF;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.sign-on-check{
    width: 25px;
    height: 25px;
    background: url('/resources/author/authorization/img/signcheck.png');
    background-size: 25px 25px;
    background-repeat: no-repeat;
}
.sign_main{
    width: 100%;
    height: auto;
    overflow: hidden;
}
.sign_succ_calendar_title{
    width: 100%;
    height: 42px;
    color: #fff;
    text-align: center;
    background: #6699FF;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding-top: 14px;
}
.calendar_month_next{
    display: inline-block;
    width: 8px;
    height: 14px;
    background: url('/resources/author/authorization/img/sign-right.png');
    background-size:8px 14px;
    background-repeat: no-repeat;
    margin-left: 10px;
    vertical-align: top;
    cursor: pointer;
}
.calendar_month_prev{
    display: inline-block;
    width: 8px;
    height: 14px;
    background: url('/resources/author/authorization/img/sign-left.png');
    background-size:8px 14px;
    background-repeat: no-repeat;
    margin-right: 10px;
    vertical-align: top;
    cursor: pointer;
}
.calendar_month_span{
    width: 115px;
    height: 14px;
    display: inline-block;
    font-size: 14px;
    line-height: 14px;
    vertical-align: top;
}
.sign{
    /* padding: 0 20px; */
}
.sign-date-top{
    display: inline-block;
    width: 100%;
    height: 38px;
    border-bottom: 1px solid #369ED8;
    padding: 0 20px;
}
.sign-date-top div{
    display: inline-block;
    width: 25px;
    text-align: center;
    line-height: 38px;
    margin: 0 5px;
    color: #333333;
}
.sign-date-item{
    display: inline-block;
    width: 100%;
    height: auto;
    padding: 0 20px;
    float: left;
}
.sign-date-item div{
    display: inline-block;
    width: 25px;
    height: 25px;
    text-align: center;
    line-height: 25px;
    margin:2px 5px;
    float: left;
    color: #333333;
}
.sign-date-item div:first-child{
    color: #369ED7;
}
.sign-date-item div:last-child{
    color: #369ED7;
}
.day-sign-btn{
    width: 178px;
    height: 32px;
    float: left;
    margin-left: 55px;
    background:linear-gradient(90deg,rgba(253,200,86,1) 0%,rgba(255,162,86,1) 100%);
    box-shadow:0px 2px 7px 0px rgba(255,169,99,0.22);
    border-radius:16px;
    text-align: center;
    line-height: 32px;
    font-size: 14px;
    color: #fff;
}
.day-sign-p{
    width: 100%;
    text-align: center;
    color: #999999;
    font-size: 12px;
    display: block;
    float: left;
    line-height: 12px;
    margin-top: 12px;
    margin-bottom: 21px;
}
.day-sign-close{
    width: 14px;
    height: 14px;
    position: absolute;
    top: 14px;
    right: 14px;
    background: url('');
    background-size: 14px 14px;
    background-repeat: no-repeat;
    cursor: pointer;
}

    html:

    <div class="top-sign">
    <div class="top-sign-btn top-sign-in"></div>
</div>
//弹框
                 <div class="day-sign">
            <div class="day-sign-outer">
                <div id="calendar"></div>
                <div class="day-sign-close"></div>
            </div>
            <div class="sign-modal">
                <div class="sign-modal-center">
                    <div class="sign-modal-top">提示<span class="sign-modal-close"></span></div>
                    <div class="sign-modal-con"></div>
                    <div class="sign-modal-btn">恭喜签到成功</div>
                </div>
            </div>
        </div>

    根据网上大佬写的代码结合实际业务进行二次开发。

    相关文章

      网友评论

          本文标题：每日签到js

          本文链接：https://www.haomeiwen.com/subject/fhlboctx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|每日签到js|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！