mui簽到日歷

本文轉載自查看原文 2016-08-16 08:46 5387 mui

首先源碼來自https://github.com/zhaomenghuan/mui-demo/tree/master/example/calendar

源碼只是個日歷，並不包括顯示已簽到天數和簽到功能。筆者另外添加了這部分功能。

以下代碼不包括源碼，只是筆者另外寫的部分。

html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="css/calendar.css"/>
    <link rel="stylesheet" type="text/css" href="css/mui.css"/>
</head>
<body>
    <script src="js/mui.js" type="text/javascript"></script>
    <script src="js/calendar.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>

css

.calendar-content .chose{
    color: #fff;
    background-color:#2AC845;
    border:0px solid #007AFF;
    border-radius: 25px;
}

js在js/calendar.js后寫入

var cld = new Calendar({
            el: '#box',
            value: '', // 默認為new Date();
            fn: function(obj) {
                console.log(JSON.stringify(obj));
            }
        });
        /*獲取日期*/
        var dateObj = new Date();
        var nowDate=dateObj.getDate();

        /*數組表示已簽到日期*/
        var signList=[{"signDay":"10"},{"signDay":"11"},{"signDay":"12"},{"signDay":"13"}];
        function getJsonObjLength(signList) {
        var Length = 0;
        for (var item in signList) {
            Length++;
        }
        return Length;
        }
        var count = getJsonObjLength(signList);
        var signday = signList[2].signDay;

        var canChooses=document.querySelectorAll(".canChoose");
        console.log(canChooses.length);

        var signedrec=document.querySelector("#signedrec");
        signedrec.innerHTML=count;

            for(i=0;i<nowDate;i++){
                for(var j = 0; j < signList.length; j++){ 
                    if((i+1)==signList[j].signDay){
                        canChooses[i].classList.add("chose");
                    }
                console.log(signList.length);
                console.log(signList[j].signDay);
                }
            }

        
        


        var signbtn = document.querySelector("#sign");
        signbtn.addEventListener('click',function(){
            var today = document.querySelector(".today");
            today.classList.add("chose");
            today.classList.remove("today");
            signedrec.innerHTML=count+1;
        });

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 VUE 日歷簽到小程序日歷簽到簡單的簽到日歷我的Android案例簽到日歷 vue 日歷簽到【原】js 簽到用日歷 JS-日歷簽到簽到日歷效果顯示基於jquery實現日歷簽到功能 php+mysql+jquery日歷簽到