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

news2024/9/22 7:35:48

原生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.body
        const 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 = true
        fnTime()
        function fnTime() {
          const myTime = new Date()
          const year = myTime.getFullYear()
          const month = myTime.getMonth() + 1
          const day = myTime.getDate()
          const hour = myTime.getHours()
          const minute = myTime.getMinutes()
          const second = myTime.getSeconds()
          //星期
          let week = myTime.getDay()

          switch (week) {
            case 0:
              week = '星期日'
              break
            case 1:
              week = '星期一'
              break
            case 2:
              week = '星期二'
              break
            case 3:
              week = '星期三'
              break
            case 4:
              week = '星期四'
              break
            case 5:
              week = '星期五'
              break
            case 6:
              week = '星期六'
              break
            default:
              week = ''
          }
          const time = fnAddZero(hour) + fnAddZero(minute) + fnAddZero(second)
          // oP.innerHTML = time
          oTitle.innerHTML = year + '年' + month + '月' + day + '日' + week
          //初始化加载一次，防止刷新的时候出现闪屏
          if(isInit){
            for (let i = 0; i < oImg.length; i++) {
              oImg[i].src = `./img/${time.charAt(i)}.JPG`
            }
          }
          
          isInit = false
          return time
        }
        //辅助方法，补0
        function fnAddZero(num) {
          if (num < 10) {
            return '0' + num
          }
          return '' + num
        }

        let ht1=0;
        let h1 = 0
        setInterval(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 = 0
        setInterval(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 = 0
        setInterval(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 = 0
        setInterval(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 = 0
        setInterval(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);

  }

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

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

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

相关文章

华为OD机试(C卷,200分)- 二叉树计算

华为OD机试(C卷,200分)- 二叉树计算

题目描述 给出一个二叉树如下图所示&#xff1a; 请由该二叉树生成一个新的二叉树&#xff0c;它满足其树中的每个节点将包含原始树中的左子树和右子树的和。 左子树表示该节点左侧叶子节点为根节点的一颗新树&#xff1b;右子树表示该节点右侧叶子节点为根节点的一颗新树。…
阅读更多...
笔记：Few-Shot Learning小样本分类问题 + 孪生网络 + 预训练与微调

笔记：Few-Shot Learning小样本分类问题 + 孪生网络 + 预训练与微调

内容摘自王老师的B站视频&#xff0c;大家还是尽量去看视频&#xff0c;老师讲的特别好&#xff0c;不到一小时的时间就缕清了小样本学习的基础知识点~Few-Shot Learning (1/3): 基本概念_哔哩哔哩_bilibili Few-Shot Learning&#xff08;小样本分类&#xff09; 假设现在每类…
阅读更多...
【Linux】基础I/O——动静态库的制作

【Linux】基础I/O——动静态库的制作

我想把我写的头文件和源文件给别人用 1.把源代码直接给他2.把我们的源代码想办法打包为库 1.制作静态库 1.1.制作静态库的过程 我们先看看怎么制作静态库的&#xff01; makefile 所谓制作静态库 需要将所有的.c源文件都编译为(.o)目标文件。使用ar指令将所有目标文件打包…
阅读更多...
Linux应用——网络基础

Linux应用——网络基础

一、网络结构模型 1.1C/S结构 C/S结构——服务器与客户机&#xff1b; CS结构通常采用两层结构&#xff0c;服务器负责数据的管理&#xff0c;客户机负责完成与用户的交互任务。客户机是因特网上访问别人信息的机器&#xff0c;服务器则是提供信息供人访问的计算机。 例如&…
阅读更多...
[2019红帽杯]Snake

[2019红帽杯]Snake

[2019红帽杯]Snake-CSDN博客 unity的题 下载下来看看是什么类型就是 这道题就是贪吃蛇 unity无脑找Assembly 用dnspy打开 一般就在这里慢慢找 但是你可以发现没有任何的信息 这里外接库 只能从这里下手试试 64位链接库的意思 游戏题,win!很关键 进入了Gameobject 看a1,小…
阅读更多...
复现Android中GridView的bug并解决

复现Android中GridView的bug并解决

几年前的一个bug&#xff0c;GridView的item高度不一致。如下图&#xff1a; 复现bug的代码&#xff1a; import android.os.Bundle; import android.widget.BaseAdapter; import android.widget.GridView; import androidx.appcompat.app.AppCompatActivity; import java.uti…
阅读更多...
【Day12】登录认证、异常处理

【Day12】登录认证、异常处理

1 登录 先创建一个新的 controller 层&#xff1a;LoginController RestController public class LoginController {Autowiredprivate EmpService empService;// 注入PostMapping("/login")public Result login(RequestBody Emp emp) { // 包装对象Emp e empServic…
阅读更多...
html 单页面引用vue3和element-plus

html 单页面引用vue3和element-plus

引入方式&#xff1a; element-plus基于vue3.0&#xff0c;所以必须导入vue3.0的js文件&#xff0c;然后再导入element-plus自身所需的js以及css文件&#xff0c;导入文件有两种方法&#xff1a;外部引用、下载本地使用 通过外部引用ElementPlus的css和js文件 以及Vue3.0文件 …
阅读更多...
Golang | Leetcode Golang题解之第260题只出现一次的数字III

Golang | Leetcode Golang题解之第260题只出现一次的数字III

题目&#xff1a; 题解&#xff1a; func singleNumber(nums []int) []int {xorSum : 0for _, num : range nums {xorSum ^ num}lsb : xorSum & -xorSumtype1, type2 : 0, 0for _, num : range nums {if num&lsb > 0 {type1 ^ num} else {type2 ^ num}}return []in…
阅读更多...
【数据结构】二叉树OJ题_对称二叉树_另一棵的子树

【数据结构】二叉树OJ题_对称二叉树_另一棵的子树

对称二叉树 题目 101. 对称二叉树 - 力扣&#xff08;LeetCode&#xff09; 给你一个二叉树的根节点 root &#xff0c; 检查它是否轴对称。 示例 1&#xff1a; 输入&#xff1a;root [1,2,2,3,4,4,3] 输出&#xff1a;true示例 2&#xff1a; 输入&#xff1a;root [1,2…
阅读更多...
不同类型的指针变量进行++操作的效果

不同类型的指针变量进行++操作的效果

可以看到 不同变量的指针进行操作的时候&#xff0c;他的地址移动的大小是不一样的 运行了打印了一些东西 &#xff0c; 没想到可以用sizeof来打印出 names[0][]这个字符串的长度方法 &#xff0c; 只能用这个 strlen1来判断这个字符串的长度。
阅读更多...
使用minio cllient(mc)完成不同服务器的minio的数据迁移和mc基本操作

使用minio cllient(mc)完成不同服务器的minio的数据迁移和mc基本操作

minio client 前言使用1.拉取minio client 镜像2.部署mc容器3.添加云存储服务器4.迁移数据1.全量迁移2.只迁移某个桶3.覆盖重名文件 5.其他操作1.列出所有alias、列出列出桶中的文件和目录1.1.列出所有alias1.2.列出桶中的文件和目录 2.创建桶、删除桶2.1.创建桶2.2.删除桶 3.删…
阅读更多...
DX-10A信号继电器 柜内安装，板前接线 约瑟JOSEF

DX-10A信号继电器 柜内安装，板前接线 约瑟JOSEF

DX-10型闪光信号继电器型号&#xff1a; DX-10A闪光信号继电器&#xff1b; DX-10B闪光信号继电器&#xff1b; DX-10C闪光信号继电器; 用途 DX-10 闪光继电器用于电力系统断路器的位置信号灯不对应闪光&#xff0c;该继电器是为了适应当前推广使用发光二极管节能指示灯而…
阅读更多...
“狂飙”过后，大模型未来在何方？

“狂飙”过后，大模型未来在何方？

2024年6月14日&#xff0c;第六届“北京智源大会”在中关村展示中心开幕。 开幕现场&#xff0c;智源研究院、OpenAI、百度、零一万物、百川智能、智谱AI、面壁智能等国内主流大模型公司CEO与CTO&#xff0c;人工智能顶尖学者和产业专家&#xff0c;在围绕人工智能关键技术路径…
阅读更多...
rockchip的yolov5 rknn python推理分析

rockchip的yolov5 rknn python推理分析

rockchip的yolov5 rknn推理分析 对于rockchip给出的这个yolov5后处理代码的分析&#xff0c;本人能力十分有限&#xff0c;可能有的地方描述的很不好&#xff0c;欢迎大家和我一起讨论&#xff0c;指出我的错误&#xff01;&#xff01;&#xff01; RKNN模型输出 将官方的Y…
阅读更多...
GD 32 环形队列

GD 32 环形队列

1.0 为什么要使用环形队列 在代码中使用环形队列进行程序的编写&#xff0c;由于在实际开发过程中&#xff0c;会出现接收数据频率太快快于主流程读取数据的频率&#xff0c;这个时候后面来的数据会覆盖前面一包数据&#xff0c;这个时候可以使用环形队列的方式解决这个问题。 …
阅读更多...
离散数学，格与子格，格的性质，格的代数系统定义，格的同态与同构，特殊格

离散数学，格与子格，格的性质，格的代数系统定义，格的同态与同构，特殊格

目录 1.格与子格 相互对偶 2.格的性质 对偶式 格的保序性 3.格的代数系统定义 格对应的偏序关系就是s的子集之间的包含关系 该格对应的偏序关系就是整除关系 子格必然是格 4.格的同态与同构 格同态&#xff0c;序同态 同态是保序的 例子 5.特殊格 全下…
阅读更多...
明星应援系统小程序的设计

明星应援系统小程序的设计

管理员账户功能包括&#xff1a;系统首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;线上应援管理&#xff0c;线下应援管理&#xff0c;应援物品管理&#xff0c;购买订单管理&#xff0c;集资应援管理&#xff0c;集资订单管理&#xff0c;市集订单管理&#xff0…
阅读更多...
CentOS部署MySQL

CentOS部署MySQL

1.配置yum仓库 #更新秘钥 rpm --import https://repo.mysql.com/RPM-GPG-KEY-mysql-2023 #安装MySQL rpm -Uvh http://dev.mysql.com/get/mysql80-community-release-el7-2.noarch.rpm 2.使用yum安装MySQL yum -y install mysql-community-server 3.启动MySQL并配置开机自启…
阅读更多...
PCB系统学习（1）--PCB印制电路板

PCB系统学习（1）--PCB印制电路板

PCB印制电路板 1.1PCB的定义1.2PCB的层叠结构1.2.1PCB单层板1.2.2PCB双层板1.2.3PCB四层板 1.3PCB的通孔&#xff0c;盲孔&#xff0c;埋孔1.4元器件的符号与封装1.5PCB的生产过程 1.1PCB的定义 PCB(PrintedCircuitBoard)&#xff0c;中文即印制电路板&#xff0c;或印刷线路板…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023