基于jquery实现日历签到功能

第一步：准备工作

在实现日历签到功能之前，我们需要先准备一些工作：

安装jQuery：在HTML文件中引入jQuery的库文件

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

编写HTML结构：

<div class="calendar"></div>

确定签到状态：签到状态一般为两种状态，已签到和未签到状态，我们可以用CSS样式来表示这两种状态，比如，未签到状态为灰色，已签到状态为橙色。

.today { //今天
    color: #fff;
    background-color: #17beff;
    border-radius: 50%;
}

.sign-in { //已签到
    color: #fff;
    background-color: #FF7200;
    border-radius: 50%;
}

.not-sign-in { //未签到
    color: #666;
    border-radius: 50%;
}

第二步：实现日历签到功能

获取当前日期，并且呈现在日历中。签到日历中最主要的部分就是日历主体，如何构建一个日历呢？我们可以通过JavaScript来构建。

function drawCalendar(){
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth()+1;
    var date = today.getDate();
    $(".calendar").html("");
    $(".calendar").append('<div class="title">'+year+'年'+month+'月</div>');
}

显示符合规则的日期，并且判断是否签到。我们可以通过ajax获取已经签到的日期列表

function drawCalendar(){
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth()+1;
    var date = today.getDate();

    // ajax获取已经签到的日期列表
    var signInList = ["2021-01-01", "2021-01-02"];

    $(".calendar").html("");
    $(".calendar").append('<div class="title">'+year+'年'+month+'月</div>');
    // To-Do： 显示符合规则的日期，并且判断是否签到
}

我们可以通过对比当前日期，以及已经签到的日期，来判断哪些日期已经签到了，并且更新日历的样式。

function drawCalendar(){
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth()+1;
    var date = today.getDate();

    // ajax获取已经签到的日期列表
    var signInList = ["2021-01-01", "2021-01-02"];

    $(".calendar").html("");
    $(".calendar").append('<div class="title">'+year+'年'+month+'月</div>');

    // 构建日历表格
    var table = $('<table></table>').addClass('table');
    var weekHead = '<thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead>';
    table.append(weekHead);

    // 构建日历的主体内容
    var tbody = $('<tbody></tbody>');

    var days = new Date(year, month, 0).getDate(); //获取本月有多少天
    var week = new Date(year, month-1, 1).getDay(); //获取本月第一天是周几
    var tr = $('<tr></tr>');
    for(var i = 0; i<week; i++){
        tr.append('<td></td>');
    }
    for(var i = 1; i<=days; i++){
        var td = $('<td></td>');
        if(signInList.includes(year+'-'+month+'-'+i)){
            td.addClass('sign-in').html(i);
        }else if(i==date){
            td.addClass('today').html(i);
        }else{
            td.addClass('not-sign-in').html(i);
        }
        tr.append(td);
        if(i%7==0){
            tbody.append(tr);
            tr = $('<tr></tr>');
        }
    }
    tbody.append(tr);
    table.append(tbody);
    $(".calendar").append(table);
}

第三步：完整代码

HTML代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>日历签到功能</title>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="calendar.js"></script>
</head>
<body>
    <div class="calendar"></div>
</body>
</html>

CSS代码：

.today {
    color: #fff;
    background-color: #17beff;
    border-radius: 50%;
}

.sign-in {
    color: #fff;
    background-color: #FF7200;
    border-radius: 50%;
}

.not-sign-in {
    color: #666;
    border-radius: 50%;
}

JavaScript代码：

$(document).ready(function(){
    drawCalendar();
});

function drawCalendar(){
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth()+1;
    var date = today.getDate();

    // ajax获取已经签到的日期列表
    var signInList = ["2021-01-01", "2021-01-02"];

    $(".calendar").html("");
    $(".calendar").append('<div class="title">'+year+'年'+month+'月</div>');

    // 构建日历表格
    var table = $('<table></table>').addClass('table');
    var weekHead = '<thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead>';
    table.append(weekHead);

    // 构建日历的主体内容
    var tbody = $('<tbody></tbody>');

    var days = new Date(year, month, 0).getDate(); //获取本月有多少天
    var week = new Date(year, month-1, 1).getDay(); //获取本月第一天是周几
    var tr = $('<tr></tr>');
    for(var i = 0; i<week; i++){
        tr.append('<td></td>');
    }
    for(var i = 1; i<=days; i++){
        var td = $('<td></td>');
        if(signInList.includes(year+'-'+month+'-'+i)){
            td.addClass('sign-in').html(i);
        }else if(i==date){
            td.addClass('today').html(i);
        }else{
            td.addClass('not-sign-in').html(i);
        }
        tr.append(td);
        if(i%7==0){
            tbody.append(tr);
            tr = $('<tr></tr>');
        }
    }
    tbody.append(tr);
    table.append(tbody);
    $(".calendar").append(table);
}

上面代码的功能就是实现一个基于jquery实现日历签到功能的完整攻略，代码注释详细，实现方便，下面我们来看下实现过程中的示例的应用。

示例1：

现在我们用ajax来获取签到的日期列表，如下所示：

function drawCalendar(){
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth()+1;
    var date = today.getDate();

    // ajax获取已经签到的日期列表
    $.ajax({
        url: "signInList.json",
        async: false,
        success: function(data){
            var signInList = data;
        }
    });

    $(".calendar").html("");
    $(".calendar").append('<div class="title">'+year+'年'+month+'月</div>');

    // 构建日历表格
    var table = $('<table></table>').addClass('table');
    var weekHead = '<thead><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr></thead>';
    table.append(weekHead);

    // 构建日历的主体内容
    var tbody = $('<tbody></tbody>');

    var days = new Date(year, month, 0).getDate(); //获取本月有多少天
    var week = new Date(year, month-1, 1).getDay(); //获取本月第一天是周几
    var tr = $('<tr></tr>');
    for(var i = 0; i<week; i++){
        tr.append('<td></td>');
    }
    for(var i = 1; i<=days; i++){
        var td = $('<td></td>');
        if(signInList.includes(year+'-'+month+'-'+i)){
            td.addClass('sign-in').html(i);
        }else if(i==date){
            td.addClass('today').html(i);
        }else{
            td.addClass('not-sign-in').html(i);
        }
        tr.append(td);
        if(i%7==0){
            tbody.append(tr);
            tr = $('<tr></tr>');
        }
    }
    tbody.append(tr);
    table.append(tbody);
    $(".calendar").append(table);
}

在HTML代码中的calendar.js文件中，我们通过ajax获取signInList.json文件中的已经签到的日期列表，并且通过上述代码，生成签到日历。

存放已经签到的日期列表的signInList.json文件内容如下:

["2021-01-01", "2021-01-02", "2021-01-03", "2021-01-04"]

示例2：

现在，我们希望用户点击签到按钮之后，可以将今天的日期添加到signInList.json文件中。

修改calendar.js中的代码，如下所示：

$(document).ready(function(){
    drawCalendar();

    $(".calendar").on("click", ".not-sign-in", function(){
        signIn($(this));
    })
});

function signIn(obj){
    // 获取当前日期
    var today = new Date();
    var year = today.getFullYear();
    var month = today.getMonth()+1;
    var date = today.getDate();

    // 添加到signInList.json文件中
    $.ajax({
        url: "signInList.json",
        async: false,
        success: function(data){
            var signInList = data;
            // 判断今天是否已经签到，如果没有签到则添加
            if(!signInList.includes(year+'-'+month+'-'+date)){
                signInList.push(year+'-'+month+'-'+date);
            }
            $.ajax({
                type: "POST",
                url: "saveSignInList.php",
                data: {signInList: JSON.stringify(signInList)},
                async: false,
                success: function(data){
                   obj.addClass('sign-in').removeClass('not-sign-in');
                   obj.html(date);
                }
            });
        }
    });
}

通过上述代码，我们可以实现向signInList.json文件中添加今天的日期，并且返回信息更新签到日历。

但是，在这之前，我们需要将signInList.json文件中的内容进行更改，而且添加到signInList.json文件中的日期并不是持久化的。因此我们需要通过php文件来保存signInList.json文件的更改，如下所示：

<?php
$file = "signInList.json";
if(isset($_POST['signInList'])){
    $signInList = json_decode($_POST['signInList']);
    $json = json_encode($signInList, JSON_UNESCAPED_UNICODE);
    file_put_contents($file, $json);
    echo 'ok';
}
?>

在上述php文件中，我们获取到通过ajax传递进来的signInList字符串，将其解析成数据，并且用file_put_contents()函数来将其保存为signInList.json文件内容。

注意：

本文的实例为了便于演示，没有使用数据库来存储数据，而是将数据存在了signInList.json文件中。
在使用ajax进行数据更新时，安全性、并发性的问题需要考虑到。
signInList.json文件需要保证可写权限才可以进行写入。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：基于jquery实现日历签到功能 - Python技术站

基于jquery实现日历签到功能

相关文章