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

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,时间倒计时设计方式1timer();//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,时间倒计时方式2var 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.mzph.cn/news/130992.shtml

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

相关文章

DL Homework 6

目录 一、概念 &#xff08;1&#xff09;卷积 &#xff08;2&#xff09;卷积核 &#xff08;3&#xff09;特征图 &#xff08;4&#xff09;特征选择 &#xff08;5&#xff09;步长 &#xff08;6&#xff09;填充 &#xff08;7&#xff09;感受野 二、探究不同卷…

JVM运行时数据区-堆

目录 一、堆的核心概述 &#xff08;一&#xff09;概述 &#xff08;二&#xff09;堆空间细分 &#xff08;三&#xff09;jvisualvm工具 二、设置堆内存的大小与OOM 三、年轻代与老年代 四、图解对象分配一般过程 五、对象分配特殊过程 六、常用调优工具 七、Mino…

leetCode 416.分割等和子集 + 01背包 + 动态规划 + 记忆化搜索 + 递推 + 空间优化

关于此题我的往期文章&#xff1a; LeetCode 416.分割等和子集&#xff08;动态规划【0-1背包问题】采用一维数组dp:滚动数组&#xff09;_呵呵哒(&#xffe3;▽&#xffe3;)"的博客-CSDN博客https://heheda.blog.csdn.net/article/details/133212716看本期文章时&…

关于JADX和JEB的小问题

关于JADX和JEB的小问题 很久没水过技术文啦&#xff0c;最近也刚好遇到点小问题&#xff0c;特此记录 第一个问题 在处理app加密逻辑的时候一直拿不到正确的密文&#xff0c;反复看了反编译出来的代码&#xff08;如下图&#xff09; public static string n(String str, Stri…

基础课22——云服务(SaaS、Pass、laas、AIaas)

1.云服务概念和类型 云服务是一种基于互联网的计算模式&#xff0c;通过云计算技术将计算、存储、网络等资源以服务的形式提供给用户&#xff0c;用户可以通过网络按需使用这些资源&#xff0c;无需购买、安装和维护硬件设备。云服务具有灵活扩展、按需使用、随时随地访问等优…

linux 查看当前目录下每个文件夹大小

要在 Linux 中查看当前目录下每个文件夹的大小&#xff0c;可以使用 du 命令&#xff08;磁盘使用情况&#xff09;结合其他一些选项。下面是几个常用的命令示例&#xff1a; 显示当前目录下每个文件夹的大小——只显示一层文件夹&#xff1a; du -h --max-depth1该命令会以人…

2023年内衣行业分析:京东大数据平台-服饰内衣市场解析

如今&#xff0c;女性消费力的提升正在推动国内女性内衣市场份额逐年提升。而今年&#xff0c;内衣市场更是进入了存量之战&#xff0c;增长趋势明显减弱。 根据鲸参谋数据显示&#xff0c;今年1月至9月&#xff0c;京东平台内衣&#xff08;文胸&#xff09;累计销量约500万件…

【数智化案例展】某国际高端酒店品牌——呼叫中心培训数智化转型项目

‍ 维音案例 本项目案例由维音投递并参与数据猿与上海大数据联盟联合推出的《2023中国数智化转型升级创新服务企业》榜单/奖项”评选。 大数据产业创新服务媒体 ——聚焦数据 改变商业 培训是呼叫中心管理的重要环节&#xff0c;由于员工流动性强、培训需求多样、考核流程繁琐…

2003 - Can‘t connect to MysQL server on ‘39.108.169.0‘ (10060 “Unknown error“)

问题描述 某天和往常一样启动java项目&#xff0c;发现数据库出问题了&#xff0c;然后打开navicat&#xff0c;发现数据库的链接都连接不上&#xff0c; 一点击就会弹出报错框&#xff1a; 然后就各种上网搜索。 解决方案 上网查了一些解决方案&#xff0c;大部分都是说看…

hivesql,sql 函数总结:

1、NVL函数与Coalesce差异 -- select nvl(null,8); -- 结果是 8 -- select nvl(,7); -- 结果是"" -- select coalesce(null,null,9); -- 结果是 9 -- select coalesce("",null,9); -- 结果是 "" 1.2、 NVL函数与Coalesce差异 …

DB-GPT介绍

DB-GPT介绍 引言DB-GPT项目简介DB-GPT架构关键特性私域问答&数据处理多数据源&可视化自动化微调Multi-Agents&Plugins多模型支持与管理隐私安全支持数据源 子模块DB-GPT-Hub微调参考文献 引言 随着数据量的不断增长和数据分析的需求日益增多&#xff0c;将自然语言…

Technology strategy Pattern 学习笔记4 - Creating the Strategy-Corporate Context

Creating the Strategy-Corporate Context 1 •. Stakeholder Alignment 1.1 要成功&#xff0c;要尽可能获得powerful leader的支持 1.2 也需要获得最高执行层的支持 1.3 Determining&#xff08;确定&#xff09; Stakeholders 需要建立360度组织图&#xff0c;确认三类人…

基于深度学习的目标检测算法 计算机竞赛

文章目录 1 简介2 目标检测概念3 目标分类、定位、检测示例4 传统目标检测5 两类目标检测算法5.1 相关研究5.1.1 选择性搜索5.1.2 OverFeat 5.2 基于区域提名的方法5.2.1 R-CNN5.2.2 SPP-net5.2.3 Fast R-CNN 5.3 端到端的方法YOLOSSD 6 人体检测结果7 最后 1 简介 &#x1f5…

适用于 Linux 的 WPF:Avalonia

许多年前&#xff0c;在 WPF 成为“Windows Presentation Foundation”并将 XAML 作为 .NET、Windows 等的 UI 标记语言引入之前&#xff0c;有一个代号为“Avalon”的项目。Avalon 是 WPF 的代号。XAML 现在无处不在&#xff0c;XAML 标准是一个词汇规范。 Avalonia 是一个开…

EtherCAT主站写从站EEPROM抓包分析

0 工具准备 1.EtherCAT主站 2.EtherCAT从站&#xff08;本文使用步进电机驱动器&#xff09; 3.Wireshark1 抓包分析 1.1 报文总览 本文主站设置从站1字地址为0的EEPROM数据为0x3C00&#xff08;设置完毕后请还原字0的EEPROM数据&#xff09;&#xff0c;使用Wireshark抓取到…

Day 6 登录页以及路由(四)Vue页面处理

系列文章目录 本系列记录一下通过Abp搭建后端&#xff0c;VueElement UI Plus搭建前端&#xff0c;实现一个小型项目的过程。 Day 1 Vue 页面框架Day 2 Abp框架下&#xff0c;MySQL数据迁移时&#xff0c;添加表和字段注释Day 3 登录页以及路由 (一&#xff09;Day 4 登录页及…

CleanMyMac X2024破解版下载地址链接

如果你是一位Mac用户&#xff0c;你可能会遇到一些问题&#xff0c;比如Mac运行缓慢、磁盘空间不足、应用程序难以管理等。这些问题会影响你的Mac的性能和体验&#xff0c;让你感到沮丧和无奈。那么&#xff0c;有没有一款软件可以帮助你解决这些问题呢&#xff1f;答案是肯定的…

(免费领源码)Java#Springboot#mysql高校实训管理平台01557-计算机毕业设计项目选题推荐

目 录 摘要 1 绪论 1.1 研究背景 1.2 研究意义 1.3论文结构与章节安排 2 高校实训管理平台系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1 数据增加流程 2.2.2 数据修改流程 2.2.3 数据删除流程 2.3 系统功能分析 2.3.1 功能性分析 2.3.2 非功能性分析 2.4 系…

「图像 cv2.seamlessClone」无中生有制造数据

上一篇博客【「图像 merge」无中生有制造数据 】写的是图片直接融合&#xff0c;此方法生成的图片相对而言比较生硬&#xff0c;虽然目标图片已经透明化处理过了&#xff0c;但是生成的图片依旧很假 除了上述上述的图片叠加融合之外&#xff0c;还有一种更加自然的融合方法&…

Nginx+keepalived实现七层的负载均衡

1.keepalived VRRP 介绍 keepalived是什么&#xff1f; keepalived是集群管理中保证集群高可用的一个服务软件&#xff0c;用来防止单点故障。 keepalived工作原理 keepalived是以VRRP协议为实现基础的&#xff0c;VRRP全称Virtual Router Redundancy Protocol&…