JS利用时间戳倒计时案例

news2025/1/22 21:03:54

我们在逛某宝,或者逛某东时,我们时常看到一个倒计时,时间一到就开抢,这个倒计时是如何做的呢?让我为大家介绍一下。
理性分析一下:
1.用将来时间减去现在时间就是剩余的时间
2.核心:使用将来的时间戳减去现在的时间戳
3.把剩余的时间转换为 天 时 分 秒

注意:通过时间戳得到的是毫秒,需要转换为秒在计算
转换公式:
d = parseInt(总秒数 / 60 / 60 / 24) 计算天数
h = parseInt(总秒数 / 60 / 60 % 24) 计算小时
m = parseInt(总秒数 / 60 % 60) 计算分数
s = parseInt(总秒数 % 60) 计算当前秒数

    // 封装时间
    function getTime() {
        // 获取当前的时间戳
        let now = +new Date()
        // 获取将来的时间戳
        let last = +new Date("2023-11-3 18:30:00")
        // 获取剩余的时间戳 记得转换为秒数
        let count = (last - now) / 1000
        // 转换为时分秒
        // h = parseInt(总秒数 / 60 / 60 % 24) 计算小时
        // m = parseInt(总秒数 / 60 % 60) 计算分数
        // s = parseInt(总秒数 % 60) 计算当前秒数
        let h = parseInt(count / 60 / 60 % 24)
        h = h < 10 ? "0" + h : h
        let m = parseInt(count / 60 % 60)
        m = m < 10 ? "0" + m : m
        let s = parseInt(count % 60)
        s = s < 10 ? "0" + s : s
        // 把时分秒写到对应的盒子里面
        document.querySelector("#hour").innerHTML = h
        document.querySelector("#minutes").innerHTML = m
        document.querySelector("#second").innerHTML = s
    }
    // 使用定时器
    setInterval(getTime,1000)

效果图:请添加图片描述
感谢大家的阅读,如有不对地方,可以向我提出,感谢大家!

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

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

相关文章

基于 golang 从零到一实现时间轮算法 (一)

前言 时间轮是用来解决海量百万级定时器&#xff08;或延时&#xff09;任务的最佳方案&#xff0c;linux 的内核定时器就是采用该数据结构实现。 应用场景 自动删除缓存中过期的 Key&#xff1a;缓存中设置了 TTL 的 kv&#xff0c;通过把该 key 对应的 TTL 以及回调方法注册…

云安全-云原生k8s攻击点(8080,6443,10250未授权攻击点)

0x00 k8s简介 k8s&#xff08;Kubernetes&#xff09; 是容器管理平台&#xff0c;用来管理容器化的应用&#xff0c;提供快速的容器调度、弹性伸缩等诸多功能&#xff0c;可以理解为容器云&#xff0c;不涉及到业务层面的开发。只要你的应用可以实现容器化&#xff0c;就可以部…

css——半圆实心

案例 代码 <view class"circleBox"></view>.circleBox {width: 50px;height: 100px;background: red;border-radius: 100px 0 0 100px; }

史上最详细注释,用flask写一个博客系统

文本用flask写个博客系统&#xff0c;源码带有详细注释&#xff0c;通俗易懂&#xff0c;拿去就能用。博客效果如下&#xff0c;博客首页&#xff1a; 这个博客麻雀虽小&#xff0c;但五脏俱全。有如下功能&#xff1a; 博客文章浏览用户注册用户登录/登出发文章/修改文章/删除…

Linux设置ssh免密登录

ssh连接其他服务器 基本语法 ssh 另一台机器的ip地址 连接后输入连接主机用户的密码&#xff0c;即可成功连接。 输入exit 可以登出&#xff1b; 由于我配置了主机映射所以可以不写ip直接写映射的主机名即可&#xff0c;Linux配置主机映射的操作为 vim /etc/hosts # 我自己…

Linux上编译sqlite3库出现undefined reference to `sqlite3_column_table_name‘

作者&#xff1a;朱金灿 来源&#xff1a;clever101的专栏 为什么大多数人学不会人工智能编程&#xff1f;>>> 在Ubuntu 18上编译sqlite3库后在运行程序时出现undefined reference to sqlite3_column_table_name’的错误。网上的说法是说缺少SQLITE_ENABLE_COLUMN_M…

【使用Python编写游戏辅助工具】第四篇:Windows窗口操作

前言 这里是【使用Python编写游戏辅助工具】的第四篇&#xff1a;Windows窗口操作。本文主要介绍使用Python来实现Windows窗口的各种操作。 Windows窗口操作是游戏辅助功能中不可或缺的一部分。 Windows窗口操作指的是与Windows操作系统中的窗口进行交互和控制的操作&#xff…

Docker安装ElasticSearch7.8.0

Docker安装ElasticSearch7.8.0 1&#xff1a;docker可能会拉取不了es&#xff0c;此时可以配置一个很好用的镜像源&#xff08;daocloud&#xff09;&#xff0c;下载非常快&#xff1a; curl -sSL https://get.daocloud.io/daotools/set_mirror.sh | sh -s http://f1361db2.…

iTerm2 自动连接服务器配置

iTerm2 自动连接服务器配置 创建ssh_conf.sh配置文件 touch ssh_conf.sh编辑配置文件内容 #!/usr/bin/expect -f set user root set host 119.xxx.xxx.xxx set port 22 set password xxxx set timeout 30 spawn ssh -p $port $user$host expect "$user$hosts password:…

测试用例设计方法 —— 场景法详解

场景法是通过运用场景来对系统的功能点或业务流程的描述&#xff0c;从而提高测试效果的一种方法。 场景法一般包含基本流和备用流&#xff0c;从一个流程开始&#xff0c;通过描述经过的路径来确定的过程&#xff0c;经过遍历所有的基本流和备用流来完成整个场景。 场景主要…

玻色量子“天工量子大脑”亮相中关村论坛,大放异彩

2023年5月25日至30日&#xff0c;2023中关村论坛&#xff08;科博会&#xff09;在北京盛大召开。中关村论坛&#xff08;科博会&#xff09;是面向全球科技创新交流合作的国家级平台行业盛会&#xff0c;由科技部、国家发展改革委、工业和信息化部、国务院国资委、中国科学院、…

【Linux学习笔记】进程概念(上)

1. 冯诺依曼体系结构2. 操作系统的作用3. 进程 1. 冯诺依曼体系结构 如图&#xff0c;这是一个冯诺依曼体系结构简图 其中这里的存储器指的是内存&#xff01; 用通俗的话来解释这个图&#xff0c;就是数据从输入设备进入&#xff0c;然后进入到存储器&#xff0c;CPU从存储器…

【PWN · heap | UAF】[BJDCTF 2020]YDSneedGirlfriend

一篇裸的、便于学习UAF的题目和笔记 前言 UAF-释放后重用&#xff0c;这一题和wiki上教学的那一题一样&#xff0c;是纯的裸UAF题目 一、题目 二、分析 题目中del函数&#xff0c;在释放申请的堆块后&#xff0c;并没有将置零&#xff0c;存在UAF漏洞。 分析add函数&#xf…

Tailwind CSS vs 现代CSS,Tailwind CSS 会像CSS-in-JS 一样亡?

本文是 关于Tailwind CSS 与 现代 CSS之间比较的文章。文章中作者详细比较了这两种CSS开发方法的优缺点。他指出&#xff0c;Tailwind CSS是一种基于类的CSS框架&#xff0c;提供了快速开发网站的便利性&#xff0c;但可能导致HTML代码的臃肿。另一方面&#xff0c;现代CSS方法…

[双指针] (四) LeetCode 18.四数之和

[双指针] (四) LeetCode 18.四数之和 文章目录 [双指针] (四) LeetCode 18.四数之和题目解析解题思路代码实现总结 18. 四数之和 题目解析 (1) 从一个数组中找一个目标值target (2) target nums[a] nums[b] nums[c] nums[d] 解题思路 和上一道题三数之和一样, 我们把四…

刷到这篇文章的老师,就是老天在帮你

作为一名奋斗在教育战线的老师&#xff0c;是否曾在成绩查询这个环节中倍感头大&#xff1f; 统计是个繁琐又重要的工作&#xff0c;但有了正确的工具&#xff0c;一切都变得无所谓&#xff01; 什么是成绩查询&#xff1f; 成绩查询&#xff0c;顾名思义&#xff0c;就是学生…

uni-app 应对微信小程序最新隐私协议接口要求的处理方法

这里给大家分享我在网上总结出来的一些知识&#xff0c;希望对大家有所帮助 一&#xff0c;问题起因 最新在开发小程序的时候&#xff0c;调用微信小程序来获取用户信息的时候经常报错一个问题 fail api scope is not declared in the privacy agreement&#xff0c;api更具公告…

Linux | 文件系统

目录 前言 一、预备知识 二、文件相关的系统调用 1、C语言的文件操作 2、系统调用接口 &#xff08;1&#xff09;open函数 &#xff08;2&#xff09;close函数 &#xff08;3&#xff09;write函数 &#xff08;4&#xff09;read函数 3、代码实操 三、深入理解文…

k8s:endpoint

在 Kubernetes 中&#xff0c;Endpoint 是一种 API 对象&#xff0c;它用于表示集群内某个 Service 的具体网络地址。换句话说&#xff0c;它连接到一组由 Service 选择的 Pod&#xff0c;从而使它们能够提供服务。每个 Endpoint 对象都与相应的 Service 对象具有相同的名称&am…

python判断图片主颜色

一 、 问题&#xff1a;python判断图片主颜色 python判断图片主颜色&#xff08;HSV&#xff09; 二 、 项目背景&#xff1a; app选项是否能被点击&#xff0c;判断执行逻辑。做自动化测试的朋友肯定遇到好多次&#xff0c;按钮属性无法判别时&#xff0c;就需要自己将app选…