WEB APIs (4)

news2024/11/5 22:39:35

日期对象

实例化

代码中出现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) / 1000
         let h = parseInt(count / 3600 % 24)
         h = h > 10 ? h : '0' + h
         let m = parseInt(count / 60 % 60)
         m = m > 10 ? m : '0' + m
         let s = parseInt(count % 60)
         s = s > 10 ? s : '0' + s
         const hour = document.querySelector('.hour')
         const minutes = document.querySelector('.minutes')
         const scond = document.querySelector('.scond')
         hour.innerHTML = h
         minutes.innerHTML = m
         scond.innerHTML = s
        
      }
      
      fn() 

      setInterval(fn, 1000)
   </script>

</body>

</html>

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

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

相关文章

【IDEA关闭项目一直转圈】

IDEA关闭项目一直转圈&#xff1a; IDEA启动时&#xff0c;会自动打开上次关闭时所有显示的窗口&#xff0c;如果本次工作不需要上次打开的所有窗口&#xff0c;可以基于选择窗口界面的右上角去关闭。 项目关闭失败 但是偶尔会出现窗口关闭时&#xff0c;一直显示“正在关闭项…

【2024软件测试面试必会技能】Charles(5):Charles设置过滤

设置过滤 一、只展示window/mac上的指定网址 方法一&#xff1a;右击域名——Focus——可针对该域名以外的其他域名都进行过滤&#xff0c;只展示该域名的请求数据。如下图&#xff1a; 方法二&#xff1a; 在Filter输入框中输入指定域名对其他的进行过滤&#xff1b;只展示指…

51单片机学习(3)-----独立按键控制LED的亮灭状态

前言&#xff1a;感谢您的关注哦&#xff0c;我会持续更新编程相关知识&#xff0c;愿您在这里有所收获。如果有任何问题&#xff0c;欢迎沟通交流&#xff01;期待与您在学习编程的道路上共同进步了。 目录 一. 器件介绍及实验原理 1.独立按键 &#xff08;1&#xff09;独…

【算法】复杂度分析

第一章、如何分析代码的执行效率和资源消耗 我们知道&#xff0c;数据结构和算法解决的是“快”和“省”的问题&#xff0c;也就是如何让代码运行得更快&#xff0c;一级如何让代码更节省计算机的存储空间。因此&#xff0c;执行效率是评价算法好坏的一个非常重要的指标。那么&…

【PX4学习笔记】04.QGC地面站的使用

目录 文章目录 目录PX4代码烧入PX4固件代码的烧入方式1PX4固件代码的烧入方式2 QGC地面站的基础使用连接地面站的方式查看关键的硬件信息 QGC地面站的Application Settings模块Application Settings模块-常规界面单位其他设置数据持久化飞机中的数传日志飞行视图计划视图自动连…

【软件测试】如何有效的进行用例设计和评审

作为一个合格的测试工程师&#xff0c;必须掌握测试的日常工作流程。 那么在一个产品周期里面&#xff0c;测试工程师是什么时候介入工作的呢&#xff1f;具体承担了哪些工作呢&#xff1f; 这两问题&#xff0c;也是在日常面试中经常遇到的&#xff0c;这里我用一张思维导图进…

10种常见的光伏发电量计算方法

光伏发电是一种将太阳能转化为电能的清洁能源技术。随着环境保护意识的日益增强和能源结构的转型&#xff0c;光伏发电得到了广泛的应用。对于光伏系统来说&#xff0c;发电量的准确计算是评估系统性能、预测长期收益和优化系统运行的关键。以下是常见的光伏发电量计算方法&…

Android---Jetpack Compose学习007

Compose 附带效应 a. 纯函数 纯函数指的是函数与外界交换数据只能通过函数参数和函数返回值来进行&#xff0c;纯函数的运行不会对外界环境产生任何的影响。比如下面这个函数&#xff1a; fun Add(a : Int, b : Int) : Int {return a b } “副作用”&#xff08;side effe…

鱼哥赠书活动第⑧期:《基础软件之路:企业级实践及开源之路》

鱼哥赠书活动第⑧期&#xff1a;《基础软件之路&#xff1a;企业级实践及开源之路》 作者介绍&#xff1a;1.静态分析工具在当前软件开发流程中的应用2.编译相关技术在静态分析工具中的应用3.编译相关技术在提升软件质量和性能上的更多应用4. 未来展望图书推荐&#xff1a;赠书…

[计算机网络]---TCP协议

前言 作者&#xff1a;小蜗牛向前冲 名言&#xff1a;我可以接受失败&#xff0c;但我不能接受放弃 如果觉的博主的文章还不错的话&#xff0c;还请点赞&#xff0c;收藏&#xff0c;关注&#x1f440;支持博主。如果发现有问题的地方欢迎❀大家在评论区指正 目录 一 、TCP协…

springboot防止XSS攻击和sql注入

1. XSS跨站脚本攻击 ①&#xff1a;XSS漏洞介绍 跨站脚本攻击XSS是指攻击者往Web页面里插入恶意Script代码&#xff0c;当用户浏览该页之时&#xff0c;嵌入其中Web里面的Script代码会被解析执行&#xff0c;从而达到恶意攻击用户的目的。XSS攻击针对的是用户层面的攻击&…

web安全学习笔记【13】——信息打点(3)

信息打点-JS架构&框架识别&泄漏提取&API接口枚举&FUZZ爬虫&插件项目[1] #知识点&#xff1a; 1、业务资产-应用类型分类 2、Web单域名获取-接口查询 3、Web子域名获取-解析枚举 4、Web架构资产-平台指纹识别 ------------------------------------ 1、开源…

HTML好玩代码合集(1)

VIP代码合集🧧,这一期是场景式HTML代码,里面的文字也是可以修改的,不知道怎么修改可以私信我。 效果(玩个梗,别在意): 好玩代码: <!DOCTYPE html> <html> {#jishugang#}<head><meta charset="utf-8" /><title>怎么堵船了�…

【鸿蒙 HarmonyOS 4.0】UIAbility、页面及组件的生命周期

一、背景 主要梳理下鸿蒙系统开发中常用的生命周期 二、UIAbility组件 UIAbility组件是一种包含UI界面的应用组件&#xff0c;主要用于和用户交互。 UIAbility组件是系统调度的基本单元&#xff0c;为应用提供绘制界面的窗口&#xff1b;一个UIAbility组件中可以通过多个页…

300分钟吃透分布式缓存-08讲:MC系统架构是如何布局的?

系统架构 我们来看一下 Mc 的系统架构。 如下图所示&#xff0c;Mc 的系统架构主要包括网络处理模块、多线程处理模块、哈希表、LRU、slab 内存分配模块 5 部分。Mc 基于 Libevent 实现了网络处理模块&#xff0c;通过多线程并发处理用户请求&#xff1b;基于哈希表对 key 进…

软考-中级-系统集成2023年综合知识(一)

&#x1f339;作者主页&#xff1a;青花锁 &#x1f339;简介&#xff1a;Java领域优质创作者&#x1f3c6;、Java微服务架构公号作者&#x1f604; &#x1f339;简历模板、学习资料、面试题库、技术互助 &#x1f339;文末获取联系方式 &#x1f4dd; 软考中级专栏回顾 专栏…

H5星空渐变效果引导页源码

H5星空渐变效果引导页源码 源码介绍&#xff1a;H5星空渐变效果引导页源码是一款带有星空渐变效果的源码&#xff0c;内含3个可跳转旗下站点按钮。 下载地址&#xff1a; https://www.changyouzuhao.cn/8344.html

Java 面向对象进阶 16 接口的细节:成员特点和接口的各种关系(黑马)

成员变量默认修饰符是public static final的原因是&#xff1a; Java中接口中成员变量默认修饰符是public static final的原因是为了确保接口的成员变量都是公共的、静态的和不可修改的。 - public修饰符确保了接口的成员变量可以在任何地方被访问到。 - static修饰符使得接口…

进程线程间的通信:2024/2/22

作业1&#xff1a;代码实现线程互斥机制 代码&#xff1a; #include <myhead.h>//临界资源 int num10;//创建一个互斥锁 pthread_mutex_t mutex;//任务一 void *task1(void *arg) {//获取锁资源pthread_mutex_lock(&mutex);num123;sleep(3);printf("task1:num…