Web APIs——日期对象的使用

1、日期对象

日期对象:用来表示时间的对象

作用:可以得到当前系统时间

1.1实例化

在代码中发现了new关键字时,一般将这个操作称为实例化

创建一个时间对象并获取时间

        获得当前时间

        const date = new Date()

    <script>// 实例化 new // 1. 得到当前时间const date = new Date()console.log(date)// 2. 指定时间const date1 = new Date('2023-11-1 09:03')console.log(date1)</script>

1.2时间对象方法

使用场景:因为日期对象返回的数据我们不能直接使用,所以需要转换为实际开发中常用的格式

方法作用说明
getFullYear()获得年份获取四位年份
getMonth()获得月份取值为0~11
getDate()获取月份中的每一天不同月份取值也不相同
getDay()获取星期取值为0~6
getHours()获取小时取值为0~23
getMinutes()获取分钟取值为0~59
getSeconds()获取秒取值为0~59
    <script>// 获得日期对象const date = new Date()// 使用里面的方法console.log(date.getFullYear)console.log(date.date.getMonth() + 1)console.log(date.getDate)console.log(date.getDay)</script>

1.2.3 页面显示时间 

需求:将当前时间以:YYYY-MM-DD HH:mm形式显示在页面 2008-08-08 08:08

分析:

①:调用时期对象方法进行转换

②:记得数字要补0

方法一:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 40px;border: 1px solid #000;text-align: center;line-height: 40px;}</style>
</head>
<body><div></div><script>const div = document.querySelector('div')function getMgDate(){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.getDate()}号 ${h}:${m}:${s}`}div.innerHTML = getMgDate()setInterval(function () {div.innerHTML = getMgDate()}, 1000)</script>
</body>
</html>

方法二:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {width: 300px;height: 40px;border: 1px solid #000;text-align: center;line-height: 40px;}</style>
</head>
<body><div></div><script>const div = document.querySelector('div')// 得到日期对象const date = new Date()div.innerHTML = date.toLocaleString()      setInterval(function(){const date = new Date()div.innerHTML = date.toLocaleString() },1000)// div.innerHTML = date.toLocaleDateString()// div.innerHTML = date.toLocaleTimeString() </script></body>
</html>

1.3时间戳

使用场景:如果计算倒计时效果,前面方法无法直接计算,需要借助于时间戳完成

什么是时间戳:

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

算法:

  • 将来的时间戳 - 现在的时间戳 = 剩余时间毫秒数
  • 剩余时间毫秒数 转换为 剩余时间的 年 月 日 时 分 秒 就是 倒计时时间
  • 比如  将来时间戳 2000ms - 现在时间戳 1000ms = 1000ms
  • 1000ms转换为就是 0小时0分1秒

1.3.1 三种方式获取时间戳

(1) 使用getTime() 方法

(2) 简写 +new Date()

  • 无需实例化
  • 可以返回当前时间戳或者指定的时间戳

(3) 使用Date.now()

  • 无需实例化
  • 但是只能得到当前的时间戳,而前面两种可以返回指定时间的时间戳

根据日期Day() 0~6 

    <script> const  arr = ['星期天','星期一','星期二','星期三','星期四','星期五','星期六']console.log(arr[new Date().getDay()])</script>

2、倒计时效果

需求:计算到下课还有多少时间

分析:

①:用将来时间减去现在时间就是剩余时间

②:核心:使用将来的时间戳减去现在的时间戳

③:把剩余的时间转换为 天 时  分 秒

注意:

  1. 通过时间戳得到是毫秒,需要转换为秒在计算
  2. 转换公式:

<!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="scond">20</span></p><p class="tips">18:30:00下课</p></div><script>// 随机颜色函数// 1. 自定义一个随机颜色函数function getRandomColor(flag = true) {if (flag) {// 3. 如果是true 则返回 #fffffflet str = '#'let arr = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f']// 利用for循环随机抽6次 累加到 str里面for (let i = 1; i <= 6; i++) {// 每次要随机从数组里面抽取一个  // random 是数组的索引号 是随机的let random = Math.floor(Math.random() * arr.length)// str = str + arr[random]str += arr[random]}return str} else {// 4. 否则是 false 则返回 rgb(255,255,255)let r = Math.floor(Math.random() * 256)  // 55let g = Math.floor(Math.random() * 256)  // 89let b = Math.floor(Math.random() * 256)  // 255return `rgb(${r},${g},${b})`}}// 页面刷新随机得到颜色const countdown = document.querySelector('.countdown')countdown.style.backgroundColor = getRandomColor()// 函数封装 getCountTimefunction getCountTime() {// 1. 得到当前的时间戳const now = +new Date()// 2. 得到将来的时间戳const last = +new Date('2023-11-1 18:30:00')// console.log(now, last)// 3. 得到剩余的时间戳 count  记得转换为 秒数const count = (last - now) / 1000// console.log(count)// 4. 转换为时分秒// h = parseInt(总秒数 / 60 / 60 % 24)   //   计算小时// m = parseInt(总秒数 / 60 % 60);     //   计算分数// s = parseInt(总秒数 % 60);   // let d = parseInt(count / 60 / 60 / 24)               //   计算当前秒数let h = parseInt(count / 60 / 60 % 24)h = h < 10 ? '0' + h : hlet m = parseInt(count / 60 % 60)m = m < 10 ? '0' + m : mlet s = parseInt(count % 60)s = s < 10 ? '0' + s : sconsole.log(h, m, s)//  5. 把时分秒写到对应的盒子里面document.querySelector('#hour').innerHTML = hdocument.querySelector('#minutes').innerHTML = mdocument.querySelector('#scond').innerHTML = s}// 先调用一次getCountTime()// 开启定时器setInterval(getCountTime, 1000)</script>
</body></html>

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

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

相关文章

UE5 Android下载zip文件并解压缩到指定位置

一、下载是使用市场的免费插件 二、解压缩是使用市场的免费插件 三、Android路径问题 windows平台下使用该插件没有问题&#xff0c;只是在Android平台下&#xff0c;只有使用绝对路径才能进行解压缩&#xff0c;所以如何获得Android下的绝对路径&#xff1f;增加C文件获得And…

铁轨(Rails, ACM/ICPC CERC 1997, UVa 514)rust解法

有一个火车站&#xff0c;铁轨铺设如图6-1所示。有n节车厢从A方向驶入车站&#xff0c;按进站顺序编号为1&#xff5e;n。你的任务是判断是否能让它们按照某种特定的顺序进入B方向的铁轨并驶出车站。例如&#xff0c;出栈顺序(5 4 1 2 3)是不可能的&#xff0c;但(5 4 3 2 1)是…

python使用requests+excel进行接口自动化测试

在当今的互联网时代中&#xff0c;接口自动化测试越来越成为软件测试的重要组成部分。Python是一种简单易学&#xff0c;高效且可扩展的语言&#xff0c;自然而然地成为了开发人员的首选开发语言。而requests和xlwt这两个常用的Python标准库&#xff0c;能够帮助我们轻松地开发…

29、枚举

枚举 枚举使用场景枚举语法及特性特性&#xff1a; 手动给枚举赋值手动赋值项和未手动赋值项重复手动赋值项智能赋值数字&#xff1f;NO常数项和计算项常数枚举外部枚举 枚举使用场景 枚举类型 用于取值被限定在一定范围内的场景。 demo&#xff1a; 一周只能有七天&#xff0…

sqlLite 如何使用数据库连接池

文章底部有个人公众号&#xff1a;热爱技术的小郑。主要分享开发知识、学习资料、毕业设计指导等。有兴趣的可以关注一下。为何分享&#xff1f; 踩过的坑没必要让别人在再踩&#xff0c;自己复盘也能加深记忆。利己利人、所谓双赢。 一、前言 编写的一个jar包工具中&#xff…

JS(JavaScript) 实现延迟等待(sleep方法)

起因&#xff1a; 只使用 setTimeout 会产生嵌套等方面的问题&#xff0c;达不到想要的效果。 解决方法&#xff1a; 使用 async/await 还有 Promise 相结合的方式来解决问题。 直接上代码&#xff1a; function sleep(time) {return new Promise((resolve) > setTimeout…

公众号留言功能报价是多少?值得开通吗?

为什么公众号没有留言功能&#xff1f;根据要求&#xff0c;自2018年2月12日起&#xff0c;新申请的微信公众号默认无留言功能。有些人听过一个说法&#xff1a;公众号粉丝累计到一定程度或者原创文章数量累计到一定程度就可以开通留言功能。其实这个方法是2018年之前才可以&am…

三氧化二铁纳米片

&#xff08;西&#xff09;三氧化二铁纳米片 &#xff08;安&#xff09;名称&#xff1a;三氧化二铁纳米片 &#xff08;瑞&#xff09;CAS&#xff1a;1309-37-1 &#xff08;禧&#xff09;分子式&#xff1a;Fe2O3 &#xff08;生&#xff09;外观&#xff1a;白色粉末…

链表的引入

什么是链表 链表一种线性的数据结构&#xff0c;通过指针将一个个零散的内存块连接起来&#xff0c;链表的每个内存块称为结点。结构体指针在这里得到了充分的利用。 为什么要使用链表 链表可以动态的进行存储分配&#xff0c;也就是说&#xff0c;链表是一个功能极为强大的数…

518抽奖软件,是否支持作弊~内定~指定中奖人~设置范围

518抽奖软件简介 518抽奖软件&#xff0c;518我要发&#xff0c;超好用的年会抽奖软件&#xff0c;简约设计风格。 包含文字号码抽奖、照片抽奖两种模式&#xff0c;支持姓名抽奖、号码抽奖、数字抽奖、照片抽奖。(www.518cj.net) 主打纯净&#xff0c;不可作弊 市面上&…

7. 一文快速学懂常用工具——Makefile

本章讲解知识点 引言 Makefile Makefile 入门 本专栏适合于软件开发刚入职的学生或人士&#xff0c;有一定的编程基础&#xff0c;帮助大家快速掌握工作中必会的工具和指令。本专栏针对面试题答案进行了优化&#xff0c;尽量做到好记、言简意赅。如专栏内容有错漏&#xff0…

Flask 网站装潢, 简易更换模板

Flask 网站装潢&#xff0c;简易更换模板 本博文找个好看的网页模板&#xff0c;并简单改一改变成flask模板&#xff0c;并展示 主博客目录&#xff1a;《从零开始学习搭建量化平台笔记》 文章目录 Flask 网站装潢&#xff0c;简易更换模板下载模板Python 自动生成目录修改目录…

C# 使用 REST API HTTP 客户端生成器

本文内容 使用 AutoClientAttribute使用谓词属性定义 HTTP 方法HTTP 有效负载HTTP 头 显示另外 2 个 备注 此 API 是实验性的。 它可能会在后续版本的库中更改&#xff0c;并且无法保证向后兼容性。 HttpClient是使用 REST API 的好方法&#xff0c;但存在挑战。 其中一个挑…

CMake基础【学习笔记(八)】

声明此博客为转载 CMake基础 文章目录 CMake基础一、准备知识1.1 C的编译过程1.2 静态链接库和动态链接库1.3 为什么需要CMake1.3.1 g 命令行编译1.3.2 CMake简介 二、CMake基础知识2.1 安装2.2 第一个CMake例子2.3 语法基础2.3.1 指定版本2.3.2 设置项目2.3.3 添加可执行文件…

华纳云 宝塔怎么配置香港服务器多ip?

宝塔面板是一款开源的服务器管理面板&#xff0c;提供了简单易用的图形化界面&#xff0c;使用户能够轻松管理和配置服务器。通过切换到香港服务器多IP&#xff0c;用户可以拥有更多的IP资源&#xff0c;提供更灵活的网络服务。 配置香港服务器多IP 1.登录宝塔面板 打开浏览器&…

Goby 漏洞发布| Cisco IOS XE ebui_wsma_http 接口权限绕过漏洞(CVE-2023-20198)

漏洞名称&#xff1a; Cisco IOS XE ebui_wsma_http 接口权限绕过漏洞&#xff08;CVE-2023-20198&#xff09; English Name&#xff1a; Cisco IOS XE ebui_wsma_http API Permission Bypass Vulnerability (CVE-2023-20198) CVSS core: 10 影响资产数&#xff1a; 307282…

kafka为什么如此之快?

天下武功&#xff0c;唯快不破。同样的&#xff0c;kafka在消息队列领域&#xff0c;也是非常快的&#xff0c;这里的块指的是kafka在单位时间搬运的数据量大小&#xff0c;也就是吞吐量&#xff0c;下图是搬运网上的一个性能测试结果&#xff0c;在同步发送场景下&#xff0c;…

以八数码问题为例实现A*算法的求解(未完结)

八数码&#xff1a; 在一个 33 的网格中&#xff0c;1∼8 这 8 个数字和一个 x 恰好不重不漏地分布在这 33 的网格中。 例如&#xff1a; 1 2 3 x 4 6 7 5 8在游戏过程中&#xff0c;可以把 x 与其上、下、左、右四个方向之一的数字交换&#xff08;如果存在&#xff09;。…

(11月4日)GBASE南大通用 x openGauss Meetup,欢迎报名

由openGauss社区、天津南大通用数据技术股份有限公司主办&#xff0c;伟仕佳杰科技有限公司、神州数码&#xff08;中国&#xff09;有限公司协办的“GBASE南大通用 x openGauss Meetup”活动将于2023年11月4日&#xff08;周六&#xff09;在合肥市高新区云飞路66号天源迪科科…

3DEXPERIENCE云端项目管理小工具--Project Planner项目策划者角色

云端3DEXPERIENCE平台提供了一个协作环境&#xff0c;使企业和个人能够以全新的方式实现创新。它将人员、创意、数据和解决方案连接到一个始终在线且可用的协作和交互环境中&#xff0c;可以帮助您的企业提高执行力、生产率并加速创新。 3DEXPERIENCE中的Project Planner项目策…