HTML/JS实现漂亮的时钟效果(附带源码)

实例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>漂亮的时钟效果</title>
<link href="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" type="text/css"><div class="digital-clock"><i class="fas fa-ellipsis-v uil uil-ellipsis-v dot-menu-btn" style="color:#fff" id="active-menu"></i><ul class="dot-menu" id="active-menu"><li class="menu-item" id="active-menu"><span class="clock-format-text" id="active-menu">24-Hour Format</span><div class="format-switch-btn" id="active-menu" date-format="12"></div></li></ul><div class="time"><span class="hours">00</span><span class="dots">:</span><span class="minutes">00</span><div class="right-side"><span class="period">AM/PM</span><span class="seconds">00</span></div></div><div class="calender"><span class="month-name">Month</span>,<span class="day-name">Day</span><span class="day-num">00</span></div>
</div>
<style>* {font-family: 'Poppins', sans-serif;margin: 0;padding: 0;box-sizing: border-box;}body {min-height: 100vh;display: flex;justify-content: center;align-items: center;background: #2e2e44;}.digital-clock {position: relative;color: #fff;background: #2e2e44;width: 425px;padding: 20px 45px;box-shadow: 0 5px 25px rgba(14, 21, 37, 0.8);border-radius: 10px;display: flex;justify-content: center;align-items: center;flex-direction: column;}.digital-clock:before {content: '';position: absolute;background: linear-gradient(45deg, #24ff6d, #2f93f1, #ff5e9a);background-size: 200% 200%;top: -5px;left: -5px;bottom: -5px;right: -5px;z-index: -1;filter: blur(40px);animation: glowing 10s ease infinite;}@keyframes glowing {0% {background-position: 0 50%;}50% {background-position: 100% 50%;}100% {background-position: 0 50%;}}.time {position: relative;display: flex;justify-content: center;align-items: center;}.hours,.dots,.minutes {display: flex;justify-content: center;align-items: center;font-weight: 600;padding: 0 10px;line-height: 125px;}.hours,.minutes {font-size: 6.5em;width: 125px;}.dots {font-size: 5em;color: #929292;}.hours {background: -webkit-linear-gradient(90deg, #634dff, #5fd4ff);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.minutes {background: -webkit-linear-gradient(90deg, #ff5e9e, #ffb960);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.right-side {position: relative;display: flex;justify-content: center;align-items: center;flex-direction: column;margin-left: 10px;}.period,.seconds {font-size: 1.2em;font-weight: 500;}.period {transform: translateY(-20px);background: -webkit-linear-gradient(90deg, #f7b63f, #faf879);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.seconds {transform: translateY(16px);background: -webkit-linear-gradient(90deg, #24ff6d, #2f93f1);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.calender {display: flex;justify-content: center;align-items: center;font-size: 1.3em;font-weight: 500;margin-bottom: 5px;background: -webkit-linear-gradient(90deg, #ae4af6, #ff98d1);-webkit-text-fill-color: transparent;-webkit-background-clip: text;}.day-name,.day-num,.year {margin-left: 8px;}.dot-menu-btn {position: absolute;top: 0;right: 0;margin: 10px;color: #efefef;font-size: 1.5em;cursor: pointer;}.dot-menu {z-index: 999;position: absolute;top: 7px;right: 5px;list-style: none;background: #353e54;padding: 10px 20px;border-radius: 5px;box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);visibility: hidden;opacity: 0;transition: 0.4s ease;}.dot-menu.active {visibility: visible;opacity: 1;}.menu-item {display: flex;justify-content: center;align-items: center;}.clock-format-text {color: #efefef;font-size: 0.9em;margin-right: 20px;}.format-switch-btn {width: 35px;height: 15px;background: #485470;border-radius: 75px;box-shadow: inset 2px 2px 4px rgba(255, 255, 255, 0.1),inset -2px -2px 4px rgba(0, 0, 0, 0.2);cursor: pointer;display: flex;justify-content: center;align-items: center;}.format-switch-btn:before {content: '';position: absolute;width: 14px;height: 14px;background: #ff5e9a;border-radius: 50%;box-shadow: 0 5px 25px #ff5e9a;transform: translateX(-10px);transition: 0.4s ease;transition-property: background, transform;}.format-switch-btn.active:before {background: #0bff8d;box-shadow: 0 5px 25px #0bff8d;transform: translateX(10px);}
</style><script>//js for switch clock formatconst formatSwitchBtn = document.querySelector(".format-switch-btn");formatSwitchBtn.addEventListener("click", () => {formatSwitchBtn.classList.toggle("active");var formatValue = formatSwitchBtn.getAttribute("date-format");if (formatValue === "12") {formatSwitchBtn.setAttribute("date-format", "24");}else {formatSwitchBtn.setAttribute("date-format", "12");}});//Get Current Time In Javascriptfunction clock() {var today = new Date();var hours = today.getHours();var minutes = today.getMinutes();var seconds = today.getSeconds();let period = "AM";//set the time periodif (hours >= 12) {period = "PM";}//set 12 hour clock formatvar formatValue = formatSwitchBtn.getAttribute("date-format");if (formatValue === "12") {hours = hours > 12 ? hours % 12 : hours;}//add 0 for the value lower than 10if (hours < 10) {hours = "0" + hours;}if (minutes < 10) {minutes = "0" + minutes;}if (seconds < 10) {seconds = "0" + seconds;}document.querySelector(".hours").innerHTML = hours;document.querySelector(".minutes").innerHTML = minutes;document.querySelector(".period").innerHTML = period;document.querySelector(".seconds").innerHTML = seconds;}var updateClock = setInterval(clock, 1000);// get the date in jsvar today = new Date();const dayNum = today.getDate();const year = today.getFullYear();const dayName = today.toLocaleString("default", { weekday: "long" });const monthName = today.toLocaleString("default", { month: "short" });document.querySelector(".month-name").innerHTML = monthName;document.querySelector(".day-name").innerHTML = dayName;document.querySelector(".day-num").innerHTML = dayNum;// document.querySelector(".year").innerHTML = year;//js for dot menu toglleconst dotmenuBtn = document.querySelector(".dot-menu-btn");const dotMenu = document.querySelector(".dot-menu");dotmenuBtn.addEventListener("click", () => {dotMenu.classList.toggle("active");});document.addEventListener("click", (e) => {if (e.target.id !== "active-menu") {dotMenu.classList.remove("active");}});
</script>
  • <!DOCTYPE html>声明了文
  • <meta>标签用于设置角色集和视口。
  • <title>
  • <style>标签包含了CSS
  • display: flex;和其他CS
  • <div> <div>
  • <script>标签包
  • updateClock
  • setInterval(updateClock, 1000);每隔一秒updateClock函数,以

这个时钟效果比较简单,但已经足够漂亮并且可以正常运行。你可以根据需要对样式进行进一步的美化和定制。

希望你也学会了,更多好玩的漂亮时钟代码请来二当家的素材网:https://www.erdangjiade.com

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

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

相关文章

wsl下安装ros2问题: Unable to locate package ros-humble-desktop 解决方案

❗ 问题 在wsl&#xff08;Ubuntu 22.04版本&#xff09;下安装ros的过程中&#xff0c;在执行命令 $ sudo apt install ros-humble-desktop一直弹出报错&#xff1a;Unable to locate package ros-humble-desktop 前面设置编码和添加源的过程中一直没有出现其他问题&#…

react mui textfield marquee 跑马灯效果实现

网上找了一圈包括stackoverflow, 也没有找到mui textfield marquee的实现方式&#xff0c;结合gpt实现了下&#xff0c;效果是&#xff0c;如果这个文字不超过textfield本身&#xff0c;则不滚动&#xff0c;否则在鼠标悬浮的时候滚动&#xff0c;并且滚动的距离应该是比较恰到…

C++ transform算法中toupper的使用

C transform算法中toupper的使用 前言 用到这样一个函数&#xff0c;将小写字符串转为大写。 // 一开始个人是这样写的&#xff0c;这样没问题 std::transform(res.begin(), res.end(), res.begin(),[](unsigned char c) { return std::toupper(c); }); // 然后&#xff0c;…

游泳耳机入耳式好,还是骨传导好?游泳听音乐最好的耳机推荐

在游泳馆或海边&#xff0c;热爱游泳的人们在水中尽情畅游&#xff0c;享受着清凉的水流和游动的乐趣。为了让游泳体验更上一层楼&#xff0c;戴上专为游泳设计的耳机成为不可或缺的一环。游泳耳机不仅防水&#xff0c;还能让你在畅游的同时&#xff0c;尽情享受高质量的音乐&a…

Android Studio离线开发环境搭建

Android Studio离线开发环境搭建 1.下载离线和解压包2.创建工程3.创建虚拟机tips 1.下载离线和解压包 下载地址 百度网盘&#xff1a;https://pan.baidu.com/s/1XBPESFOB79EMBqOhFTX7eQ?pwdx2ek 天翼网盘&#xff1a;https://cloud.189.cn/web/share?code6BJZf2uUFJ3a&#…

VMware虚拟机部署Linux Ubuntu系统

本文介绍基于VMware Workstation Pro虚拟机软件&#xff0c;配置Linux Ubuntu操作系统环境的方法。 首先&#xff0c;我们需要进行VMware Workstation Pro虚拟机软件的下载与安装。需要注意的是&#xff0c;VMware Workstation Pro软件是一个收费软件&#xff0c;而互联网中有很…

[GYCTF2020]Ezsqli1

打开环境&#xff0c;下面有个提交表单 提交1&#xff0c;2有正确的查询结果&#xff0c;3以后都显示Error Occured When Fetch Result. 题目是sql&#xff0c;应该考察的是sql注入 简单fuzz一下 发现information_schema被过滤了&#xff0c;猜测是盲注了。 测试发现只要有东…

vbs脚本(清空桌面)

VBScript是Visual Basic Script的简称&#xff0c;即 Visual Basic脚本语言&#xff0c;有时也被缩写为VBS。它是一种微软环境下的轻量级的解释型语言&#xff0c;它使用COM组件、WMI、WSH、ADSI访问系统中的元素&#xff0c;对系统进行管理。同时它又是asp动态网页默认的编程语…

OSI七层模型 | TCP/IP模型 | 网络和操作系统的联系 | 网络通信的宏观流程

文章目录 1.OSI七层模型2.TCP/IP五层(或四层)模型3.网络通信的宏观流程3.1.同网段通信3.2.跨网段通信 1.OSI七层模型 在计算机通信诞生之初&#xff0c;不同的厂商都生产自己的设备&#xff0c;都有自己的网络通讯标准&#xff0c;导致了不同厂家之间各种协议不兼容&#xff0…

(大众金融)SQL server面试题(1)-总销售量最少的3个型号的车及其总销售量

今天&#xff0c;面试了一家公司&#xff0c;什么也不说先来三道面试题做做&#xff0c;第一题。 那么&#xff0c;我们就开始做题吧&#xff0c;谁叫我们是打工人呢。 题目是这样的&#xff1a; 统计除豪车外&#xff0c;销售最差的车 车辆按批销售&#xff0c;每次销售若干…

通俗易懂理解MobileNet网络模型

温故而知新&#xff0c;可以为师矣&#xff01; 一、参考资料 详细且通俗讲解轻量级神经网络——MobileNets【V1、V2、V3】 MobileNet v1 和 MobileNet v2 二、MobileNet v1 原始论文&#xff1a;[1] MobileNet网络详解 【深度学习】轻量化CNN网络MobileNet系列详解 Mo…

RLHF学习

整体流程 三个步骤分解&#xff1a; 预训练一个语言模型 (LM) &#xff1b;聚合问答数据并训练一个奖励模型 (Reward Model&#xff0c;RM) &#xff1b;用强化学习 (RL) 方式微调 LM。 RW RM 的训练是 RLHF 区别于旧范式的开端。这一模型接收一系列文本并返回一个标量奖励&…

springboot2.2.9整合kafka之KafkaListener实现原理

1、开启kafka的注解EnableKafka 通过开启kafka注解可以看到Import的类KafkaListenerConfigurationSelector加载一个配置类KafkaBootstrapConfiguration&#xff0c;而此类中有两个重要的类: KafkaListenerAnnotationBeanPostProcessor、KafkaListenerEndpointRegistry 2、Kaf…

力扣hot100 最小栈 变种栈

Problem: 155. 最小栈 文章目录 思路&#x1f496; Stack 自定义 Node&#x1f37b; Code 思路 &#x1f469;‍&#x1f3eb; 甜姨 &#x1f496; Stack 自定义 Node 时间复杂度: O ( 1 ) O(1) O(1) 空间复杂度: O ( n ) O(n) O(n) &#x1f37b; Code class MinS…

轻松打卡:使用Spring Boot和Redis Bitmap构建高效签到系统【redis实战 四】

欢迎来到我的博客&#xff0c;代码的世界里&#xff0c;每一行都是一个故事 轻松打卡&#xff1a;使用Spring Boot和Redis Bitmap构建高效签到系统【redis实战 四】 引言(redis实战)前言回顾bitmap基本概念核心特性使用场景 为什么使用redis中的bitmap实现&#xff1f;1. 存储效…

紫光展锐M6780丨超分辨率技术——画质重构还原经典

上一期&#xff0c;我们揭秘了让画质更加炫彩的AI-PQ技术。面对分辨率较低的老电影&#xff0c;光有高饱和度的色彩是不够的&#xff0c;如何能够提高视频影像的分辨率&#xff0c;使画质更加清晰&#xff0c;实现老片新看&#xff1f; 本期带大家揭晓紫光展锐首颗AI8K超高清智…

【分布式技术专题】「分布式技术架构」 探索Tomcat技术架构设计模式的奥秘(Server和Service组件原理分析)

探索Tomcat技术架构设计模式的奥秘 Tomcat系统架构分析Tomcat 整体结构Tomcat总体结构图以 Service 作为“婚姻”1) Service 接口方法列表 2) StandardService 的类结构图方法列表 3) StandardService. SetContainer4) StandardService. addConnector 以 Server 为“居”1) Ser…

etcd技术解析:构建高可用分布式系统的利器

1. 引言 随着云原生技术的兴起&#xff0c;分布式系统的构建变得愈发重要。etcd作为一个高可用的分布式键值存储系统&#xff0c;在这个领域发挥着至关重要的作用。本文将深入探讨etcd的技术细节&#xff0c;以及如何利用它构建高可用的分布式系统。 2. etcd简介 etcd是一个开…

通过Builder来构建集合list和map

之前已经写过一篇通用Builder来构建实例对象的&#xff08;基于Java8的新特性写一个通用的Builder工具类_java手动写一个builder-CSDN博客&#xff09;但是这个builder不能构建集合&#xff0c;也就是list和map&#xff0c;今天突然心血来潮&#xff0c;想写写集合类的builder&…

JVM系列-9.性能调优

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱吃芝士的土豆倪&#xff0c;24届校招生Java选手&#xff0c;很高兴认识大家&#x1f4d5;系列专栏&#xff1a;Spring原理、JUC原理、Kafka原理、分布式技术原理、数据库技术、JVM原理&#x1f525;如果感觉博主的文…