Timesheet.js - 轻松打造炫酷时间表
Timesheet.js - 轻松打造炫酷时间表
前言
在现代网页设计中,时间表是一个常见的元素,用于展示项目进度、历史事件、个人经历等信息。
然而,创建一个既美观又功能强大的时间表并非易事。
幸运的是,Timesheet.js
这款神奇的 JavaScript
开源时间表库为我们提供了一个简洁而强大的解决方案。
本文将详细介绍 Timesheet.js
的特点、使用方法,并通过一个真实的使用案例来展示其强大功能。
介绍
Timesheet.js
是一个轻量级的 JavaScript
库,专门用于创建基于 HTML5
和 CSS3
的时间表。
它无需依赖任何外部框架,如 jQuery
或 Angular.js
,即可快速生成美观的时间表布局。
Timesheet.js
的优势在于其简洁性和用户友好性,仅需几行 JavaScript
代码即可实现功能,同时提供了丰富的自定义选项,允许开发者根据需求进行样式调整。
核心特性
无依赖:不依赖任何外部 JavaScript
框架,减少了项目复杂性和加载时间。
易于使用:通过简单的 JavaScript
代码即可创建时间表,易于上手。
高度可定制:提供了丰富的 CSS
类,方便开发者自定义时间表的外观。
响应式设计:支持移动设备,确保在不同屏幕尺寸上都能良好显示。
官方资源
官网:https://sbstjn.github.io/timesheet.js/
GitHub 仓库:https://github.com/sbstjn/timesheet.js
使用案例
假设我们要为一个在线教育平台创建一个展示学生学习历程的时间表。
这个时间表将展示学生从入学到毕业的各个阶段,包括参加的课程、获得的证书等信息。
步骤 1:引入库文件
首先,在 HTML
文件中引入 Timesheet.js
的 CSS
和 JavaScript
文件。
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/timesheet.js/dist/timesheet.min.css" />
<div id="student-timeline"></div>
<script src="https://cdn.jsdelivr.net/npm/timesheet.js/dist/timesheet.min.js"></script>
步骤 2:准备数据
接下来,准备时间表所需的数据。
在这个案例中,我们将展示一个学生从 2018 年入学到 2022 年毕业的学习历程。
const studentTimelineData = [['09/2018', '06/2019', '入学 & 基础课程学习', 'default'],['09/2019', '06/2020', '专业课程学习', 'ipsum'],['07/2020', '01/2021', '暑期实习', 'dolor'],['09/2020', '06/2021', '高级课程学习', 'lorem'],['07/2021', '01/2022', '毕业设计', 'default'],['06/2022', '09/2022', '毕业 & 就业', 'ipsum']
];
步骤 3:初始化 Timesheet.js
最后,使用 Timesheet.js
初始化时间表,并传入准备好的数据。
<script>const timesheet = new Timesheet('student-timeline', 2018, 2022, studentTimelineData);
</script>
完整代码
将上述代码整合到一个 HTML
文件中,即可创建出一个展示学生学习历程的时间表。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>学生学习历程时间表</title><link rel="stylesheet" href="./timesheet.js/dist/timesheet.min.css" />
</head>
<body><div id="student-timeline"></div><script src="./timesheet.js/dist/timesheet.min.js"></script><script>const studentTimelineData = [['09/2018', '06/2019', '入学 & 基础课程学习', 'default'],['09/2019', '06/2020', '专业课程学习', 'ipsum'],['07/2020', '01/2021', '暑期实习', 'dolor'],['09/2020', '06/2021', '高级课程学习', 'lorem'],['07/2021', '01/2022', '毕业设计', 'default'],['06/2022', '09/2022', '毕业 & 就业', 'ipsum']];const timesheet = new Timesheet('student-timeline', 2018, 2022, studentTimelineData);</script>
</body>
</html>
效果如下
总结
Timesheet.js
是一个非常实用的 JavaScript
时间表库,它以简洁的代码和强大的功能为开发者提供了一个创建时间表的便捷工具。
通过本文的介绍和使用案例,相信你已经对 Timesheet.js
有了基础的了解。
无论是在个人项目还是企业应用中,Timesheet.js
都能帮助你快速创建出美观且功能强大的时间表,提升用户体验。
如果你对 Timesheet.js
感兴趣,不妨尝试在自己的项目中使用它,探索更多可能。
– 欢迎点赞、关注、转发、收藏【我码玄黄】,各大平台同名
相关文章:
Timesheet.js - 轻松打造炫酷时间表
Timesheet.js - 轻松打造炫酷时间表 前言 在现代网页设计中,时间表是一个常见的元素,用于展示项目进度、历史事件、个人经历等信息。 然而,创建一个既美观又功能强大的时间表并非易事。 幸运的是,Timesheet.js 这款神奇的 Java…...
产品经理面试题总结2025【其一】
一、产品理解与定位 1、你如何理解产品经理这个角色? 作为一名互联网产品经理,我理解这个角色的核心在于成为产品愿景的制定者和执行的推动者。具体来说,产品经理是连接市场、用户和技术团队之间的桥梁,负责理解市场需求、用户痛…...
第16章:Python TDD实现多币种货币运算
写在前面 这本书是我们老板推荐过的,我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后,我突然思考,对于测试开发工程师来说,什么才更有价值呢?如何让 AI 工具更好地辅助自己写代码,或许…...
【Web】2025-SUCTF个人wp
目录 SU_blog SU_photogallery SU_POP SU_blog 先是注册功能覆盖admin账号 以admin身份登录,拿到读文件的权限 ./article?filearticles/..././..././..././..././..././..././etc/passwd ./article?filearticles/..././..././..././..././..././..././proc/1…...
C++实现矩阵Matrix类 实现基本运算
本系列文章致力于实现“手搓有限元,干翻Ansys的目标”,基本框架为前端显示使用QT实现交互,后端计算采用Visual Studio C。 目录 Matrix类 1、public function 1.1、构造函数与析构函数 1.2、获取矩阵数值 1.3、设置矩阵 1.4、矩阵转置…...
【GORM】初探gorm模型,字段标签与go案例
GORM是什么? GORM 是一个Go 语言 ORM(对象关系映射)库,它让我们可以使用结构体来操作数据库,而无需编写SQL 语句 GORM 模型与字段标签详解 在 GORM 中,模型是数据库表的抽象表示,字段标签&am…...
html全局遮罩,通过websocket来实现实时发布公告
1.index.html代码示例 <div id"websocket" style"display:none;position: absolute;color:red;background-color: black;width: 100%;height: 100%;z-index: 100; opacity: 0.9; padding-top: 30%;padding-left: 30%; padding-border:1px; "onclick&q…...
基于VSCode+CMake+debootstrap搭建Ubuntu交叉编译开发环境
基于VSCodeCMakedebootstrap搭建Ubuntu交叉编译开发环境 1 基于debootstrap搭建目标系统环境1.1 安装必要软件包1.2 创建sysroot目录1.3 运行debootstrap1.4 挂载必要的虚拟文件系统1.5 复制 QEMU 静态二进制文件1.6 进入目标系统1.7 使用目标系统(以安装zlog为例&a…...
C#中System.Text.Json:从入门到精通的实用指南
一、引言 在当今数字化时代,数据的高效交换与处理成为软件开发的核心环节。JSON(JavaScript Object Notation)凭借其简洁、轻量且易于读写的特性,已然成为数据交换领域的中流砥柱。无论是前后端数据交互,还是配置文件…...
【深度学习】Huber Loss详解
文章目录 1. Huber Loss 原理详解2. Pytorch 代码详解3.与 MSELoss、MAELoss 区别及各自优缺点3.1 MSELoss 均方误差损失3.2 MAELoss 平均绝对误差损失3.3 Huber Loss 4. 总结4.1 优化平滑4.2 梯度较好4.3 为什么说 MSE 是平滑的 1. Huber Loss 原理详解 Huber Loss 是一种结合…...
Maven下载配置
目录 Win下载配置maven的环境变量 Mac下载安装配置环境变量 MavenSetting.xml文件配置 Win 下载 https://maven.apache.org/ 在主页面点击Download 点击archives 最好不要下载使用新版本,我使用的是maven-3.6.3,我们点击页面下方的archives࿰…...
JS基础(5):运算符和语句
一.运算符 1.赋值运算符 加减乘除都是一样的,,-,*,/ 2.一元运算符:经常用来计数 自增: 每次只能加一 自减:-- 前置自增 后置自增 结…...
游戏引擎学习第81天
仓库:https://gitee.com/mrxiao_com/2d_game_2 或许我们应该尝试在地面上添加一些绘图 在这段时间的工作中,讨论了如何改进地面渲染的问题。虽然之前并没有专注于渲染部分,因为当时主要的工作重心不在这里,但在实现过程中,发现地…...
网络安全 | 什么是正向代理和反向代理?
关注:CodingTechWork 引言 在现代网络架构中,代理服务器扮演着重要的角色。它们在客户端和服务器之间充当中介,帮助管理、保护和优化数据流。根据代理的工作方向和用途,代理服务器可分为正向代理和反向代理。本文将深入探讨这两种…...
前缀和——模板 二维前缀和
一.题目描述 【模板】二维前缀和_牛客题霸_牛客网 二.题目解析 这道题和上一道题有点异曲同工之妙。输入一个m行n列的矩阵,然后进行q次操作,每次操作输入4个数,作为两个点的坐标,计算这两个点为对角线的矩阵的和。 三.算法原理 …...
oracle使用case when报错ORA-12704字符集不匹配原因分析及解决方法
问题概述 使用oracle的case when函数时,报错提示ORA-12704字符集不匹配,如下图,接下来分析报错原因并提出解决方法。 样例演示 现在有一个TESTTABLE表,本表包含的字段如下图所示,COL01字段是NVARCHAR2类型࿰…...
高等数学学习笔记 ☞ 定积分与积分公式
1. 定积分的基本概念 1.1 定积分的定义 1. 定义:设函数在闭区间上有界。在闭区间上任意插入若干个分点,即, 此时每个小区间的长度记作(不一定是等分的)。然后在每个小区间上任意取,对应的函数值为。 为保证每段的值(即矩形面积)无…...
MLMs之Agent:Phidata的简介、安装和使用方法、案例应用之详细攻略
MLMs之Agent:Phidata的简介、安装和使用方法、案例应用之详细攻略 目录 Phidata简介 Phidata安装和使用方法 1、安装 2、使用方法 (1)、认证 (2)、创建 Agent (3)、运行 Agent (4)、Agent Playground Phidata 案例应用 1、多工具 Agent 2、多模态 Agent …...
如何在不暴露MinIO地址的情况下,用Spring Boot与KKFileView实现文件预览
在现代Web应用中,文件预览是一项常见且重要的功能。它允许用户在不上传或下载文件的情况下,直接在浏览器中查看文件内容。然而,直接将文件存储服务(如MinIO)暴露给前端可能会带来安全风险。本文将介绍如何在不暴露MinI…...
ESP8266固件烧录
一、烧录原理 1、引脚布局 2、引脚定义 3、尺寸封装 4、环境要求 5、接线方式 ESP8266系列模块集成了高速GPI0和外围接口,这可能会导致严重的开关噪声。如果某些应用需要高功率和EMI特性,建议在数字I/0线上串联10到100欧姆。这可以在切换电源时抑制过冲…...
Python 模拟真人鼠标轨迹算法 - 防止游戏检测
一.简介 鼠标轨迹算法是一种模拟人类鼠标操作的程序,它能够模拟出自然而真实的鼠标移动路径。 鼠标轨迹算法的底层实现采用C/C语言,原因在于C/C提供了高性能的执行能力和直接访问操作系统底层资源的能力。 鼠标轨迹算法具有以下优势: 模拟…...
三天急速通关Java基础知识:Day1 基本语法
三天急速通关JAVA基础知识:Day1 基本语法 0 文章说明1 关键字 Keywords2 注释 Comments2.1 单行注释2.2 多行注释2.3 文档注释 3 数据类型 Data Types3.1 基本数据类型3.2 引用数据类型 4 变量与常量 Variables and Constant5 运算符 Operators6 字符串 String7 输入…...
免费使用 Adobe 和 JetBrains 软件的秘密
今天想和大家聊聊如何利用 Edu 教育邮箱免费使用 Photoshop、Illustrator 等 Adobe 系列软件,以及 JetBrains 开发工具。 首先,Adobe 的软件是设计师的必备工具。无论是处理图像的 Photoshop,还是进行矢量设计的 Illustrator,它们…...
Pytorch 自学笔记(三):利用自定义文本数据集构建Dataset和DataLoader
Pytorch 自学笔记(三) 1. Dataset与DataLoader1.1 torch.utils.data.Dataset1.2 torch.utils.data.DataLoader Pytorch 自学笔记系列的第三篇。针对Pytorch的Dataset和DataLoader进行简单的介绍,同时,介绍如何使用自定义文本数据集…...
gradle项目的创建和基本结构简介
文章目录 创建gradle项目(命令行)创建gradle项目(IDEA)项目基本结构和功能Gradle 构建流程测试类体验 创建gradle项目(命令行) yangMacdeMac-mini gradleStudy % gradle init Starting a Gradle Daemon (s…...
wow-agent---Day3 Zigent 智能代理开发框架
这个框架是课程讲解的,但资料比较少,觉得框架比较小众,所以这里只分析代码,打算把更多的精力放在metagpt的学习上,毕竟还是要学教为主流的框架,这对后续维护升级都有帮助,当然感兴趣作为研究&am…...
python 入门
1. Python 概述 1.1 简介 python 是一种面向对象的解释型编程语言,由吉多范罗苏姆开发; 1991 年,公开发行版发布; 因其可以将其他语言制作的模块轻松联接在一起,又被称作胶水语言; 1.2 优点 简单易学&…...
sentinel微服务保护
学习链接 SpringCloudRabbitMQDockerRedis搜索分布式 文章目录 学习链接1.初识Sentinel1.1.雪崩问题及解决方案1.1.1.雪崩问题1.1.2.超时处理1.1.3.仓壁模式1.1.4.断路器1.1.5.限流1.1.6.总结 1.2.服务保护技术对比1.3.Sentinel介绍和安装1.3.1.初识Sentinel官网地址github地址…...
接口测试Day10-封装IHRM登录
-登录接口 普通方式实现 登录接口对象层 思路: 动态变化的,写入参数固定不变,直接写到方法实现内响应结果,通过返回值 return 分析: 封装实现: 登录接口测试用例层 封装断言方法 1、创建 文件 assert_uti…...
什么是IP地址、子网掩码、网关、DNS
简单解释 IP地址在网络中用于标识一个节点(或者网络设备的接口) IP地址用于IP报文在网络中的寻址 一个IPv4地址有32 bit。 IPv4地址通常采用“点分十进制”表示。 IPv4地址范围:0.0.0.0~255.255.255.255 网络部分:用来标识一个网络,代表IP地址所属网络。 主机部分:…...
python编程-OpenCV(图像读写-图像处理-图像滤波-角点检测-边缘检测)角点检测
角点检测(Corner Detection)是计算机视觉和图像处理中重要的步骤,主要用于提取图像中的关键特征,以便进行后续的任务,比如图像匹配、物体识别、运动跟踪等。下面介绍几种常用的角点检测方法及其应用。 1. Harris角点检…...
软路由系统iStoreOS 一键安装 docker compose
一键安装命令 大家好!今天我来分享一个快速安装 docker-compose 的方法。以下是我常用的命令,当前版本是 V2.32.4。如果你需要最新版本,可以查看获取docker compose最新版本号 部分,获取最新版本号后替换命令中的版本号即可。 w…...
Invicti-Professional-V25.1
01 更新介绍 此更新包括对内部代理的更改。内部扫描代理的当前版本为 25.1.0。内部身份验证验证程序代理的当前版本为 25.1.0。#新功能现在,单击扫描摘要屏幕中的预设扫描图标会将您重定向到具有过滤视图的 “最近扫描” 页面,从而改进导航和对相关扫描…...
【QT】: 初识 QWidget 控件 | QWidget 核心属性(API) | qrc 文件
🔥 目录 1. 控件概述 控件体系的发展阶段 2. QWidget 核心属性 2.1 核心属性概览2.2 用件可用(Enabled) 2.3 坐标系(Geometry) **实例 1: 控制按钮的位置**实例 2: 表白 程序 2.4 窗口标题(windowTiltle&a…...
Spring WebFlux
文章目录 一、概述1、Spring体系定位2、Spring MVC和WebFlux差异 二、入门1、依赖2、ReactorHttpHandlerAdapter(main启动)3、DispatcherHandler(SpringWebFlux启动)4、WebFilter 三、DispatcherHandler理解1、handle 前置知识&am…...
【AI | pytorch】torch.polar的使用
一、torch.polar的使用 torch.polar 是 PyTorch 中用来生成复数张量的一个函数,但它与数学中的复数表达式 ( z re^{i\theta} ) 是等价的。 具体来说,torch.polar(abs, angle) 接受两个实数张量参数: abs:表示复数的模长&#…...
AWTK fscript 中的 输入/出流 扩展函数
fscript 是 AWTK 内置的脚本引擎,开发者可以在 UI XML 文件中直接嵌入 fscript 脚本,提高开发效率。本文介绍一下 fscript 中的 iostream 扩展函数 1.iostream_get_istream 获取输入流对象。 原型 iostream_get_istream(iostream) > object示例 va…...
【多线程】线程池
一、什么是线程池 线程池(Thread Pool)是一种多线程并发执行的设计模式,它通过维护一个线程集合来执行多个任务,避免频繁地创建和销毁线程,提高系统性能和响应速度。 就好比如你经营了一家餐饮店,你名下有…...
小结:路由器配置和管理 RIP协议
华为路由器中配置和管理 RIP(Routing Information Protocol)的相关指令主要分为以下几个部分:基础配置指令、接口配置指令、路由控制指令和调试指令。以下是总结: 1. 启用 RIP 协议 [Huawei] rip 1rip 1:表示创建并启…...
基于海思soc的智能产品开发(高、中、低soc、以及和fpga的搭配)
【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing 163.com】 市场上关于图像、音频的soc其实非常多,这里面有高、中、低档,开发方式也不相同。之所以会这样,有价格的因素&am…...
于灵动的变量变幻间:函数与计算逻辑的浪漫交织(下)
大家好啊,我是小象٩(๑ω๑)۶ 我的博客:Xiao Xiangζั͡ޓއއ 很高兴见到大家,希望能够和大家一起交流学习,共同进步。 这一节我们主要来学习单个函数的声明与定义,static和extern… 这里写目录标题 一、单个函数…...
偷偷的学Java
序章:为何要偷偷学Java? • Java,不仅仅是一种编程语言 • 偷偷学Java,快速提升你的竞争力 •Java学习秘籍 第一章:Java的神秘面纱 •Java的起源与发展历程 •Java的生态系统与应用场景 • Java与其他编程语言的…...
以单用户模式启动 Linux 的方法
注:本文为 “Linux 启动单用户模式” 相关文章合辑。 未整理去重。 以单用户模式启动 linux 的三种方法 作者: Magesh Maruthamuthu 译者: LCTT Xiaobin.Liu 2020-05-03 23:01 单用户模式,也被称为维护模式,超级用户…...
【AI论文】生成式视频模型是否通过观看视频学习物理原理?
摘要:AI视频生成领域正经历一场革命,其质量和真实感在迅速提升。这些进步引发了一场激烈的科学辩论:视频模型是否学习了能够发现物理定律的“世界模型”,或者,它们仅仅是复杂的像素预测器,能够在不理解现实…...
【有啥问啥】Contrastive Captioners(CoCa):对比式图像描述模型——图像-文本基础模型的新范式
Contrastive Captioners(CoCa):对比式图像描述模型——图像-文本基础模型的新范式 引言 随着深度学习技术的发展,多模态模型在处理视觉和语言任务方面的能力逐渐增强。特别是大规模预训练模型的兴起,使得这些模型可以快速迁移到许多下游任务…...
Python(十七)excel指定列自动翻译成英文
前言 本章主要讲述在excel的指定列后面添加一列,并翻译成英文 一、效果图 二、代码 实际需求: # -*- codeing utf-8 -*- # time: 2025/1/16 16:32 # Author : Mikasa # # Aim:自动将客户发的货物清单里的商品名称,翻译成英文…...
【论文投稿】探秘计算机视觉算法:开启智能视觉新时代
目录 引言 一、计算机视觉算法基石:图像基础与预处理 二、特征提取:视觉信息的精华萃取 三、目标检测:从图像中精准定位目标 四、图像分类:识别图像所属类别 五、语义分割:理解图像的像素级语义 六、计算机视觉…...
【机器学习实战入门】使用LSTM机器学习预测股票价格
机器学习在股票价格预测中有重要的应用。在这个机器学习项目中,我们将讨论如何预测股票的收益。这是一个非常复杂的任务,充满了不确定性。我们将会把这个项目分成两部分进行开发: 首先,我们将学习如何使用 LSTM 神经网络预测股票…...
(一)相机标定——四大坐标系的介绍、对应转换、畸变原理以及OpenCV完整代码实战(C++版)
一、四大坐标系介绍 1,世界坐标系 从这个世界(world)的视角来看物体 世界坐标系是3D空间坐标,每个点的位置用 ( X w , Y w , Z w ) (X_w,Y_w,Z_w) (Xw,Yw,Zw)表示 2,相机坐标系 相机本身具有一个坐标系&…...
Bootstrap 下拉菜单
Bootstrap 下拉菜单 Bootstrap 是一个流行的前端框架,它提供了许多预构建的组件,其中之一就是下拉菜单。下拉菜单是一个交互式元素,允许用户从一系列选项中选择一个。在本篇文章中,我们将详细介绍如何在 Bootstrap 中创建和使用下…...