【Web API DOM10】日期(时间)对象

一:实例化

1 获取系统当前时间即创建日期对象

const date = new Date()
console.log(date)

2024年6月5日周三 

2 获取指定的时间

以获取2025年6月29日为例

const date = new Date('2025-6-29')
console.log(date)

二:日期对象方法

1 使用场景:

日期对象返回数据如上图,无法直接使用;因此要利用日期对象方法,转化成可以使用的格式

2 具体方法如下:

注:

getDay()中,星期天是数字0,而不是7

getMonth(),获取的月份要加1,才是正常月份显示

3 显示当前时间案例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div></div><script>function getDate() {const date = new Date()let h = date.getHours()let m = date.getMinutes()let s = date.getSeconds()h = h < 10 ? 0 + h : hm = m < 10 ? 0 + m : ms = s < 10 ? 0 + s : sreturn `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDay()} ${h}:${m}:${s}`}const div = document.querySelector('div')//避免页面刷新,留下的空白div.innerHTML = getDate()setInterval(function () {div.innerHTML = getDate()}, 1000)</script>
</body></html>

三:时间戳

 1 什么是时间戳

指1970年01月01日00时00分00秒起至现在的毫秒数,它是一种特殊的计量时间的方式

最典型的应用场景:倒计时计算

2 倒计时算法

将来时间戳-现在时间戳 = 剩余时间毫秒数

剩余时间毫秒数 转换为 剩余时间的年月日时分秒 就是倒计时时间

3 获取时间戳的方式

1 const date = new Date()
date.getTime()
2 +new Date()
//既可以返回当前的时间戳,也可以返回指定时间的时间戳
3 Date.now()
//只能得到当前的时间戳,而且前面两种可以返回指定时间的时间戳

四:案例倒计时效果

案例分析

思路:

倒计时算法

注意点:

1 通过时间戳得到的是毫秒,需要转换为秒在计算

2 转换公式:

d = parseInt(总秒数/60/60/24)//天数

h = parseInt(总秒数/60/60%24)//小时

m = parseInt(总秒数/60%60)//分数

s = parseInt(总秒数%60)//当前秒数

3 setInterval(函数名,秒数)

函数名不加小括号

样式:

代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><style>.countdown {width: 240px;height: 305px;text-align: center;line-height: 1;color: #fff;background-color: brown;/* background-size: 240px; *//* float: left; */overflow: hidden;}.countdown .next {font-size: 16px;margin: 25px 0 14px;}.countdown .title {font-size: 33px;}.countdown .tips {margin-top: 80px;font-size: 23px;}.countdown small {font-size: 17px;}.countdown .clock {width: 142px;margin: 18px auto 0;overflow: hidden;}.countdown .clock span,.countdown .clock i {display: block;text-align: center;line-height: 34px;font-size: 23px;float: left;}.countdown .clock span {width: 34px;height: 34px;border-radius: 2px;background-color: #303430;}.countdown .clock i {width: 20px;font-style: normal;}</style>
</head><body><div class="countdown"><p class="next">今天是2222年2月22日</p><p class="title">下班倒计时</p><p class="clock"><span id="hour">00</span><i>:</i><span id="minutes">25</span><i>:</i><span id="second">20</span></p><p class="tips">18:30:00下课</p></div><script>function getTime() {//得到当前时间戳const now = +new Date()//得到将来时间戳const future = +new Date("2024-6-5 21:00:00")// console.log(now, future);const sy = (future - now) / 1000let h = parseInt(sy / 60 / 60 % 24)//小时let m = parseInt(sy / 60 % 60)//分数let s = parseInt(sy % 60)//当前秒数h = h >= 10 ? h : '0' + hm = m >= 10 ? m : '0' + ms = s >= 10 ? s : '0' + sdocument.querySelector('#hour').innerHTML = hdocument.querySelector('#minutes').innerHTML = mdocument.querySelector('#second').innerHTML = s}//避免页面存在数字影响getTime()//定时器中函数不加小括号,只写函数名setInterval(getTime, 1000)</script>
</body></html>

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

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

相关文章

关于信号翻转模块(sig_flag_mod)的实现

关于信号翻转模块(sig_flag_mod)的实现 语言 &#xff1a;Verilg HDL 、VHDL EDA工具&#xff1a;ISE、Vivado、Quartus II 关于信号翻转模块(sig_flag_mod)的实现一、引言二、实现信号翻转模块的方法&#xff08;1&#xff09;输入接口&#xff08;2&#xff09;输出接口&…

新手学习编程网站一站式合集

LTPP在线开发平台 探索编程世界的新天地&#xff0c;为学生和开发者精心打造的编程平台&#xff0c;现已盛大开启&#xff01;这个平台汇集了近4000道精心设计的编程题目&#xff0c;覆盖了C、C、JavaScript、TypeScript、Go、Rust、PHP、Java、Ruby、Python3以及C#等众多编程语…

【javaEE初阶】

&#x1f308;&#x1f308;&#x1f308;关于java ⚡⚡⚡java的由来 我们这篇文章主要是来介绍javaEE&#xff0c;一般称为java企业版&#xff0c;实际上java的历史可以追溯到上个世纪90年代&#xff0c;当时主要的语言主流的还是C语言和C&#xff0c;但是在那个时期嵌入式初…

小熊家务帮day13-day14 门户管理(ES搜索,Canal+MQ同步,索引同步)

目录 1 服务搜索1.1 需求分析1.2 技术方案1.2.1 使用Elasticsearch进行全文检索&#xff08;为什么数据没有那么多还要用ES&#xff1f;&#xff09;1.2.2 索引同步方案1.2.2.1 Canal介绍1.2.2.1 Canal工作原理 1 服务搜索 1.1 需求分析 服务搜索的入口有两处&#xff1a; 在…

c# 学习 2

常量 转义字符 类型转换

强化训练:day12(删除公共字符、两个链表的第一个公共结点、mari和shiny)

文章目录 前言1. 删除公共字符1.1 题目描述1.2 解题思路1.3 代码实现 2. 两个链表的第一个公共结点2.1 题目描述2.2 解题思路2.3 代码实现 3. mari和shiny3.1 题目描述3.2 解题思路3.3 代码实现 总结 前言 1. 删除公共字符   2. 两个链表的第一个公共结点   3. mari和shiny…

编译原理总结

编译器构成 1. 前端分析部分 1.1 词法分析 确定词性&#xff0c;输出为token序列 1.2 语法分析 识别短语 1.3 语义分析 分析短语在句子中的成分 IR中间代码生成 2. 机器无关代码优化 3. 后端综合部分 目标代码生成 机器相关代码优化 4. 其他 全局信息表 异常输出

一个思维狂赚20万+?揭秘电商平台隐藏的流量认知!

你想要的流量&#xff0c;资源&#xff0c;人脉&#xff0c;都已经有人为你准备&#xff0c;你只需要找到拥有这些资源的人。对于流量和信息&#xff0c;也是一样&#xff0c;你想找的客户和产品&#xff0c;都已经有人为你准备在淘宝、拼多多等电商平台&#xff0c;你只需要找…

IO流,文件操作

参考 Java IO 基础知识总结 | JavaGuide 史上最骚最全最详细的IO流教程&#xff0c;没有之一&#xff01; - 宜春 - 博客园 零、io-流简介 IO 即 Input/Output&#xff0c;输入和输出。数据输入到计算机内存的过程即输入&#xff0c;反之输出到外部存储&#xff08;比如数据…

[沫忘录]MySQL InnoDB引擎

[沫忘录]MySQL InnoDB引擎 逻辑存储结构 InnoDB采用 “表、段&#xff0c;区&#xff0c; 页、行” 这样的层级结构进行存储。 **表空间(tablespace)**ibd文件&#xff0c;主要用于存储记录、索引等数据&#xff0c;一个mysql实例可有多个表空间&#xff0c;甚至能通过innodb…

【机器学习】深度探索:从基础概念到深度学习关键技术的全面解析——梯度下降、激活函数、正则化与批量归一化

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、机器学习的基本概念与原理二、深度学习与机器学习的关系2.1 概念层次的关系2.2 技术特点差异2.3 机器学习示例&#xff1a;线性回归&#xff08;使用Python和scikit-learn库&#xff09;2.4 深度学习示例&#xff1a;简…

在cmd菜单中使用自定义命令通过bat和powershell命令调用翻译API

先说一个血淋淋的结果&#xff0c;这个小功能其实在github已经有大佬帮我们封装好了&#xff0c;我也是自己刚倒腾好之后才发现的&#xff0c;所以如果只是需要这个功能的朋友可以直接移步这个项目&#xff1a;https://github.com/kenshinji/yddict&#xff0c;自己电脑安装一个…

Linux 磁盘分区步骤

1.lsblk用于查看磁盘分区情况&#xff0c;lsblk -f用于查看uuid字符串以及挂载点。 以下是虚拟机部分添加磁盘的步骤。 其余没展示的都按照默认设置进入下一步即可。 2.添加完成后使用reboot重新进入后再使用lsblk就会发现磁盘sdb已经有了&#xff0c;但是没有分区。现在添加分…

三十六、openlayers官网示例Earthquake Clusters解析——在聚合图层鼠标触摸显示五角星

官网demo地址&#xff1a; Earthquake Clusters 这篇展示了鼠标触摸聚合图层点位显示五角星的效果。 首先是初始化地图&#xff0c;加载了一个KML格式的矢量数据源&#xff0c;extractStyles为false表示不从kml数据源中提取样式。使用Select添加了鼠标选中的交互事件 vector …

【Kubernetes】 emptyDir、nfs存储卷 和 PV、PVC

emptyDir存储卷 当pod被分配给节点 容器和容器之间进行共享存储 hostPath nfs共享存储卷 NAS 专业的存储设备&#xff1b;一般是与NFS 搭配&#xff0c;然后共享出去 GFS 自己搭&#xff1b;CEPH(至少要9台) 第三方&#xff1b;NAS 第三方&#xff1b; 云端 oss …

【wiki知识库】05.分类管理模块--后端SpringBoot模块

&#x1f4dd;个人主页&#xff1a;哈__ 期待您的关注 目录 一、&#x1f525;今日目标 二、☀SpringBoot代码修改 1.使用逆向工程生成Category表结构 2. 新增CategoryQueryParam 3.新增CategorySaveParam 4.新增CategotyQueryVo 三、&#x1f916;新增分类管理的相关接口…

v1.2.70-FastJson的AutoType机制研究

v1.2.70-FastJson的AutoType机制研究 最近在对接Alexa亚马逊语音技能&#xff0c;Smart Home Skill Apis时&#xff0c;有一个配置的JSON字符串是这样的&#xff1a; { "capabilityResources": {"friendlyNames": [{"type": "asset",…

python图像识别库-pytesseract

内容目录 一、安装1.安装tesseract OCR1) MAC中安装2) Windows中安装3) 中文报下载 二、pytesseract的简单使用 pytesseract是python的一个用于图像提取的库, 它实际上是对Tesseract OCR引擎的封装。pytesseract使得在Python项目中调用Tesseract变得更加简便&#xff0c;主要用…

17K star,一款开源免费的手机电脑无缝同屏软件

导读&#xff1a;白茶清欢无别事&#xff0c;我在等风也等你。 作为程序员&#xff0c;在我们的工作中经常需要把手机投票到电脑进行调试工作&#xff0c;选择一款功能强大的投屏软件是一件很必要的事情。今天给大家介绍一款开源且免费的投屏软件&#xff0c;极限投屏&#xff…

Arthas调优工具使用

1&#xff0c;服务器端下载 curl -O https://arthas.aliyun.com/arthas-boot.jar 2&#xff0c;服务器端启动 java -jar arthas-boot.jar 选定要绑定的Java进程ID 3&#xff0c;本地idea安装Arthas idea 4&#xff0c;选定方法右键trace,生成命令 trace com.xxx.xxx.xxx.vouche…