当前位置: 首页 > news >正文

(二)原生js案例之数码时钟计时

原生js实现的数字时间上下切换显示时间的效果,有参考相关设计,思路比较难,代码其实很简单

效果

请添加图片描述

代码实现

  • 必要的样式
  <style>* {padding: 0;margin: 0;}.content{/* text-align: center; */display: flex;align-items: center;justify-content: center;flex-direction: column;height: 100vh;background: linear-gradient(202deg,#F3E7E9 0%,#FFFFFF 53%,#E3EEFF 100%); }#title{margin:20px;font-size: 40px;}ul {list-style: none;overflow: hidden;}li {float: left;}li.time-box {width: 122px;height: 172px;overflow: hidden;position: relative;}li.colon{animation: dotLignt 1s linear infinite alternate;font-size: 80px;height: 172px;line-height: 172px;font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;}/* 闪烁东湖*/@keyframes dotLignt {0% {opacity: 1;}50% {opacity: 50%;}100% {opacity: 0;}}</style>
  • 静态页面
<div class="content"><h2 id="title"></h2><p id="time"></p><ul><li id="h1" class="time-box"><img class="time" src="./img/0.JPG" alt="" srcset="" /></li><li id="h2" class="time-box"><img class="time" src="./img/1.JPG" alt="" srcset="" /></li><li class="colon"><span>:</span></li><li id="fen1" class="time-box"><img class="time" src="./img/2.JPG" alt="" srcset="" /></li><li id="fen2" class="time-box"><img class="time" src="./img/3.JPG" alt="" srcset="" /></li><li class="colon"><span>:</span></li><li id="miao1" class="time-box"><img class="time" src="./img/4.JPG" alt="" srcset="" /></li><li id="miao2" class="time-box up"><img class="time" src="./img/5.JPG" alt="" srcset="" /></li></ul></div> 
  • js核心代码
    window.onload = function () {const oBody = document.bodyconst oP = oBody.querySelector('#time')const oTitle = document.querySelector('#title')const oImg = document.querySelectorAll('img.time')const oH1 = document.querySelector('#h1')const oH2 = document.querySelector('#h2')const oFen1 = document.querySelector('#fen1')const oFen2 = document.querySelector('#fen2')const oMiao1 = document.querySelector('#miao1')const oMiao2 = document.querySelector('#miao2')let isInit = truefnTime()function fnTime() {const myTime = new Date()const year = myTime.getFullYear()const month = myTime.getMonth() + 1const day = myTime.getDate()const hour = myTime.getHours()const minute = myTime.getMinutes()const second = myTime.getSeconds()//星期let week = myTime.getDay()switch (week) {case 0:week = '星期日'breakcase 1:week = '星期一'breakcase 2:week = '星期二'breakcase 3:week = '星期三'breakcase 4:week = '星期四'breakcase 5:week = '星期五'breakcase 6:week = '星期六'breakdefault:week = ''}const time = fnAddZero(hour) + fnAddZero(minute) + fnAddZero(second)// oP.innerHTML = timeoTitle.innerHTML = year + '年' + month + '月' + day + '日' + week//初始化加载一次,防止刷新的时候出现闪屏if(isInit){for (let i = 0; i < oImg.length; i++) {oImg[i].src = `./img/${time.charAt(i)}.JPG`}}isInit = falsereturn time}//辅助方法,补0function fnAddZero(num) {if (num < 10) {return '0' + num}return '' + num}let ht1=0;let h1 = 0setInterval(function () {let a = fnTime();//获得当前的子结点if(a[0] != h1){h1 = a[0];let childImg = oH1.getElementsByTagName('img')[0];let imgM = document.createElement('img');imgM.src='img/'+a[0]+'.jpg';oH1.appendChild(imgM);let m2 = setInterval(function () {ht1+=1;oH1.scrollTop=ht1;if (ht1>=70){clearInterval(m2);setTimeout(function () {childImg.remove();ht1=0;},100)}},1)}},1000);let ht2=0;let h2 = 0setInterval(function () {let a = fnTime();//获得当前的子结点if(a[1] != h2){h2 = a[1];let childImg = oH2.getElementsByTagName('img')[0];let imgM = document.createElement('img');imgM.src='img/'+a[1]+'.jpg';oH2.appendChild(imgM);let m2 = setInterval(function () {ht2+=1;oH2.scrollTop=ht2;if (ht2>=70){clearInterval(m2);setTimeout(function () {childImg.remove();ht2=0;},100)}},1)}},1000);let ft1=0;let f1 = 0setInterval(function () {let a = fnTime();//获得当前的子结点if(a[2] != f1){f1 = a[2];let childImg = oFen1.getElementsByTagName('img')[0];let imgM = document.createElement('img');imgM.src='img/'+a[2]+'.jpg';oFen1.appendChild(imgM);let m2 = setInterval(function () {ft1+=1;// console.log(mt2);oFen1.scrollTop=ft1;if (ft1>=70){clearInterval(m2);setTimeout(function () {childImg.remove();ft1=0;},100)}},1)}},1000);let ft2=0;let f2 = 0setInterval(function () {let a = fnTime();//获得当前的子结点if(a[3] != f2){f2 = a[3];let childImg = oFen2.getElementsByTagName('img')[0];let imgM = document.createElement('img');imgM.src='img/'+a[3]+'.jpg';oFen2.appendChild(imgM);let m2 = setInterval(function () {ft2+=1;oFen2.scrollTop=ft2;if (ft2>=70){clearInterval(m2);setTimeout(function () {childImg.remove();ft2=0;},100)}},1)}},1000);let mt1=0;let m1 = 0setInterval(function () {let a = fnTime();console.log("🚀 ~ a:", a)//获得当前的子结点if(a[4] != m1){console.log("🚀 ~ m1:", m1)console.log("🚀 ~ a[4]:", a[4])m1 = a[4];let childImg = oMiao1.getElementsByTagName('img')[0];let imgM = document.createElement('img');imgM.src='img/'+a[4]+'.jpg';oMiao1.appendChild(imgM);let m2 = setInterval(function () {mt1+=1;// console.log(mt2);oMiao1.scrollTop=mt1;if (mt1>=70){clearInterval(m2);setTimeout(function () {childImg.remove();mt1=0;},100)}},1)}},1000);let mt2=0;setInterval(function () {let a = fnTime();//获得当前的子结点let childImg = oMiao2.getElementsByTagName('img')[0];let imgM = document.createElement('img');imgM.src='img/'+a[5]+'.jpg';oMiao2.appendChild(imgM);let m2 = setInterval(function () {mt2+=1;// console.log(mt2);oMiao2.scrollTop=mt2;if (mt2>=70){clearInterval(m2);setTimeout(function () {childImg.remove();mt2=0;},100)}},1)},1000);}

这样就实现了我们的数字时间的切换效果

相关文章:

(二)原生js案例之数码时钟计时

原生js实现的数字时间上下切换显示时间的效果&#xff0c;有参考相关设计&#xff0c;思路比较难&#xff0c;代码其实很简单 效果 代码实现 必要的样式 <style>* {padding: 0;margin: 0;}.content{/* text-align: center; */display: flex;align-items: center;justif…...

[CSS] 浮动布局的深入理解与应用

文章目录 浮动的简介元素浮动后的特点解决浮动产生的影响浮动后的影响解决浮动产生的影响 浮动相关属性实际应用示例示例1&#xff1a;图片与文字环绕示例2&#xff1a;多列布局示例3&#xff1a;响应式布局 总结 浮动布局是CSS中一种非常强大的布局方式&#xff0c;最初设计用…...

Linux云计算 |【第一阶段】ENGINEER-DAY2

主要内容&#xff1a; 磁盘空间管理fdisk、parted工具、开机自动挂载、文件系统、交换空间 KVM虚拟化 实操前骤&#xff1a; 1&#xff09;添加一块硬盘&#xff08;磁盘&#xff09;&#xff0c;需要关机才能进行操作&#xff0c;点击左下角【添加硬件】 2&#xff09;选择2…...

9.11和9.9哪个大?

没问题 文心一言 通义千问...

学懂C语言(十二):C语言中的二进制原理及应用

目录 1. 二进制原理 1.1 什么是二进制&#xff1f; 1.2 如何在C语言中表示二进制&#xff1f; 2. 二进制的表示 2.1 二进制和其他进制的转换 2.2 C语言中的二进制表示 3. 二进制运算 3.1 位运算符 3.2 计算过程示例 4. 应用示例 4.1 使用位运算实现开关 5. 总结 C语…...

科研绘图系列:R语言雨云图(Raincloud plot)

介绍 雨云图(Raincloud plot)是一种数据可视化工具,它结合了多种数据展示方式,旨在提供对数据集的全面了解。雨云图通常包括以下几个部分: 密度图(Density plot):表示数据的分布情况,密度图的曲线可以展示数据在不同数值区间的密度。箱线图(Box plot):显示数据的中…...

优化教学流程和架构:构建高效学习环境的关键步骤

在教育领域&#xff0c;设计和优化教学流程和架构是提高学习效果和学生参与度的关键。本文将探讨如何通过合理的教学流程和有效的架构来构建一个高效的学习环境。 ### 1. 理解教学流程和架构的重要性 教学流程指的是教学活动的组织和顺序&#xff0c;而教学架构则是指支持教学…...

js | this 指向问题

https://juejin.cn/post/6844904083707396109 任何函数运行的时候&#xff0c;都会创建一个context对象&#xff0c;context对象有一个this对象&#xff0c;在运行的时候决定。任何函数都对应一个reference类结构体&#xff08;具体叫啥有点忘了&#xff09;&#xff0c;简单就…...

《昇思 25 天学习打卡营第 15 天 | 基于MindNLP+MusicGen生成自己的个性化音乐 》

《昇思 25 天学习打卡营第 15 天 | 基于MindNLPMusicGen生成自己的个性化音乐 》 活动地址&#xff1a;https://xihe.mindspore.cn/events/mindspore-training-camp 签名&#xff1a;Sam9029 MusicGen概述 MusicGen是由Meta AI的Jade Copet等人提出的一种基于单个语言模型&…...

Gitee 使用教程1-SSH 公钥设置

一、生成 SSH 公钥 1、打开终端&#xff08;Windows PowerShell 或 Git Bash&#xff09;&#xff0c;通过命令 ssh-keygen 生成 SSH Key&#xff1a; ssh-keygen -t ed25519 -C "Gitee SSH Key" 随后摁三次回车键&#xff08;Enter&#xff09; 2、查看生成的 SSH…...

理解Cookie、Session和Token

在现代Web开发中&#xff0c;用户身份认证和会话管理是至关重要的部分。理解Cookie、Session和Token的区别和应用场景&#xff0c;有助于我们设计出更加安全和高效的Web应用。本文将详细探讨这三者的工作原理、优缺点以及使用场景。 1. Cookie 1.1 什么是Cookie&#xff1f; …...

概率论原理精解【1】

文章目录 测度概述集类笛卡尔积定义例子 多集合的笛卡尔积定义计算方法注意事项 有限笛卡尔积的性质1. 定义2. 性质2.1 基数性质2.2 空集性质2.3 不满足交换律2.4 不满足结合律2.5 对并和交运算满足分配律 3. 示例4. 结论 参考链接 测度 概述 所谓测度&#xff0c;通俗的讲就…...

数据结构(二叉树-1)

文章目录 一、树 1.1 树的概念与结构 1.2 树的相关术语 1.3 树的表示 二、二叉树 2.1 二叉树的概念与结构 2.2特殊的二叉树 满二叉树 完全二叉树 2.3 二叉树的存储结构 三、实现顺序结构二叉树 3.1 堆的概念与结构 3.2 堆的实现 Heap.h Heap.c 默认初始化堆 堆的销毁 堆的插入 …...

巴黎奥运会倒计时 一个非常不错的倒计时提醒

巴黎奥运会还有几天就要开幕了&#xff0c;大家应该到处都可以看到巴黎奥运会的倒计时&#xff0c;不管是电视上&#xff0c;还是网络里&#xff0c;一搜索奥运会&#xff0c;就会看到。倒计时其实是一个我们在生活中很常用的一个方法&#xff0c;用来做事情的提醒&#xff0c;…...

【Python】使用库 -- 详解

库就是别人已经写好了的代码&#xff0c;可以让我们直接拿来用。 一个编程语言能不能流行起来&#xff0c;一方面取决于语法是否简单方便容易学习&#xff0c;一方面取决于生态是否完备。所谓的 “生态” 指的就是语言是否有足够丰富的库&#xff0c;来应对各种各样的场景。在…...

Web3D:WebGL为什么在渲染性能上输给了WebGPU。

WebGL已经成为了web3D的标配&#xff0c;市面上有N多基于webGL的3D引擎&#xff0c;WebGPU作为挑战者&#xff0c;在渲染性能上确实改过webGL一头&#xff0c;由于起步较晚&#xff0c;想通过这个优势加持&#xff0c;赶上并超越webGL仍需时日。 贝格前端工场为大家分享一下这…...

SpringBoot面试高频总结01

1. 什么是SpringBoot&#xff1f; SpringBoot是一个基于Spring框架的快速开发框架&#xff0c;它采用约定大于配置&#xff0c;自动装配的方式&#xff0c;可以快速地创建独立的&#xff0c;生产级别的&#xff0c;基于Spring的应用程序。 相比于传统的Spring框架&#xff0c;S…...

Linux 工作队列(Workqueue):概念与实现

目录 一、工作队列的概念1.1 什么是工作队列1.2 为什么使用工作队列 二、工作队列的实现2.1 定义和初始化工作队列2.2 工作队列API 三、工作队列的应用3.1 延迟执行任务3.2 处理复杂的中断任务 四、工作队列的类型4.1 普通工作队列4.2 高优先级工作队列 五、总结 在Linux内核中…...

前端页面是如何禁止被查看源码、被下载,被爬取,以及破解方法

文章目录 1.了解禁止查看,爬取原理1.1.JS代码,屏蔽屏蔽键盘和鼠标右键1.2.查看源码时,通过JS控制浏览器窗口变化2.百度文库是如何防止抓包2.1.HTPPS2.2. 动态加载为什么看不到?如何查看动态加载的内容?3.禁止复制,如果解决3.1.禁止复制原理3.2.如何破解1.了解禁止查看,爬…...

51单片机嵌入式开发:14、STC89C52RC 之HX1838红外解码NEC+数码管+串口打印+LED显示

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 STC89C52RC 之HX1838红外解码NEC数码管串口打印LED显示 STC89C52RC 之HX1838红外解码NEC数码管串口打印LED显示1 概述2 硬件电路2.1 遥控器2.2 红外接收器电路2.3 STC89C52单…...

反向工程与模型迁移:打造未来商品详情API的可持续创新体系

在电商行业蓬勃发展的当下&#xff0c;商品详情API作为连接电商平台与开发者、商家及用户的关键纽带&#xff0c;其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息&#xff08;如名称、价格、库存等&#xff09;的获取与展示&#xff0c;已难以满足市场对个性化、智能…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

如何在最短时间内提升打ctf(web)的水平?

刚刚刷完2遍 bugku 的 web 题&#xff0c;前来答题。 每个人对刷题理解是不同&#xff0c;有的人是看了writeup就等于刷了&#xff0c;有的人是收藏了writeup就等于刷了&#xff0c;有的人是跟着writeup做了一遍就等于刷了&#xff0c;还有的人是独立思考做了一遍就等于刷了。…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

【MATLAB代码】基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),附源代码|订阅专栏后可直接查看

文章所述的代码实现了基于最大相关熵准则(MCC)的三维鲁棒卡尔曼滤波算法(MCC-KF),针对传感器观测数据中存在的脉冲型异常噪声问题,通过非线性加权机制提升滤波器的抗干扰能力。代码通过对比传统KF与MCC-KF在含异常值场景下的表现,验证了后者在状态估计鲁棒性方面的显著优…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

HTML前端开发:JavaScript 获取元素方法详解

作为前端开发者&#xff0c;高效获取 DOM 元素是必备技能。以下是 JS 中核心的获取元素方法&#xff0c;分为两大系列&#xff1a; 一、getElementBy... 系列 传统方法&#xff0c;直接通过 DOM 接口访问&#xff0c;返回动态集合&#xff08;元素变化会实时更新&#xff09;。…...

[论文阅读]TrustRAG: Enhancing Robustness and Trustworthiness in RAG

TrustRAG: Enhancing Robustness and Trustworthiness in RAG [2501.00879] TrustRAG: Enhancing Robustness and Trustworthiness in Retrieval-Augmented Generation 代码&#xff1a;HuichiZhou/TrustRAG: Code for "TrustRAG: Enhancing Robustness and Trustworthin…...

鸿蒙(HarmonyOS5)实现跳一跳小游戏

下面我将介绍如何使用鸿蒙的ArkUI框架&#xff0c;实现一个简单的跳一跳小游戏。 1. 项目结构 src/main/ets/ ├── MainAbility │ ├── pages │ │ ├── Index.ets // 主页面 │ │ └── GamePage.ets // 游戏页面 │ └── model │ …...

多元隐函数 偏导公式

我们来推导隐函数 z z ( x , y ) z z(x, y) zz(x,y) 的偏导公式&#xff0c;给定一个隐函数关系&#xff1a; F ( x , y , z ( x , y ) ) 0 F(x, y, z(x, y)) 0 F(x,y,z(x,y))0 &#x1f9e0; 目标&#xff1a; 求 ∂ z ∂ x \frac{\partial z}{\partial x} ∂x∂z​、 …...