签到日历

改编自 https://www.cnblogs.com/youzhuxiaoyao/p/6840817.html
 

<meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no" />
    <title>签到赚积分</title>
    <meta name="format-detection" content="telephone=no">
    <!-- <link rel="stylesheet" href="css/css.css">
    <link rel="stylesheet" href="css/tasks.css">
    <link rel="stylesheet" href="css/common.css"> -->
    <script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
    <style>
    body{font-size:0.24rem;color:#666;}
    i{font-style:normal;}
    .fl{float:left;}
    .fr{float:right;}
    .tc{text-align:center;}
    .mem-sign-st{background:-webkit-gradient(linear, 0 bottom, 100% top, from(#fbaf74), to(#f48b73));background:gradient(linear, 0 bottom, 100% top, from(#fbaf74), to(#f48b73));height:4.93rem;position:relative;text-align:center;color:#fff;}
    .mem-sign-st-detail{line-height:0.5rem;font-size:0.3rem;padding:0.2rem;}
    .mem-sign-circle{width:2.04rem;height:2.04rem;padding:0.16rem;background:rgba(0,0,0,0.3);border-radius:50%;margin-left:2.56rem;margin-top:0.2rem;}
    .mem-sign-before.mem-sign-circle{background:rgba(255,255,255,0.3);}
    .mem-sign-circle-text{width:2.04rem;height:2.04rem;background:#efe2dc;border-radius:50%;font-size:0.48rem;line-height:2.04rem;color:#919191;}
    .mem-sign-before .mem-sign-circle-text{background:#fff;color:#ffa895;}
    .mem-sign-tips{display:inline-block;width:2.94rem;line-height:0.5rem;background:rgba(0,0,0,0.3);border-radius:0.25rem;margin-top:0.4rem;}

    /*签到*/
    .sign-date-wrap{margin:0.2rem;background:#fff;border:1px solid #dddee0;border-radius:0.04rem;font-size:0.3rem;}
    .sign-date-top{line-height:0.7rem;font-size:0.28rem;padding:0 0.4rem;padding-top:0.1rem;}
    .sign-date-top i{color:#bebec1;font-size:0.4rem;}
    .sign-date-week,.sign-date-days{padding-left:0.1rem;}
    .sign-date-days{padding-bottom:0.2rem;}
    .sign-date-week span,.sign-date-days span{float:left;width:0.9rem;line-height:0.8rem;text-align:center;}
     /*IE7不支持的清除浮动*/
    .clearfix:after{
        visibility:hidden;
        display:block;
        font-size:0;
        content:".";
        clear:both;
        height:0;
    }
    </style>
    <script type="text/javascript">
        (function (root) {
            var     docEl = document.documentElement,
                timer = null,
                width, last;
                    
            function changeRem () {
                width = docEl.getBoundingClientRect().width;
                if (last === width) { return; }
                last = width;
                root.rem = (width / 750) * 100;
                if (/ZTE U930_TD/.test(navigator.userAgent)) {
                        root.rem = root.rem * 1.13;
                }
                docEl.style.fontSize = root.rem + 'px';
            }

            changeRem();

            root.addEventListener('resize', function () {
                clearTimeout(timer);
                timer = setTimeout(changeRem, 300);
            });

            root.addEventListener('orientationchange', function () {
                clearTimeout(timer);
                timer = setTimeout(changeRem, 300);
            });
        })(window, undefined);
    </script>

</head>
<body>
    <div class="mem-sign-st">
        <div class="mem-sign-st-detail clearfix">
            <span class="fl">累计签到 <i class="u-text-yellow" id="number"></i> 次</span>
            <span class="fr">累计签到积分 <i class="u-text-yellow">4</i></span>
        </div>
        <!-- <div class="mem-sign-circle">
            <div class="mem-sign-circle-text">已签到</div>
        </div> -->
        <div class="mem-sign-before mem-sign-circle">
            <div class="mem-sign-circle-text" onclick="signin()">签到</div>
        </div>
        <div class="mem-sign-tips">连续签到可获得更多积分</div>
    </div>
    <div class="sign-date-wrap">
        <div class="sign-date-top clearfix tc">
          <!--   <i class="iconfont icon-arrow-right fr" onclick="nextMonth()">></i> -->
            <span id="month">2017年4月</span>
            <!-- <i class="iconfont icon-arrow-left fl" onclick="prevMonth()"><</i> -->
        </div>
        <div class="sign-date-week clearfix">
            <span>日</span>
            <span>一</span>
            <span>二</span>
            <span>三</span>
            <span>四</span>
            <span>五</span>
            <span>六</span>
        </div> 
        <div class="sign-date-days clearfix" id="signdaysbox">
        </div>
    </div>
</body>
<script>
 var qd = [2,5,8,9,10,11]; //签到过的日期
    $(document).ready(function(){
        reset();
        $("#number").html(qd.length);
    });
   
    function reset(m) {
        this.date = new Date();
        this.year = this.date.getFullYear();
        this.month = this.getMonth();

        if (m < 0) {
            this.date = new Date(this.year, this.month - 2);
            this.year = this.date.getFullYear();
            this.month = this.getMonth();
        }

        if (m > 0) {
            this.date = new Date(this.year, this.month);
            this.year = this.date.getFullYear();
            this.month = this.getMonth();
        }
        $("#month").html(this.year+"年"+ this.month+"月");

        this.days = new Date(this.year, this.month, 0).getDate(); // 获取当月的天数
        this.firstWeek = new Date(this.year, this.month - 1, 1).getDay(); // 获取当月第一天的星期
        this.lastWeek = new Date(this.year, this.month - 1, this.days).getDay(); // 获取当月最后一天的星期
        this.lastMonthDays = new Date(this.year, this.month - 1, 0).getDate(); // 获取上个月的天数
        this.daysArray = []; // 展示日期数组

        this.init();
    }
     function getMonth() {
        var m = parseInt(this.date.getMonth()) + 1;
        if (m < 10) {
            m = "0" + m;
        }
        return m;
    }
     function makeDaysArray() {
        // 本月日期插入数组
        for (var i = 1; i < this.days + 1; i++) {
            this.daysArray.push({d: i});
        }
        // 上月需要显示的日期
        for (var j = 0; j < this.firstWeek; j++){
            this.daysArray.unshift({d: this.lastMonthDays - j, other: true});
        }
        // 下月需要显示的日期
        var l = this.daysArray.length;
        for (var m = 1; m < 42 - l + 1; m++) {
            this.daysArray.push({d: m, other: true});
        }
    }
    function init() {
        this.makeDaysArray();
        this.makeTemplate(); // 测试
        return this.daysArray;
    }
    function nextMonth () {
        this.reset(1);
    }

    function prevMonth() {
        this.reset(-1);
    }

     function makeTemplate () {
        var l = this.daysArray.length;
        var dom = "";
        for (var i = 0; i < l; i++) {
            if (this.daysArray[i].other) {
                dom = dom+"<span style='color:#c4c4c4'>"+this.daysArray[i].d+"</span>";  //上月日期 和下月日期显示为灰色
            }else{
                var cls = "";
                for(var j=0;j<l;j++){
                    if(this.daysArray[i].d == qd[j]){
                        cls ="'border-radius: 1em 1em 1em 1em;background-color: #f79974;'";  //签到过的日期添加样式
                    }
                }
                dom = dom+"<span style="+cls+">"+this.daysArray[i].d+"</span>";
            }
            $("#signdaysbox").html(dom);
        }
    }
    
    function signin(){
          var day = this.date.getDate();
          for(var i=0;i<qd.length;i++){
                  if(day == qd[i]){
                      alert("今天已签到");
                      return;
                  }
          }
       qd.push(day);
       makeTemplate();
    }
</script>
</html>

 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
可以通过使用 HTML 和 CSS 来创建一个签到日历。以下是一个简单的示例: ```html <!DOCTYPE html> <html> <head> <title>签到日历</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: center; padding: 8px; border: 1px solid black; } th { background-color: #f2f2f2; } .signed { background-color: green; color: white; } .unsigned { background-color: red; color: white; } </style> </head> <body> <h1>签到日历</h1> <table> <tr> <th>周一</th> <th>周二</th> <th>周三</th> <th>周四</th> <th>周五</th> <th>周六</th> <th>周日</th> </tr> <tr> <td class="signed">1</td> <td class="unsigned">2</td> <td class="unsigned">3</td> <td class="unsigned">4</td> <td class="unsigned">5</td> <td class="unsigned">6</td> <td class="unsigned">7</td> </tr> <tr> <td class="unsigned">8</td> <td class="unsigned">9</td> <td class="unsigned">10</td> <td class="unsigned">11</td> <td class="unsigned">12</td> <td class="unsigned">13</td> <td class="unsigned">14</td> </tr> <tr> <td class="unsigned">15</td> <td class="unsigned">16</td> <td class="unsigned">17</td> <td class="unsigned">18</td> <td class="unsigned">19</td> <td class="unsigned">20</td> <td class="unsigned">21</td> </tr> <tr> <td class="unsigned">22</td> <td class="unsigned">23</td> <td class="unsigned">24</td> <td class="unsigned">25</td> <td class="unsigned">26</td> <td class="unsigned">27</td> <td class="unsigned">28</td> </tr> <tr> <td class="unsigned">29</td> <td class="unsigned">30</td> <td class="unsigned">31</td> <td class="unsigned"></td> <td class="unsigned"></td> <td class="unsigned"></td> <td class="unsigned"></td> </tr> </table> </body> </html> ``` 在这个示例中,我们使用了一个简单的 HTML 表格来显示签到日历CSS 样式用于添加边框、背景颜色和文本颜色。使用类“signed”和“unsigned”来标记已签到和未签到的日期。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

码奴生来只知道前进~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值