webJS基础-----制作一个时间倒计时

news2024/11/27 3:37:21

1,可以使用以下两个方式制作

方式1:setTimeout ()定时器是在指定的时间后执行某些代码,代码执行一次就会自动停止;

方式2:setInterval ()定时器是按照指定的周期来重复执行某些代码,该定时器不会自动停止,需要调用clearInterval ()来手动停止

2,参考代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div">
			
		</div>
		<div id="div1">
			
		</div>
		<script type="text/javascript">
			//getTime方法用于获取时间戳
			// 1,时间倒计时设计方式1
			timer();//setTimeout函数需要手动调用
			function timer(){
				var nowdate = new Date();
				var aimDate = new Date("2024/01/01 00:00:00");//获取指定的未来时间
				var cur = aimDate.getTime() - nowdate.getTime();//获取时间戳之差
				if(cur==0||cur<0){
					document.getElementById('div').innerHTML = '新年快乐!';
					return;//返回函数,停止调用其后的语句
				}
				var d = Math.floor(cur/1000/60/60/24);
				var h = Math.floor(cur/1000/60/60%24);
				var m = Math.floor(cur/1000/60%60);
				var s = Math.floor(cur/1000%60);
				var ms = Math.floor(cur%1000);
				document.getElementById('div').innerHTML = '距离2024年还有'+d+'天'+h+'时'+m+'分钟'+s+'秒'+ms+'毫秒';
				setTimeout('timer()',1);
			}
			//2,时间倒计时方式2
				
			var timer1 = setInterval(function(){
				var nowdate = new Date();
				var aimDate = new Date("2024/01/01 00:00:00");
				var cur = aimDate.getTime() - nowdate.getTime();
				if(cur==0||cur<0){
					document.getElementById('div').innerHTML = '新年快乐!';
					clearInterval(timer1);//停止函数
					return;
				}
				var d = Math.floor(cur/1000/60/60/24);
				var h = Math.floor(cur/1000/60/60%24);
				var m = Math.floor(cur/1000/60%60);
				var s = Math.floor(cur/1000%60);
				var ms = Math.floor(cur%1000);
				document.getElementById('div1').innerHTML = '距离2024年还有'+d+'天'+h+'时'+m+'分钟'+s+'秒'+ms+'毫秒';
         	},1);										 
		</script>
	</body>
</html>

3,结果示例如下

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

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

相关文章

从 LLM 大模型到 AI Agent 技术演进

▼最近直播超级多&#xff0c;预约保你有收获 近期直播&#xff1a;《基于 LLM 大模型的微调构建AI Agents 案例实践》 —1— LLM 大模型有哪些局限性&#xff1f; 给定一些字或者词&#xff08;称为 token&#xff09;&#xff0c;预测下一个字或者词模型&#xff0c;就是语言…

基于Magma构建灵活、低成本无线接入网

传统蜂窝网络一般基于特定接入技术并针对大规模公共网络设计&#xff0c;无法灵活适配小规模网络以及异构无线技术。本文介绍了Magma在构建低成本异构无线接入方面的探索。原文: Building Flexible, Low-Cost Wireless Access Networks With Magma 摘要 当今仍然有数十亿人受限…

想学计算机编程从什么学起?零基础如何自学计算机编程?中文编程开发语言工具箱之渐变标签组构件

想学计算机编程从什么学起&#xff1f;零基础如何自学计算机编程&#xff1f; 给大家分享一款中文编程工具&#xff0c;零基础轻松学编程&#xff0c;不需英语基础&#xff0c;编程工具可下载。 这款工具不但可以连接部分硬件&#xff0c;而且可以开发大型的软件&#xff0c;…

跨平台联调代码:Windows下VS2022远程连接Linux-protobuf为例

文章目录 Linux上头文件的位置Linux上共享库的位置Linux上配置好环境变量Windows上VS上的设置添加包含目录与库目录设置链接参数-库依赖项设置编译参数更新远程标头管理器代码的书写输出 Linux上头文件的位置 Linux上我的protobuf头文件的位置为&#xff1a; /usr/local/prot…

2023年中国制糖行业研究报告

第一章 行业概况 1.1 定义 制糖行业是指以甘蔗、甜菜等为主要原料&#xff0c;通过一系列的工艺流程&#xff0c;生产糖以及相关副产品的产业。它是食品工业的重要组成部分&#xff0c;为人们日常生活中的甜蜜体验提供了必不可少的物质基础。 主要原料&#xff1a; 制糖行业…

深入剖析:正则表达式的奥秘

简介 正则表达式&#xff08;Regular Expressions&#xff09;是一种强大的文本处理工具&#xff0c;一种用于匹配文本模式的字符串。它由特定的字符和操作符组成&#xff0c;用于定义一个搜索模式。这些搜索模式可以用于文本搜索、替换、验证和提取数据等多种用途。 以下是一…

在搜索引擎中屏蔽csdn

csdn是一个很好的技术博客&#xff0c;里面信息很丰富&#xff0c;我也喜欢在csdn上做技术笔记。 但是CSDN体量太大&#xff0c;文章质量良莠不齐。当在搜索引擎搜索技术问题时&#xff0c;搜索结果中CSDN的内容占比太多&#xff0c;导致难以从其他优秀的博客平台中获取信息。因…

Mac安装VMware

去官网下载一下VMware Download VMware Fusion | VMware | SG 下载完成之后&#xff0c;打开直接闪退&#xff0c;参考这篇文章解决 解决macOS13安装Fusion13闪退的问题-CSDN博客 然后即可成功顺行

linux入门到地狱

linux—001入门 IT圈必备(前端工作者用的比较少) 老旧电脑跑linux不容易卡 我代码没保存windows闪退&#xff0c;僵停(vs2019卡掉线)&#xff0c;重启更新,占用cpu内存服务报错pip各种bug 出来生态环境友好其他的全是bug(bug时间成本超过了windows快捷友好生态) 那就说明wind…

行业安卓主板-基于RK3568/3288/3588的AI视觉秤/云相框/点餐机/明厨亮灶行业解决方案(一)

AI视觉秤 单屏Al秤集成独立NPU&#xff0c;可达0.8Tops算力&#xff0c;令AI运算效率大幅提升&#xff0c;以实现生鲜商品快速准确识别&#xff0c;快速称重打印标签&#xff0c;降低生鲜门店运营成本&#xff0c;缓解高峰期称重排队拥堵的现象&#xff0c;提高称重效率&#…

1、Sentinel基本应用限流规则(1)

Sentinel基本应用&限流规则 1.1 概述与作用 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。缓存、降级和限流是保护微服务系统运行稳定性的三大利器。 缓存&#xff1a;提升系统访问速度和增大系统能处理的容量 降级&#xff1a;当服务出问题或者影…

如何写复盘报告

复盘报告在it公司中是为了在出现事情后&#xff0c;我们更好的回顾事情的前因后果&#xff0c;定位问题&#xff0c;指定解决措施&#xff0c;并且宣导&#xff0c;让这类事情减少发生的概率。那复盘报告一般怎样写合适呢&#xff1f;下来我们就看看&#xff0c; 一、一般会先…

Elasticsearch:RAG vs Fine-tunning (大语言模型微调)

如果你对 RAG 还不是很熟悉的话&#xff0c;请阅读之前的文章 “Elasticsearch&#xff1a;什么是检索增强生成 - RAG&#xff1f;”。你可以阅读文章 “Elasticsearch&#xff1a;在你的数据上训练大型语言模型 (LLM)” 来了解更多关于如何训练你的模型。在今天的文章中&#…

Linux项目自动化构建工具-make/Makefile使用

make/Makefile使用介绍 make是一个命令makefile是一个在当前目录下存在的一个具有特定格式的文本文件 ​ 下面我们设计一个场景&#xff0c;实现make命令对我们code.c文件进行编译和删除。 1 #include<stdio.h> 2 3 int main() 4 { 5 printf("hello,world!…

账户权限控制

1.首先配置一个单群组4节点的链 1.1创建操作目录 cd ~ && mkdir -p fisco && cd fisco 1.2下载国内脚本 curl -#LO https://osp-1257653870.cos.ap-guangzhou.myqcloud.com/FISCO-BCOS/FISCO-BCOS/releases/v2.9.1/build_chain.sh && chmod ux bu…

Python算法例7 四数乘积

1. 问题描述 给定一个长度为n的数组a和一个正整数k&#xff0c;从数组中选择四个数&#xff0c;要求四个数的乘积小于等于k&#xff0c;求方案总数。 2. 问题示例 给定n5&#xff0c;a[1&#xff0c;1&#xff0c;1&#xff0c;2&#xff0c;2]&#xff0c;k3&#xff0c;返…

R语言 复习 习题图片

这是日天土申哥不知道从哪淘来的R语言复习知识点图片&#xff0c;大部分内容都是课后习题的答案 加油吧&#xff0c;骚年&#xff0c;考个好分数

【重学C++基础知识笔记】详细版

基础 常量 C++ 中有两种简单的定义常量的方法: 使用#define,如:#define PI 3.1415926;使用const, 如:const double PI = 3.1415926;注明: 尽量使用const定义变量,#define不会出现在编译器期 #define ASPECT RATIO 1.653 // 在编译时出错,很难排错const doubl…

windows自动登陆

新建文本粘贴下面代码&#xff0c;另存为注册表文件 Windows Registry Editor Version 5.00[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Driver Signing] "Policy"hex:00[HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows NT\CurrentVersion\Winlogon]"DefaultUserN…

04 矩阵乘法与线性变换复合

矩阵乘法与线性变换复合 复合变换 这是关于3Blue1Brown "线性代数的本质"的学习笔记。 复合变换 图1 复合变换 复合变换原则&#xff0c;依次变换&#xff0c;即先变换的矩阵乘待变换的向量后&#xff0c;得到的结果&#xff0c;再用后变换的矩阵乘此结果向量。从矩…