WEB APIs (4)

日期对象

实例化

代码中出现new关键字,创建时间对象

得到当前时间:

const date = new Date()

获得指定时间:

const date = new Date(‘2022-5-1’)

方法作用说明
getFullYear()获取年份获取四位年份
getmonth()获取月份取值0~11
getDate()获取月份中的每一天不同月份取值不同
getDay()获取星期取值0~6
getHours()获取小时取值0~23
getMinutes()获取分钟取值0~59
getSeconds()获取秒取值0~59

应用定时器可以实时显示时间

toLocaleString()、toLocaleDateString()、toLocaleTimeString()也可以显示粗略时间

时间戳

使用场景:倒计时效果

什么是时间戳:

1970年01月1日0时0分0秒其到现在毫秒数,计量时间的方式

算法:

将来的时间戳-现在的时间戳=剩余时间戳

三种方法

1.getTime()

2.+new Date()

获得指定时间戳:

3.Date.now()

对于返回星期有些特殊:

倒计时案例

<!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, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"><title>~</title><link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico"><link rel="stylesheet" href="css/初始化表.css"><link rel="stylesheet" href="css/index.css"><meta name="keywords" content="..." /><style>/*写代码时始终要考虑权重问题!*/@font-face {font-family: 'icomoon';src: url('fonts/icomoon.eot?au9n7q');src: url('fonts/icomoon.eot?au9n7q#iefix') format('embedded-opentype'),url('fonts/icomoon.ttf?au9n7q') format('truetype'),url('fonts/icomoon.woff?au9n7q') format('woff'),url('fonts/icomoon.svg?au9n7q#icomoon') format('svg');font-weight: normal;font-style: normal;font-display: block;}.countdown {width: 240px;height: 305px;text-align: center;color: #fff;background-color: brown;line-height: 1;overflow: hidden;}.countdown .next {font-size: 16px;margin: 25px 0 14px;}.countdown .title {font-size: 33px;}.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 .tips {margin-top: 80px;font-size: 23px;}.countdown .clock i {width: 20px;font-style: normal;}</style>
</head><body><div class="countdown"><p class="next"></p><p class="title">下班倒计时</p><p class="clock"><span class="hour"></span><i>:</i><span class="minutes"></span><i>:</i><span class="scond"></span></p><p class="tips">18:30:00 下课</p></div><script>let date = new Date()const next = document.querySelector('.next')next.innerHTML=date.toLocaleDateString()function fn() {let now = +new Date()let last = +new Date('2024-2-29 18:30:00')const count = (last - now) / 1000let h = parseInt(count / 3600 % 24)h = h > 10 ? h : '0' + hlet m = parseInt(count / 60 % 60)m = m > 10 ? m : '0' + mlet s = parseInt(count % 60)s = s > 10 ? s : '0' + sconst hour = document.querySelector('.hour')const minutes = document.querySelector('.minutes')const scond = document.querySelector('.scond')hour.innerHTML = hminutes.innerHTML = mscond.innerHTML = s}fn() setInterval(fn, 1000)</script></body></html>

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

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

相关文章

搜索专项---DFS之连通性模型

文章目录 迷宫红与黑 一、迷宫OJ链接 本题思路:DFS直接搜即可。 #include <iostream> #include <cstring> #include <algorithm>constexpr int N110;int n; char g[N][N]; bool st[N][N]; int x1, y1, x2, y2;int dx[4] {-1, 0, 1, 0}, dy[4] {0, 1, 0, …

2024 高级前端面试题之 计算机通识(基础) 「精选篇」

该内容主要整理关于 计算机通识&#xff08;基础&#xff09; 的相关面试题&#xff0c;其他内容面试题请移步至 「最新最全的前端面试题集锦」 查看。 计算机基础精选篇 一、网络1.1 UDP1.2 TCP1.3 HTTP1.4 DNS 二、数据结构2.1 栈2.2 队列2.3 链表2.4 树2.5 堆 三、算法3.1 时…

使用 Nuxt 构建简单后端接口及数据库数据请求

写在前面 本文主要为大家介绍&#xff0c;如何使用 Nuxt 框架实现一个简单的后端接口&#xff0c;并且从数据库中请求数据返回给前端。 实现 创建 serverMiddleware 文件夹 首先我们新建一个名字为 serverMiddleware 文件夹用来存储接口相关信息 目录结构如下&#xff1a;…

汽车电子论文学习--电动汽车电机驱动系统动力学特性分析

关键重点&#xff1a; 1. 汽车的低速转矩存在最大限制&#xff0c;受附着力限制&#xff0c;因路面不同而变化。 2. 起步加速至规定转速的时间可以计算得到&#xff1a; 3. 电机额定功率的计算方式&#xff1a; 可以采取最高设计车速90%或120km/h匀速行驶的功率作为电机额定功…

如何区分期权,很简单WeTrade众汇教你两招

二元期权有许多变体&#xff0c;很多投资者难以区分外汇和二元期权&#xff0c;很简单WeTrade众汇教你两招1秒快速区分&#xff0c;我们可以根据这两个最重要的参数进行区分: 1)合同类型的范围 只有一种外汇合约。当然&#xff0c;你可以交易货币对、差价合约、商品或证券&am…

脉冲电流源测试旁路二极管热性能方案

热斑效应&#xff1a;太阳能电池一般是由多块电池组件串联或并联起来。串联支路中可能由于电池片内部缺陷或者外部遮挡&#xff0c;将被当作负载消耗其他有光照的太阳电池组件所产生的能量。被遮蔽的太阳电池组件此时会严重发热而受损。 旁路二极管&#xff1a;是指并联于太阳能…

Nginx 403 forbidden

1、没有权限问题 Linux系统中如果Nginx没有web目录的操作权限&#xff0c;也会出现403错误。解决办法&#xff1a;修改web目录的读写权限&#xff0c;或者是把Nginx的启动用户改成目录的所属用户&#xff0c;重启Nginx即可解决。(windows 下则用管理员启动nginx即可)。 chmod -…

Android全新UI框架之Jetpack Compose入门基础

Jetpack Compose是什么 如果有跨端开发经验的同学&#xff0c;理解和学习compose可能没有那么大的压力。简单地说&#xff0c;compose可以让Android的原生开发也可以使用类似rn的jsx的语法来开发UI界面。以往&#xff0c;我们开发Android原生页面的时候&#xff0c;通常是在xml…

第2.4章 StarRocks表设计——分区分桶与副本数

目录 一、数据分布 1.1 概述 1.2 数据分布方式 1.2.1 Round-Robin 1.2.2 Range 1.2.3 List 1.2.4 Hash 1.3 StarRocks的数据分布方式 1.3.1 不分区 Hash分桶 1.3.2 Range分区Hash分桶 三、分区 3.1 分区概述 3.2 创建分区 3.2.1 手动创建分区 3.2.2 批量创建分区…

OJ_不连续1的子串

题干 C实现 #include<iostream> using namespace std;int f0(int n); int f1(int n);int main() {int n;cin >> n;cout << f0(n) f1(n);return 0; }int f0(int n) {//末尾为0的串if (n 1) {return 1;}else {return f0(n - 1) f1(n - 1);} } int f1(int n…

多维时序 | Matlab实现TCN-RVM时间卷积神经网络结合相关向量机多变量时间序列预测

多维时序 | Matlab实现TCN-RVM时间卷积神经网络结合相关向量机多变量时间序列预测 目录 多维时序 | Matlab实现TCN-RVM时间卷积神经网络结合相关向量机多变量时间序列预测效果一览基本介绍程序设计参考资料 效果一览 基本介绍 Matlab实现TCN-RVM时间卷积神经网络结合相关向量机…

【STM32】如何将版本信息编进代码?

文章目录 参考const uint8_t cu8RteBspVerName[]__attribute__((section(".ARM.__at_0x8011DA6"))) = "SY_ECU_STM32H563_V1.0.0.0";

C#,洗牌问题(Card Shuffle Problem)的算法与源代码

1 洗牌问题&#xff08;Card Shuffle Problem&#xff09; 洗牌问题&#xff08;Card Shuffle Problem&#xff09;的基本描述 你有 100 张牌&#xff0c;从 1 到 100。 你把它们分成 k 堆&#xff0c;然后按顺序收集回来。 例如&#xff0c;如果您将它们分成 4 堆&#xff0…

《Solidity 简易速速上手小册》第9章:DApp 开发与 Solidity 集成(2024 最新版)

文章目录 9.1 DApp 的架构和设计9.1.1 基础知识解析更深入的理解实际操作技巧 9.1.2 重点案例&#xff1a;去中心化社交媒体平台案例 Demo&#xff1a;创建去中心化社交媒体平台案例代码SocialMedia.sol - 智能合约前端界面 测试和验证拓展功能 9.1.3 拓展案例 1&#xff1a;去…

ASP.NET-实现图形验证码

ASP.NET 实现图形验证码能够增强网站安全性&#xff0c;防止机器人攻击。通过生成随机验证码并将其绘制成图像&#xff0c;用户在输入验证码时增加了人机交互的难度。本文介绍了如何使用 C# 和 ASP.NET 创建一个简单而有效的图形验证码系统&#xff0c;包括生成随机验证码、绘制…

《社交网络》计算机电影题材赏析及电影推荐

《社交网络》&#xff08;The Social Network&#xff09;是一部2010年上映的传记剧情片&#xff0c;由大卫芬奇执导&#xff0c;主要讲述了Facebook创始人马克扎克伯格的创业历程和与合作伙伴之间的法律纠纷。 剧情 开场&#xff1a; 马克扎克伯格&#xff08;由杰西艾森伯格…

Atcoder ABC341 A - Print 341

Print 341&#xff08;输出 341&#xff09; 时间限制&#xff1a;2s 内存限制&#xff1a;1024MB 【原题地址】 所有图片源自Atcoder&#xff0c;题目译文源自脚本Atcoder Better! 点击此处跳转至原题 【问题描述】 【输入格式】 【输出格式】 【样例1】 【样例输入1】 …

CentOS 中 YUM 源一键更新

文章目录 一、场景说明二、脚本职责三、参数说明四、操作示例五、注意事项 一、场景说明 本自动化脚本旨在为提高研发、测试、运维快速部署应用环境而编写。 脚本遵循拿来即用的原则快速完成 CentOS 系统各应用环境部署工作。 统一研发、测试、生产环境的部署模式、部署结构、…

离线环境解决IDEA连接数据库报需下载驱动的问题 Download missing driverfiles

去外网电脑上把这个目录下的MySQL ConnectorJ文件夹整体拷贝的内网电脑上就ok了&#xff01; C:\Users\like12\AppData\Roaming\JetBrains\IntelliJIdea2021.2\jdbc-drivers 参考&#xff1a;IDEA Download missing driver files 下载失败解决方法-CSDN博客

共享WiFi贴是什么,究竟安不安全?

在现代社会中&#xff0c;移动设备和互联网已经成为我们日常生活中不可或缺的一部分。为了方便我们的网络使用&#xff0c;越来越多的人选择使用公共WiFi&#xff0c;但是安全性成了很大的问题。而随着共享WiFi贴的出现&#xff0c;我们是否可以更加安全便捷地使用WiFi呢&#…