js动态显示当前时间

目录

1、封装时间函数

2、在页面写一个div标签,用来存放时间

3、获取div标签,开启定时器,时间为1000ms

4、先调用时间函数,防止页面加载延迟,再在定时器里调用

完整代码 

效果图 


1、封装时间函数

  function getTime() {
            let date = new Date()//获取当前日期
            let year = date.getFullYear()//获取年
            year = year < 10 ? '0' + year : year
            let month = date.getMonth() + 1//获取月,月份要比实际月份小1,所以要加1
            month = month < 10 ? '0' + month : month
            let day = date.getDate()//获取日
            day = day < 10 ? '0' + day : day
            let hour = date.getHours()//获取时
            hour = hour < 10 ? '0' + hour : hour
            let minute = date.getMinutes()//获取分
            minute = minute < 10 ? '0' + minute : minute
            let second = date.getSeconds()//获取秒
            second = second < 10 ? '0' + second : second
            return `${year}年${month}月${day}日${hour}时${minute}分 ${second}秒`

        }

2、在页面写一个div标签,用来存放时间

<div></div>

3、获取div标签,开启定时器,时间为1000ms

 let div = document.querySelector('div')

4、先调用时间函数,防止页面加载延迟,再在定时器里调用

    div.innerHTML = getTime()
        setInterval(function () {
            div.innerHTML = getTime()

        }, 1000)

完整代码 

<!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: 350px;
            height: 50px;
            border: 1px solid red;
            text-align: center;
            color: white;
            font-size: 20px;
            font-weight: 700;
            background-color: darkorange;
            padding-top: 15px;
        }
    </style>
</head>
<div></div>

<body>
    <script>
        function getTime() {
            let date = new Date()//获取当前日期
            let year = date.getFullYear()//获取年
            year = year < 10 ? '0' + year : year
            let month = date.getMonth() + 1//获取月,月份要比实际月份小1,所以要加1
            month = month < 10 ? '0' + month : month
            let day = date.getDate()//获取日
            day = day < 10 ? '0' + day : day
            let hour = date.getHours()//获取时
            hour = hour < 10 ? '0' + hour : hour
            let minute = date.getMinutes()//获取分
            minute = minute < 10 ? '0' + minute : minute
            let second = date.getSeconds()//获取秒
            second = second < 10 ? '0' + second : second
            return `${year}年${month}月${day}日${hour}时${minute}分 ${second}秒`

        }
        let div = document.querySelector('div')
        div.innerHTML = getTime()
        setInterval(function () {
            div.innerHTML = getTime()

        }, 1000)

    </script>
</body>

</html>

效果图 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

asp.net 在线音乐网站系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net 在线音乐网站系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语言 开发 asp.net 在线音乐网站系统1 应用…

Least Square Method 最小二乘法(图文详解,必懂)

最小二乘法是一种求解线性回归模型的优化方法&#xff0c;其目标是最小化数据点和拟合直线之间的残差平方和。这意味着最小二乘法关注的是找到一个直线&#xff0c;使得所有数据点与该直线的偏差的平方和最小。在数学公式中&#xff0c;如果y是实际值&#xff0c;y是函数估计值…

计算机组成原理第四章(存储系统)(一)

一、存储器概述 1.分类&#xff1a; 存取方式&#xff1a;随机存储器&#xff08;RAM&#xff09;、顺序存储器&#xff08;SAM&#xff09;、直接存储器&#xff08;DAM&#xff09; 存储介质&#xff1a;磁性材料存储器、半导体存储器、光存储器 功能和存取速度&#xff1a; …

【阿里云】函数计算 X 通义千问快速部署

写在前面&#xff1a;博主是一只经过实战开发历练后投身培训事业的“小山猪”&#xff0c;昵称取自动画片《狮子王》中的“彭彭”&#xff0c;总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域&#xff0c;如今终有小成…

2023年施工升降机司机(建筑特殊工种)证模拟考试题库及施工升降机司机(建筑特殊工种)理论考试试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 2023年施工升降机司机(建筑特殊工种)证模拟考试题库及施工升降机司机(建筑特殊工种)理论考试试题是由安全生产模拟考试一点通提供&#xff0c;施工升降机司机(建筑特殊工种)证模拟考试题库是根据施工升降机司机(建筑特…

论文笔记--Baichuan 2: Open Large-scale Language Models

论文笔记--Baichuan 2: Open Large-scale Language Models 1. 文章简介2. 文章概括3 文章重点技术3.1 预训练3.1.1 预训练数据3.1.2 模型架构 3.2 对齐3.2.1 SFT3.2.2 Reward Model(RM)3.2.3 PPO 3.3 安全性 4. 文章亮点5. 原文传送门 1. 文章简介 标题&#xff1a;Baichuan 2…

IP-guard Webserver view 远程命令执行漏洞【2023最新漏洞】

IP-guard Webserver view 远程命令执行漏洞【2023最新漏洞】 一、漏洞描述二、漏洞影响三、漏洞危害四、FOFA语句五、漏洞复现1、手动复现yaml pocburp发包 2、自动化复现小龙POC检测工具下载地址 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传…

【小沐学写作】PPT、PDF文件添加水印(Python)

文章目录 1、简介2、ppt添加水印2.1 PowerPoint幻灯片母版2.2 iSlide插件&#xff08;收费&#xff09;2.2.1 iSlide简介2.2.2 iSlide定价2.2.3 iSlide水印 2.3 Python代码2.3.1 Aspose.Slides for Python&#xff08;收费&#xff09; 3、pdf添加水印3.1 Python代码3.1.1 PyPD…

头歌答案--数据持久化(非数据库)

目录 ​编辑 数据持久化&#xff08;非数据库&#xff09; 第1关&#xff1a;数据持久化&#xff08;非数据库&#xff09; 任务描述 多线程、多进程爬虫 第1关&#xff1a;多线程、多进程爬虫 任务描述 Scrapy爬虫基础 任务描述 MySQL数据库编程 第1关&#xff1a;…

【视觉SLAM十四讲学习笔记】第二讲——初识SLAM

专栏系列文章如下&#xff1a; 【视觉SLAM十四讲学习笔记】第一讲 一个机器人&#xff0c;如果想要探索某一块区域&#xff0c;它至少需要知道两件事&#xff1a; 我在什么地方——定位周围环境是什么样——建图 一方面需要明白自身的状态&#xff08;即位置&#xff09;&#…

八种架构设计模式优缺点

目录 1、软件架构 2、架构设计模式 2.1、单库单应用模式 2.2、内容分发模式 2.3、查询分离模式 2.4 微服务模式 2.5 多级缓存模式 1、软件架构 软件架构是指对软件系统整个结构和组成部分之间的关系进行抽象和定义的过程&#xff0c;旨在解决系统设计和实现过程中的复杂…

2023年【汽车驾驶员(高级)】找解析及汽车驾驶员(高级)复审考试

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 汽车驾驶员&#xff08;高级&#xff09;找解析是安全生产模拟考试一点通总题库中生成的一套汽车驾驶员&#xff08;高级&#xff09;复审考试&#xff0c;安全生产模拟考试一点通上汽车驾驶员&#xff08;高级&#…

作业类型7333RG没有为成本中心7333+7000501在年度2023

创建 作业类型KP26 更改成本中心为生产部。 查看作业类型KL02, 可以看到这个有效期已超期&#xff0c;重新创建有效期KL01 但是创建成本要素时报错&#xff0c; 用KA06创建成本要素 返回KL01更正成本要素 这个有效期要注意不要重叠&#xff0c;否则无法创建新的有效期

【博士每天一篇文献-模型】A mechanistic model of connector hubs, modularity and cognition

阅读时间&#xff1a;2023-11-10 1 介绍 年份&#xff1a;2018 作者&#xff1a;Maxwell A. Bertolero, B. T. Thomas Yeo 期刊&#xff1a; nature human behaviour 引用量&#xff1a;180 2 创新点 作者提出了一个机制模型&#xff0c;解释了连接中枢的功能以及其对认知表…

Linux内核有什么之内存管理子系统有什么第七回 —— 小内存分配(5)

接前一篇文章&#xff1a;Linux内核有什么之内存管理子系统有什么第六回 —— 小内存分配&#xff08;4&#xff09; 本文内容参考&#xff1a; linux进程虚拟地址空间 《趣谈Linux操作系统 核心原理篇&#xff1a;第四部分 内存管理—— 刘超》 4.6 深入理解 Linux 虚拟内存…

手把手带你创建一个自己的GPTs

大家好&#xff0c;我是五竹。 最近GPT又进行了大升级&#xff0c;这一下又甩了国内AI几条街&#xff0c;具体更新了哪些内容之前的一篇文章中其实已经说过了&#xff1a;ChatGPT 王炸升级&#xff01;更强版 GPT-4 上线&#xff01; 其中最重要的一点就是支持自定义GPT&…

【博士每天一篇文献-算法】A pseudo-inverse decomposition-based self-organizing modular echo

阅读时间&#xff1a;2023-11-6 1 介绍 年份&#xff1a;2022 作者&#xff1a;王雷&#xff0c;北京信息科技大学自动化学院 期刊&#xff1a; Applied Soft Computing 引用量&#xff1a;12 提出了一种基于伪逆分解的自组织模块化回声状态&#xff08;PDSM-ESN&#xff09…

代码随想录算法训练营第四十九天丨 动态规划part12

309.最佳买卖股票时机含冷冻期 思路 相对于动态规划&#xff1a;122.买卖股票的最佳时机II (opens new window)&#xff0c;本题加上了一个冷冻期 在动态规划&#xff1a;122.买卖股票的最佳时机II (opens new window)中有两个状态&#xff0c;持有股票后的最多现金&#xf…

一文搞懂设计模式之单例模式

大家好&#xff0c;我是晴天&#xff0c;本周我们一起来学习单例模式。本文将介绍单例模式的基本属性&#xff0c;两种构造单例的方法&#xff08;饿汉模式和懒汉模式&#xff09;以及golang自带的sync.Once()方法。 什么是单例模式 GoF对单例模式的定义是&#xff1a;保证一个…

【Linux】WSL安装Kali及基本操作

&#x1f60f;★,:.☆(&#xffe3;▽&#xffe3;)/$:.★ &#x1f60f; 这篇文章主要介绍WSL安装Kali及基本操作。 学其所用&#xff0c;用其所学。——梁启超 欢迎来到我的博客&#xff0c;一起学习&#xff0c;共同进步。 喜欢的朋友可以关注一下&#xff0c;下次更新不迷路…