【javascript实操记录】

news2024/10/6 1:43:35

功能描述:

1. 利用split()方法对测试数据进行解析:学科,日期

2. 将测试数据封装成对象数组的格式

3. 使用数组的sort()方法和Date对象,将测试数据按照日期从早到晚进行排序

4. 表格数据的静态填充

5. 距离最近考试的倒计时天数的提醒

代码如下:(这里引入了jquery.js)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js小练习</title>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>ID</th>
                <th>考试科目</th>
                <th>开考日期</th>
            </tr>
        </thead>
        <tbody id="myBody">
            <!-- 具体数据 -->
        </tbody>
    </table>

    <!-- 最近日期的倒计时 -->
    <div style="margin-top: 10px;">
        <h3 id="countdown"></h3>
    </div>

    <!-- 引入jquery.js -->
    <script src="../js/jquery.min.js"></script>

    <script>
        var testData = '数学, 2023-12-23\n英语,2023-11-11\n语文,2023-10-29\n物理,2023-12-27\n化学,2023-09-30\n';
        //1. 将testData数据通过split()进行分割: 学科,日期 ---为一组
        var subject_date = testData.split('\n');
        //2. 注意实际的subject_date最后存放为空,因为末尾的\n
        var length = subject_date.length-1;
        console.log('subject_date中实际的数据数目为:' + length);
        //3. 将subject_date中的每一项数据,以对象数组的形式进行存放
        var objArr = [];
        for(var i=0; i<length; i++){  //此时subject_date每一个数的格式:subject,date
            var subject = subject_date[i].split(',')[0];   //分割, 取前面的学科
            var date = subject_date[i].split(',')[1];      //分割,取后面的日期
            objArr.push({
                subject:`${subject}`,
                date:`${date}`
            });
            //打印出来objArr数组中存放的每一项
            console.log(`-------------objArr[${i}].subject=${objArr[i].subject}`);
            console.log(`-------------objArr[${i}].date=${objArr[i].date}`);
        }
        //4. 比较date,调用数组的sort()方法,按照日期的大小排序
        var sorted = objArr.sort((a, b) => {
            //Date对象存储的是从1970年1月1日午夜(UTC)开始计算的毫秒数
            var dateA = new Date(a.date);  
            var dateB = new Date(b.date);
            //dateA-dateB为正,说明b比a小,交换a,b;dateA-dateB为负数或0,不交换
            return dateA - dateB;  
        });
        //5. 表格数据填充
        for(var i=0; i<sorted.length; i++)
        {
            $('#myBody').append(`<tr>
                <td>${i+1}</td>
                <td>${sorted[i].subject}</td>
                <td>${sorted[i].date}</td>
                </tr>`);
        }

        //6. 获取最近的日期,并转为毫秒数的形式
        var earlist = new Date(objArr[0].date);
        //7. 获取当前的日期(毫秒数)
        var current = new Date();
        //8. 计算日期差异(以毫秒为单位)
        var dateDiff = earlist - current;
        //9. 毫秒数转为天数
        var dayDiff = Math.floor(dateDiff/(1000 * 60 * 60 * 24));
        //10. 输出到页面
        document.getElementById('countdown').innerHTML = `当前最近的考试是${objArr[0].subject}, 还剩${dayDiff}天`;
    </script>
</body>
</html>

运行结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/952498.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

使用 NestJS 和 Prisma 构建 REST API

NestJS是Node.js框架之一&#xff0c;它最近获得了很多开发人员的喜爱和牵引力。本文将教你如何使用NestJS&#xff0c;Prisma&#xff0c;PostgreSQL和Swagger构建后端REST API。 文章目录 介绍您将使用的技术 先决条件假定的知识开发环境 生成 NestJS 项目创建 PostgreSQL 实…

链路聚合原理

文章目录 一、定义二、功能三、负载分担四、分类五、常用命令 首先可以看下思维导图&#xff0c;以便更好的理解接下来的内容。 一、定义 在网络中&#xff0c;端口聚合是一种将连接到同一台交换机的多个物理端口捆绑在一起&#xff0c;形成一个逻辑端口的技术。通过端口聚合&…

数据结构--5.0.1图的存储结构

目录 一、邻接矩阵&#xff08;无向图&#xff09; 二、邻接矩阵&#xff08;有向图&#xff09; 三、邻接矩阵&#xff08;网&#xff09; 四、邻接表&#xff08;无向图&#xff09; 五、邻接表&#xff08;有向图&#xff09; ——图的存储结构相比较线性表与树来说就复…

AIGC全流程赋能:从剧本到宣发,影视内容全新呈现

“猕猴桃”视频平台在今日发布了2023年第二季度财报&#xff0c;首次公布引入AIGC辅助剧本评估。内部数据显示&#xff0c;AIGC帮助提升剧本评估、预算规划等效率超过90%。“猕猴桃”视频平台还通过AIGC技术实现对影视剧的剧情理解&#xff0c;从而改进搜索结果、推荐和用户互动…

kubernetes deploy standalone mysql demo

kubernetes 集群内部署 单节点 mysql ansible all -m shell -a "mkdir -p /mnt/mysql/data"cat mysql-pv-pvc.yaml apiVersion: v1 kind: PersistentVolume metadata:name: mysql-pv-volumelabels:type: local spec:storageClassName: manualcapacity:storage: 5Gi…

IAR 编译优化 #pragma optimize

在IAR工具菜单栏中 点击 【help】-> 【Serach】 搜索optimize #pragma optimize[goal][level][vectorize][disable] 如果想设置优化速度到最高等级,则如下设置即可 #pragma optimizespeed high int SmallAndUsedOften() { /* Do something here. */ }

分布式事务学习笔记

MySQL事务 1、 MySQL事务隔离级别 读未提交 &#xff08;READ UNCOMMITTED&#xff09; &#xff08;存在脏读的问题&#xff09;读已提交&#xff08;READ COMMITTED&#xff09;可重复读&#xff08;REPEATABLE READ&#xff09;串行化&#xff08;SERIALIZABLE&#xff09;…

LCD驱动

一、Linux 下 LCD 驱动简析 1.与裸机的异同 在 Linux 中应用程序最终也是通过操作 RGB LCD 的显存来实现在 LCD 上显示字符、图片等信息&#xff0c;但是Linux系统的内存管理严格&#xff0c;使用显存需要申请&#xff0c;因为虚拟内存的存在&#xff0c;驱动程序设置的显存和应…

python 栈、用栈实现综合计算器

栈的基本介绍 出栈&#xff08;pop&#xff09;示意图 入栈&#xff08;push&#xff09;示意图 栈的应用场景 数组模拟栈 思路分析 代码实现 # 用数组模拟栈 class ArrayStack:def __init__(self, size):self.max_size size # 栈的最大容量self.top -1 # top 表示栈顶…

Python项目实战之《飞机大战游戏》

目录 一、Pygame库包简介 二、Pygame安装 三、项目开发思路 3.1前言 3.2飞机大战开发步骤 一、Pygame库包简介 Pygame是一个基于python的游戏开发库&#xff0c;它提供一系列的工具和接口&#xff0c;使开发人员能够轻松的创建各种类型的游戏&#xff0c;包括2D游戏和简单…

ptmalloc源码分析 - _int_malloc函数实现fastbins(06)

目录 一、_int_malloc内存分配的核心函数 二、bins的管理和chunk的结构 三、_int_malloc函数分配前的两个检查 四、REMOVE_FB原子实现fastbins的链表操作 五、fastbins的具体分配实现 一、_int_malloc内存分配的核心函数 前几章节&#xff0c;我们主要讲解了状态机malloc_…

xml

1.xml 1.1概述【理解】 万维网联盟(W3C) 万维网联盟(W3C)创建于1994年&#xff0c;又称W3C理事会。1994年10月在麻省理工学院计算机科学实验室成立。 建立者&#xff1a; Tim Berners-Lee (蒂姆伯纳斯李)。 是Web技术领域最具权威和影响力的国际中立性技术标准机构。 到目前为…

nginx反向代理 负载均衡

一、反向代理&#xff1a; 1.反向代理介绍&#xff1a; 反向代理&#xff1a;reverse proxy&#xff0c;指的是代理外网用户的请求到内部的指定的服务器&#xff0c;并将数据返回给用户的一种方式&#xff0c;这是用的比较多的一种方式。 Nginx 除了可以在企业提供高性能的web…

从2023蓝帽杯0解题heapSpary入门堆喷

从2023蓝帽杯0解题heapSpary入门堆喷 关于堆喷 堆喷射&#xff08;Heap Spraying&#xff09;是一种计算机安全攻击技术&#xff0c;它旨在在进程的堆中创建多个包含恶意负载的内存块。这种技术允许攻击者避免需要知道负载确切的内存地址&#xff0c;因为通过广泛地“喷射”堆…

三路排序算法(Java 实例代码)

目录 三路排序算法 一、概念及其介绍 二、适用说明 四、Java 实例代码 QuickSort3Ways.java 文件代码&#xff1a; 三路排序算法 一、概念及其介绍 三路快速排序是双路快速排序的进一步改进版本&#xff0c;三路排序算法把排序的数据分为三部分&#xff0c;分别为小于 v&…

blender 火焰粒子

效果展示 创建火焰模型 新建立方体&#xff08;shift A &#xff09;,添加表面细分修改器&#xff08;ctrl 2 &#xff09;&#xff0c;视图层级调整为 3 &#xff0c;这样布线更密集&#xff1b; 右键将模型转换为网格&#xff0c;tab 进入编辑模式&#xff0c;7 切换到顶…

基于 Debian 12 的 Devuan GNU+Linux 5 为软件自由爱好者而生

导读Devuan 开发人员宣布发布 Devuan GNULinux 5.0 “代达罗斯 “发行版&#xff0c;它是 Debian GNU/Linux 操作系统的 100% 衍生版本&#xff0c;不包含 systemd 和相关组件。 Devuan GNULinux 5 基于最新的 Debian GNU/Linux 12 “书虫 “操作系统系列&#xff0c;采用长期支…

Kafka3.0.0版本——手动调整分区副本示例

目录 一、服务器信息二、启动zookeeper和kafka集群2.1、先启动zookeeper集群2.2、再启动kafka集群 三、手动调整分区副本3.1、手动调整分区副本的前提条件3.2、手动调整分区副本的示例需求3.3、手动调整分区副本的示例 一、服务器信息 四台服务器 原始服务器名称原始服务器ip节…

新型安卓恶意软件使用Protobuf协议窃取用户数据

近日有研究人员发现&#xff0c;MMRat新型安卓银行恶意软件利用protobuf 数据序列化这种罕见的通信方法入侵设备窃取数据。 趋势科技最早是在2023年6月底首次发现了MMRat&#xff0c;它主要针对东南亚用户&#xff0c;在VirusTotal等反病毒扫描服务中一直未被发现。 虽然研究…

Linux--VMware的安装和Centos

一、VMware和Linux的关系 二、VMware的安装 VM_ware桌面虚拟机 最新中文版 软件下载 (weizhen66.cn) VMware-Workstation-Lite-16.2.2-19200509-精简安装注册版.7z - 蓝奏云 如果安装不成功&#xff0c;则设置BIOS 三、在VMware中加入Centos 下载地址&#xff1a; CentOS-…