创意时钟
HTML中通过SVG实现Apple Watch简洁风格的时钟动画创建了一个受Apple Watch时间启发的时钟主题SVG动画效果,时分秒分别对应着三个颜色不一样且从小到大依次嵌套的圆环,中心是数字时间,钟表的圆环轮廓是通过SVG矢量图实现的,细节样式是通...
日期选择器
Bootstrap Datepicker日期选择器应用案例,并使用 jquery.dateFormat 格式化日期使用 Bootstrap Datepicker 日期选择器实现的应用案例,并且结合 jquery.dateFormat 格式化显示日期。支持语言、开始时间以及时间格式等多种自定义选项配置。
Sophon倒计时
JavaScript 《三体》版星火倒计时时钟动画效果非常喜欢刘慈欣小说《三体》的银幕版--美版《三体》,尤其吸引我的是 Sophon 的倒计时,所以我抽空制作了自己的版本,通过 SVG 和每个路径点的噪声函数,我得到了一个带星火闪光动画的简化版...
模拟时钟
HTML CSS 设计的时尚模拟数字时钟,支持亮色模式和暗色模式切换基于 HTML、CSS 和 JavaScript创建的一个模拟数字时钟。HTML 代码构建时钟及其显示元素,而 CSS 代码则控制时钟的样式和外观,提供了亮色模式以及暗色模式两种主题风格的切换,...
日期选择器
带示例基于 JavaScript 实现的日期选择器这是一款仅用 JavaScript 实现的轻量级日期选择器插件,提供了 13 种使用场景,每种场景示例均可通过预览功能查看,可用于选择单个、多个以及范围日期。同时,为了让用户可以更加直观的选择日...
时间轴
简单的 HTML CSS 响应式垂直时间轴这段代码是基于 CSS 实现的一个简洁的响应式纵向时间轴,使重要事件节点更具有视觉吸引力并易于阅读,呈现的结果是:纵向的按照从上往下顺序列出的时间轴节点,可用作大事记记录、工作经历等场景。同时在...
日期选择器
HTML 示例中的简单日期选择器jQuery插件一个简单、好用、可定制、轻量级的基于 HTML 和 javascript 实现的日期选择器 jQuery 插件。该插件能以出色的方式选择当前日期、选定日期、特殊日期和一周中的个别日期。它可以直接...
模拟时钟
使用 JavaScript 和 CSS 创建模拟时钟对于以时间为主要关注点的网站来说,实时时钟是一个非常有用的元素。时钟可以根据需要显示世界时间或本地时间。时钟基本上有两种类型:模拟时钟和数字时钟。本教程将介绍如何使用 JavaScript 和 ...
圆形倒计时
基于JS实现的酷炫带进度倒计时的圆形时钟基于JS创建的一个带有进度倒计时的圆形时钟,它能直观地表示时间的流逝,该方法可计算小时、分钟和秒的时间百分比,动态的显示时间,可以在需要视觉效果和动态时钟显示的项目中使用它,能够直观地表示时间的...
时间轴
使用 CSS3 和 Vanilla JS 实现的可折叠时间轴基于 CSS3 和 Vanilla JS 创建可折叠的时间轴,该时间轴支持一键折叠或展开所有时间线项目,也支持单个时间项的折叠与展开,利用该时间轴将帮助你以可视化的组织和交互的方式呈现按时间顺序...
逼真手表
HTML中基于JS+CSS实现逼真的卡西欧 F-91w 手表该 JavaScript 代码可在网页上创建逼真的卡西欧 F-91w 手表展示,根据用户的系统偏好自动调整为浅色或深色模式。手表以 12 小时和 24 小时两种格式显示当前时间,并包含闹钟模式,...
水平时间轴
基于 CSS3 实现的水平滚动时间轴模板本代码使用 CSS3 生成水平方向滚动的时间轴模板,它可以按年份组织事件,展示职业里程碑或者以往经历。该模板以具有视觉吸引力的时间轴布局展示职业历程或项目历史,它非常适合个人作品集、建立或企业网站。