1. Python技术站首页
  2. jquery

基于jquery实现日历签到功能

• jquery

第一步：准备工作

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

  1. 安装jQuery： 在HTML文件中引入jQuery的库文件
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  1. 编写HTML结构：
<div class="calendar"></div>
  1. 确定签到状态：签到状态一般为两种状态，已签到和未签到状态，我们可以用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%;
}

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

  1. 获取当前日期，并且呈现在日历中。签到日历中最主要的部分就是日历主体，如何构建一个日历呢？我们可以通过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>');
}
  1. 显示符合规则的日期，并且判断是否签到。我们可以通过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文件内容。

注意：

  1. 本文的实例为了便于演示，没有使用数据库来存储数据，而是将数据存在了signInList.json文件中。

  2. 在使用ajax进行数据更新时，安全性、并发性的问题需要考虑到。

  3. signInList.json文件需要保证可写权限才可以进行写入。

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

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年5月28日
下一篇 2023年5月28日

相关文章

  • jQWidgets jqxEditor focus()方法

    jQWidgets jqxEditor focus()方法详解 jQWidgets是一个基于jQuery的UI组件库，提供了丰富UI组件和工具包。jqxEditor是Widgets组件于实现富文本编辑器的组件。本文将详细介绍jqxEditor的focus()方法，包括其作用、语法和示例。 jqxEditor focus()方法的基本语法 jqxEditor的…

    jquery 2023年5月10日
    00

  • JQuery 获取一个元素的第n层父级

    要获取一个元素的第n层父级，我们可以使用JQuery中的parent()方法或parents()方法。 使用parent()方法获取第n层父元素 parent()方法用于获取匹配元素的直接父元素，我们可以多次调用parent()方法来获取指定层数的父元素，其中调用parent()方法的次数就代表了需要获取的层数。 下面是一个获取第3层父元素的示例： <…

    jquery 2023年5月12日
    00

  • jQWidgets jqxRating singleVote属性

    针对“jQWidgets jqxRating singleVote属性”的介绍，我们从以下几个方面进行讲解。 jqxRating组件 jqxRating组件是一款基于jQuery和jqWidgets框架的评分组件，它通常用于网站或应用程序的评分功能中。该组件提供了丰富的属性和事件，可以帮助我们轻松创建高度定制化的评分组件。 在使用该组件时，我们需要通过引入j…

    jquery 2023年5月11日
    00

  • Javaweb使用cors完成跨域ajax数据交互

    下面是一份关于Javaweb使用cors完成跨域ajax数据交互的攻略。 什么是跨域 跨域是指一个浏览器中从一个域名的网页去请求另一个域名的资源，如请求资源的协议（HTTP或HTTPS）或端口不同于当前页面所在的URL的域。这种情况通常叫做“跨域请求”。 CORS是什么 CORS（Cross-Origin Resource Sharing）是一种机制，允许W…

    jquery 2023年5月27日
    00

  • javascript向后台传送相同属性的参数即数组参数

    当需要将数组作为参数传递给后台时，可以使用JavaScript的“扩展语法”（Spread Syntax）来传递参数。这个方法可以将一个数组展开为多个单独的参数，然后传递给函数。 例如，如果想将名字为“Anna”和“John”的用户信息传递给后台，可以创建一个包含对象的数组，然后使用扩展语法将每个对象的属性展开成一个单独的参数。 示例1： const use…

    jquery 2023年5月28日
    00

  • jQuery的三种bind/One/Live/On事件绑定使用方法

    jQuery是目前使用最广泛的JavaScript库之一，它既易于学习、使用，同时也提供了丰富的事件绑定函数，其中包括 bind()、one()、live() 和 on() 等。本文将详细介绍这四个事件绑定方法的使用方法及其区别。 bind() bind()是最基本的事件绑定方法，它可以为指定的元素绑定一个或多个事件处理程序。使用 bind() 方法时需要指…

    jquery 2023年5月27日
    00

  • jQWidgets jqxNavBar minimized属性

    以下是关于 jQWidgets jqxNavBar 组件中 minimized 属性的详细攻略。 jQWidgets jqxNavBar minimized 属性 jQWidgets jqxNavBar 组件的 minimized 属性用设置航栏是否处于最小化状态。属性可以是布尔值。 语法 $(‘#navbar’).jqxNavBar({ minimized…

    jquery 2023年5月12日
    00

  • jQWidgets jqxGauge RadialGauge enable()方法

    以下是关于“jQWidgets jqxGauge RadialGauge enable()方法”的完整攻略，包含两个示例说明： 方法简介 jqxGauge 控件的 RadialGauge 类型的 enable() 方法用于启用仪表盘。该方法的语法如下： $("#gauge").jqxGauge(‘enable’); 在上述代码中，#gau…

    jquery 2023年5月10日
    00
合作推广
合作推广
分享本页
返回顶部