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;感受野 二、探究不同卷…

【开题报告】基于uniapp的在线考试小程序的设计与实现

1.研究背景 随着社会的发展和科技的进步&#xff0c;网络技术被广泛应用于教育领域。在线教育已成为当今发展趋势之一&#xff0c;其中在线考试更是具有重要的意义。传统的考试方式不仅耗费大量人力物力&#xff0c;而且存在考试成果的保密问题。而在线考试可以使考试过程更加…

JVM运行时数据区-堆

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

手搓一个ubuntu自动安装python3.9的sh脚本

#!/bin/bash# Step 1: 更新系统软件包 sudo apt update sudo apt upgrade -y sudo apt install -y software-properties-common# Step 2: 安装Python 3.9的依赖项 sudo apt install -y build-essential zlib1g-dev libncurses5-dev libgdbm-dev libnss3-dev libssl-dev libread…

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

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

使用udevdm查询蓝牙模块的信息

1.首先查询蓝牙设备在系统中的设备路径 udevadm info --querypath -n /dev/ttyS1 2.查询蓝牙设备的所有信息包括父设备信息 EMUELEC:~ # udevadm info -ap /devices/platform/ffd24000.serial/tty/ttyS1 备注&#xff1a;查询设备所有信息 udevadm info --queryall -n /dev…

关于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;由于员工流动性强、培训需求多样、考核流程繁琐…

[Emuelec]独立模拟器自动映射手柄按键脚本研究

在Emuelec中&#xff0c;对独立模拟器配置手柄按键是个非常头疼的事&#xff0c;难点在于emuelec的按钮配置映射到模拟器所需的按钮配置&#xff0c;更头疼的是&#xff0c;每个模拟器所需的配置都不相同&#xff0c;此时就需要花大把时间了解每个模拟器的配置上。好在&#xf…

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…

android 混淆

# 指定代码的压缩级别 0 - 7(指定代码进行迭代优化的次数&#xff0c;在Android里面默认是5&#xff0c;这条指令也只有在可以优化时起作用。) -optimizationpasses 5 # 混淆时不会产生形形色色的类名(混淆时不使用大小写混合类名) -dontusemixedcaseclassnames # 指定不去忽略…

适用于 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抓取到…