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

做一个简单的倒计时

 <div>距离过年还有:<span></span></div><script>let div = document.querySelector("div");let span = document.querySelector("span");// 获取未来时间戳let future = +new Date("2024-2-10 00:00:00");// 获取当下时间的时间戳 => 实际开发中 当下时间一般从后台服务器获取let now = +new Date();//   获取两个时间的时间差let dTime = Math.floor((future - now) / 1000);console.log(dTime);//   开启定时器 一秒钟执行一次let id = setInterval(function () {// 将对应的秒数每一秒自行减一dTime--;// 当倒计时结束时 进行一个收尾工作 使用判断条件if (dTime <= 0) {// 清除定时器clearInterval(id);return;}// 将对应的秒数转换成易于阅读的时分秒// 1小时 = 3600秒let a = Math.floor(dTime / 3600);// 一分钟 = 60秒// 取模=取余数 / 60let b = Math.floor((dTime % 3600) / 60);// 直接取余60let c = dTime % 60;span.innerText = `${a}小时${b}分钟${c}秒`;// let m = span;// btn.onclick = function () {//   alert("m");// };}, 1000);

 

因为倒计时一般是24小时开始 所以没有做年月日 需要的可以自行添加

相关文章:

做一个简单的倒计时

<div>距离过年还有:<span></span></div><script>let div document.querySelector("div");let span document.querySelector("span");// 获取未来时间戳let future new Date("2024-2-10 00:00:00");// 获取当下…...

微服务环境搭建:docker+nacos单机

nacos需要连接mysql&#xff0c;持久化相关配置。 1. 部署好mysql后&#xff0c;新建nacos数据库然后初始化nacos脚本 -- -------------------------------------------------------- -- 主机: 192.168.150.101 -- 服务器版本: …...

Opencv轮廓检测运用与理解

目录 引入 基本理解 加深理解 ①比如我们可以获取我们的第一个轮廓,只展示第一个轮廓 ②我们还可以用一个矩形把我们的轮廓给框出来 ③计算轮廓的周长和面积 引入 顾名思义,就是把我们图片的轮廓全部都描边出来 也就是我们在日常生活中面部识别的时候会有一个框,那玩意就…...

Java 8的新特性简单分享(后续有系列篇~敬请期待)

Java 8的新特性分享 Java 8是Java语言迎来的一次革命性的更新&#xff0c;引入了众多强大的新特性&#xff0c;使得Java开发变得更加现代化和便捷。在这篇博客中&#xff0c;我们将深入探讨Java 8的一些主要特性&#xff0c;并通过丰富的案例演示展示它们的用法。 1. Lambda表…...

计算机网络-计算机网络的概念 功能 发展阶段 组成 分类

文章目录 计算机网络的概念 功能 发展阶段总览计算机网络的概念计算机网络的功能计算机网络的发展计算机网络的发展-第一阶段计算机网络的发展-第二阶段-第三阶段计算机网络的发展-第三阶段-多层次ISP结构 小结 计算机网络的组成与分类计算机网络的组成计算机网络的分类小结 计…...

246.【2023年华为OD机试真题(C卷)】分月饼(动态规划-JavaPythonC++JS实现)

🚀点击这里可直接跳转到本专栏,可查阅顶置最新的华为OD机试宝典~ 本专栏所有题目均包含优质解题思路,高质量解题代码(Java&Python&C++&JS分别实现),详细代码讲解,助你深入学习,深度掌握! 文章目录 一. 题目-分月饼二.解题思路三.题解代码Python题解代码J…...

java大数据hadoop2.9.2 Linux安装mariadb和hive

一、安装mariadb 版本centos7 1、检查Linux服务器是否已安装mariadb yum list installed mariadb* 2、如果安装了&#xff0c;想要卸载 yum remove mariadb rm -rf /etc/my.cnf rm -rf /var/lib/mysql 才能完全删除 3、安装mariadb 在线网络安装 yum install -y mari…...

Docker部署微服务问题及解决

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Docker容器命令案例&#xff1a;Nginx容器修改&#xff0c;Redis容器持久化 &#x1f4da;订阅专栏&#xff1a;Docker 希望文章…...

Android: alarm定时很短时,比如500ms,测试执行mPowerManager.forceSuspend()后,系统不会suspend

参考文档&#xff1a; https://blog.csdn.net/weixin_35691921/article/details/124961404 Android: alarm定时很短时&#xff0c;比如500ms&#xff0c;然后执行mPowerManager.forceSuspend()后&#xff0c;系统不会suspend&#xff0c;原因分析&#xff1a; static int ala…...

一个简单好用的C语言单元测试框架-Unity

Unity简介&#xff1a; Unity是一个用于C语言的轻量级单元测试框架。它由Throw The Switch团队开发&#xff0c;旨在简化嵌入式系统的单元测试。单元测试中单元的含义&#xff0c;单元就是人为规定的最小的被测功能模块&#xff0c;如C语言中单元指一个函数&#xff0c;Java里…...

ubuntu系统 vscode 配置c/c++调试环境

文章目录 1.安装插件2.目录结构3.cmake tools配置 1.安装插件 c/c插件 cmake cmake tools插件 2.目录结构 . ├── build ├── CMakeLists.txt ├── demo │ └── main.cpp ├── image.png ├── src │ ├── add.cpp │ └── add.hpp └── vsdebug.…...

算法练习-A+B/财务管理/实现四舍五入/牛牛的菱形字符(题目链接+题解打卡)

难度参考 难度&#xff1a;简单 分类&#xff1a;熟悉OJ与IDE的操作 难度与分类由我所参与的培训课程提供&#xff0c;但需要注意的是&#xff0c;难度与分类仅供参考。以下内容均为个人笔记&#xff0c;旨在督促自己认真学习。 题目 A B1. A B - AcWing题库财务管理1004:财…...

XSS语句

XSS测试语句 在测试网站是否存在XSS漏洞时&#xff0c;应该输入一些标签如<,>输入后查看网页源代码是否过滤标签&#xff0c;如果没过滤&#xff0c;很大可能存在XSS漏洞。 <h5>1</h5> <span>1</span> <SCRIPT>alert(document.cookie)&l…...

AD导出BOM表 导出PDF

1.Simple BOM: 这种模式下&#xff0c;最好在pcb界面&#xff0c;这样的导出的文件名字是工程名字&#xff0c;要是在原理图界面导出&#xff0c;会以原理图的名字命名表格。 直接在菜单栏 报告->Simple BOM 即可导出物料清单&#xff0c;默认导出 comment pattern qu…...

linux 的nobody是什么用户? 对安全有没有影响?

目 录 一、前言&#xff1a;nobody是不是可疑用户&#xff1f; 二、Linux系统中的nobody用户&#xff1f; 二、有nobody用户存在&#xff0c;安全吗&#xff1f; 一、前言&#xff1a;nobody是不是可疑用户&#xff1f; 在前面一篇文章“Linux安全问题,如何查看哪…...

2024年华数杯国际数学建模B 光伏电(Problem B: Photovoltaic Power)完整思路以及源代码分享

背景 中国的电力构成包括传统的能源发电&#xff08;如煤炭、石油和天然气&#xff09;、可再生能源发电 &#xff08;如水力发电、风能、太阳能和核能&#xff09;和其他形式的电力。这些发电方式在满足中 国巨大的电力需求方面发挥着至关重要的作用。根据最新数据&#xf…...

在 Spring MVC 中,用于接收前端传递的参数的注解有以下几种

目录 RequestParam&#xff1a; PathVariable&#xff1a; RequestBody&#xff1a; RequestHeader&#xff1a; CookieValue&#xff1a; RequestParam&#xff1a; 用于获取请求参数的值。可以指定参数名称和默认值。示例代码&#xff1a; GetMapping("/users&q…...

K8s常用命令

查看集群各节点的状态 部署应用 删除一个service服务 查询service服务列表 kubectl get services 查看网络资源 kubectl get svc pod 创建一个namespace kubectl create namaspace namespace名称 创建一个pod 通常不需要创建pod 查看pod kubectl get pods kube…...

MySQL的基本操作

目录 序言 一、SQL语句&#xff08;Structured Query Language&#xff09; 1.1 SQL简介 1.2 SQL语句的分类 1.3 SQL语句的书写规范 二、数据库操作 2.1 查看库 2.2 创建库 2.3 切换库 2.4 删除库 三、MySQL字符集 3.1 MySQL字符集的分类 3.2 UTF8和UTF8MB4的区别…...

【b站咸虾米】chapter4_vue组件_新课uniapp零基础入门到项目打包(微信小程序/H5/vue/安卓apk)全掌握

课程地址&#xff1a;【新课uniapp零基础入门到项目打包&#xff08;微信小程序/H5/vue/安卓apk&#xff09;全掌握】 https://www.bilibili.com/video/BV1mT411K7nW/?p12&share_sourcecopy_web&vd_sourceb1cb921b73fe3808550eaf2224d1c155 四、vue组件 uni-app官网 …...

19c补丁后oracle属主变化,导致不能识别磁盘组

补丁后服务器重启&#xff0c;数据库再次无法启动 ORA01017: invalid username/password; logon denied Oracle 19c 在打上 19.23 或以上补丁版本后&#xff0c;存在与用户组权限相关的问题。具体表现为&#xff0c;Oracle 实例的运行用户&#xff08;oracle&#xff09;和集…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

《通信之道——从微积分到 5G》读书总结

第1章 绪 论 1.1 这是一本什么样的书 通信技术&#xff0c;说到底就是数学。 那些最基础、最本质的部分。 1.2 什么是通信 通信 发送方 接收方 承载信息的信号 解调出其中承载的信息 信息在发送方那里被加工成信号&#xff08;调制&#xff09; 把信息从信号中抽取出来&am…...

Linux-07 ubuntu 的 chrome 启动不了

文章目录 问题原因解决步骤一、卸载旧版chrome二、重新安装chorme三、启动不了&#xff0c;报错如下四、启动不了&#xff0c;解决如下 总结 问题原因 在应用中可以看到chrome&#xff0c;但是打不开(说明&#xff1a;原来的ubuntu系统出问题了&#xff0c;这个是备用的硬盘&a…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

【安全篇】金刚不坏之身:整合 Spring Security + JWT 实现无状态认证与授权

摘要 本文是《Spring Boot 实战派》系列的第四篇。我们将直面所有 Web 应用都无法回避的核心问题&#xff1a;安全。文章将详细阐述认证&#xff08;Authentication) 与授权&#xff08;Authorization的核心概念&#xff0c;对比传统 Session-Cookie 与现代 JWT&#xff08;JS…...

6️⃣Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙

Go 语言中的哈希、加密与序列化:通往区块链世界的钥匙 一、前言:离区块链还有多远? 区块链听起来可能遥不可及,似乎是只有密码学专家和资深工程师才能涉足的领域。但事实上,构建一个区块链的核心并不复杂,尤其当你已经掌握了一门系统编程语言,比如 Go。 要真正理解区…...

Python常用模块:time、os、shutil与flask初探

一、Flask初探 & PyCharm终端配置 目的: 快速搭建小型Web服务器以提供数据。 工具: 第三方Web框架 Flask (需 pip install flask 安装)。 安装 Flask: 建议: 使用 PyCharm 内置的 Terminal (模拟命令行) 进行安装,避免频繁切换。 PyCharm Terminal 配置建议: 打开 Py…...