JS 简单实现电子时钟

2023-11-04

时钟的确是非常简单的一个功能:我们只需要通过js编写一个方法来获取时间的时分秒,再用定时器每隔一秒进行刷新即可。

注意:通过Date类拿到的时分秒直接拼接起来可能是这样的:8:2:3,而我们想看到的效果应该是:08:02:03,所以这里我们会对时分秒小于10的情况进行判断,然后再拼接字符串。

完整代码如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			p {
				font-size:20vh;
				font-weight: 600;
				font-family: Kanit;
				color: deepskyblue;
			}
		</style>
	</head>
	<body>
		<p id="time"></p>
	</body>
	<script>
		var getTime = function() {
			var date = new Date();
			var hour = date.getHours() < 10 ? '0' : date.getHours();
			var min = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
			var sec = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
			var time = `${hour}:${min}:${sec}`;
			document.getElementById("time").innerHTML = time
		}
		setInterval(() => {
			getTime()
		}, 1000)
	</script>
</html>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JS 简单实现电子时钟 的相关文章

  • 隐藏/显示 DIV - 将当前效果更改为淡入淡出

    我目前正在使用网络教程中找到的以下代码来显示 隐藏 DIV 效果很好 但不喜欢这种效果 希望 DIV 淡入 淡出 或者更平滑的东西 目前 DIV 是从右上角增长的 我该如何调整代码来做到这一点 你可以在这里看到它http jsfiddle
  • 使用 获取用于 javascript 的 RSA 密钥?

    我的 Web 项目需要一个 RSA 密钥对 虽然有一些库 但我认为依靠浏览器 为了安全性和速度 为我生成密钥是个好主意 是否可以使用注册机或其他浏览器 API 来执行此操作 我不知道如何从注册机获取密钥 它们似乎是在提交时生成的 但我不想将
  • jQuery UI sortable 和 contenteditable=true 不能一起工作

    我正在创建一个列表并希望使其项目可排序和可编辑 所以我这样做 ul li span A span li li span B span li li span C span li ul ul list sortable http jsfiddl
  • 拖放区缩略图宽度图像大小

    如何更改上传图像的缩略图大小 我在我的javascript中尝试过thumbnailWidth 350 但是这不会增加缩略图大小 而缩略图只是看起来放大了 如何操作图像缩略图大小 HTML section section
  • 如果浏览器在 asp .net 中关闭,请从浏览器中注销?

    我的要求有点复杂 用户正在使用 Web 浏览器访问数据库 而在访问数据库时 如果用户关闭活动页面而不是注销会话 该会话需要自动注销 有人可以指导我如何做这个吗 我在母版页中使用了jquery onbeforeunload 我收到消息离开页面
  • 缓存 firestore 中 get 的第一个实现

    我希望 firestore 每次都先从缓存中获取数据 根据 Firestore 文档 传递 缓存 或 服务器 选项必须启用相同的功能 下面的例子 db collection cities where capital true get cac
  • ngx-DataTable 对列进行排序无法正常工作 Angular 4

    虽然我对角度非常陌生 但我在使用 ngx DataTable 时遇到了一些困难 我使用简单的 ngx DataTable 进行简单的操作 问题出在列上 尽管我已将 attr 声明为 sortable true 但排序不起作用 这是代码 表定
  • 动态表中每个按钮的 Jquery-Ui 对话框表单

    我正在生成一个 HTML 表 每行都有一个按钮 必须打开 Jquery ui 对话框表单 The table table class table table reporting table condensed table striped t
  • TRACKER:错误TRK0005:无法找到:“CL.exe”。该系统找不到指定的文件

    我尝试在 Windows 8 上的 Node js 项目中执行以下命令 npm 安装 电子邮件受保护 cdn cgi l email protection 但我收到一个错误 我不知道如何处理 TRACKER 错误TRK0005 无法找到 C
  • AngularJS 输入字段未从控制器内的 setTimeout 更新

    我正在使用 AngularJS 支持的页面 并且我需要在只读输入文本字段内显示正在运行的时钟 与data ng model 为了模拟运行的时钟 我使用了 JavaScript 调度程序setTimeout每 1000 毫秒调用一个函数 该函
  • 如何检查元素的内容是否为空,如果是,则在 jquery 中删除该元素

    我目前正在尝试选择某个 div 内没有内容的任何 h2 元素并将其删除 这是我的 html 代码 div class skipToContainer h2 class vidSkipTo Hello h2 h2 class vidSkipT
  • 从相机视图中拖动锁定在一定距离/半径处的对象

    我在场景中心有一个相机 距离相机 z 400 处有 1 个球体 其父级位于中心 我想从视图中向上 向下 向左 向右拖动球体 但同时不改变它相对于中心的 z 位置 我最终使用了另一个球体并使其不可见 添加side THREE DoubleSi
  • ReferenceError 和全局对象

    在浏览器中的 JavaScript 中window是全局对象 这意味着在全局范围内定义的每个变量都是window 那么为什么我会得到这个结果 console log window foo No error logs undefined co
  • 显示班级图片 10 秒

    我有下面给出的代码显示9 boxes 其值如下digital time 还有一个班级box002显示digits相当于随机选择的九个盒子的值 box002 can be dragged to digital time starting wi
  • 如何修复 getImageData() 错误画布已被跨源数据污染?

    我的代码在本地主机上运行得很好 但在网站上却不起作用 我从控制台收到此错误 对于这一行 getImageData x y 1 1 data Uncaught SecurityError Failed to execute getImageD
  • 父指令属性更改时子指令不会更新

    这是对这两个问题的后续 在父指令和子指令之间传递参数 https stackoverflow com questions 42814530 pass argument between parent and child directives
  • JavaScript 中最长的通用前缀

    我正在尝试解决 Leet Code 挑战14 最长公共前缀 https leetcode com problems longest common prefix 编写一个函数来查找字符串数组中最长的公共前缀字符串 如果没有公共前缀 则返回空字
  • 数字和小数的输入掩码

    在测试我的程序后 我发现了以下错误 我在 sqlserver 中的表包含 价格数字 6 2 我的程序的用户输入价格 555 00 就很好了 但是当他输入 555555 时 这是错误的 所以我需要指定掩码 其中尾数是可选的 0 到 999 小
  • 如何修复nodejs Express服务器中的“MulterError:意外字段”?

    我正在设置一个服务器来从客户端上传 zip 文件 服务器运行express和multer来执行此操作 上传文件时 服务器抛出 MulterError 意外字段 错误 我无法弄清楚是什么导致了它 我尝试过使用 png 图像 效果很好 但对于
  • 如何从配置加载套接字 io 事件监听器? [复制]

    这个问题在这里已经有答案了 我有使用套接字io 的nodejs 应用程序 我将存储在 config routes js 中的所有事件侦听器 module exports routes auth login controller auth a

随机推荐

  • Python x64和x86平台下pyinstaller打包过程

    文章目录 使用目的 使用环境 安装x64和x86的Python 具体操作 升级pip 升级pip错误操作 升级pip正确操作 安装x64和x86的pyinstaller 分别打包x64和x86的程序 打包64位程序 打包32位程序 Pyth
  • 【前端异常】http://localhost:8080/user/login 登录失败,重新定向,再登录请求路径改为 http://localhost:8080/user/user/login

    问题 http localhost 8080 user login 登录失败 重新定向 再登录请求路径改为 http localhost 8080 user user login 分析
  • webshell管理工具-冰蝎(Behinder)的安装和基础使用(msf联动,流量特征)

    简介 冰蝎是一款基于Java开发的动态加密通信流量的新型Webshell客户端 由于通信流量被加密 传统的WAF IDS 设备难以检测 给威胁狩猎带来较大挑战 冰蝎其最大特点就是对交互流量进行对称加密 且加密密钥是由随机数函数动态生成 因此
  • C++中map类设为const时的初始化方法

    const map的初始化 首先 在C 中 一个被const修饰的变量是需要在声明时就进行赋值的 那么 对于复杂类型 该如何进行初始化 对于一个仅被const修饰的map 我们可以用如下方式进行初始化 相比C 的Dictionary的初始化
  • Unit Test 7--单元测试覆盖率表单生成交付,Jacoco的使用

    大家好 我是神韵 是一个技术 生活博主 出文章目的主要是两个 一是好记忆不如烂笔头 记录总结中提高自己 二是希望我的文章可以帮到大家 欢迎来点赞打卡 你们的行动将是我无限的动力 本篇主题是 单元测试覆盖率表单生成交付 Jacoco的使用 其
  • 手把手教你构建一个音视频小程序

    欢迎大家前往腾讯云 社区 获取更多腾讯海量技术实践干货哦 本文由腾讯视频云终端团队发表于云 社区专栏 腾讯云提供了全套技术文档和源码来帮助您快速构建一个音视频小程序 但是再好的源码和文档也有学习成本 为了尽快的能调试起来 我们还提供了一个免
  • 静态路由设置初涉_不同网段指静态路由可以互访 (转载)

    看着不错就转载了 简单明了 也不知道原作者是谁 以下为转载内容 着宽带接入的普及 很多家庭和小企业都组建了局域网来共享宽带接入 而且随着局域网规模的扩大 很多地方都涉及到2台或以上路由器的应用 当一个局域网内存在2台以上的路由器时 由于其下
  • 【算法】JS DP 二分 力扣6346. 打家劫舍 IV

    题目链接 6346 打家劫舍 IV 题目描述 沿街有一排连续的房屋 每间房屋内都藏有一定的现金 现在有一位小偷计划从这些房屋中窃取现金 由于相邻的房屋装有相互连通的防盗系统 所以小偷 不会窃取相邻的房屋 小偷的 窃取能力 定义为他在窃取过程
  • windows环境源码编译VLC2.2.1

    VLC是一款开源的跨平台的多媒体音频 视频播放器 支持多种格式 提供多种解码器 插件 有时候我们需要修改某些功能 插件不满足 那只能修改源码并重新编译了 在linux平台的编译相对简单 windows环境下编译相对就繁琐些了 本文就已成功编
  • 实用调试技巧【下篇】

    本文章是在 Visual Studio 2022 VS2022 编译环境下进行操作讲解 文章目录 3 2 调试的时候查看程序当前信息 3 2 1 查看临时变量的值 3 2 2 查看内存信息 3 2 3 查看调用堆栈 3 2 4 查看汇编信息
  • springboot整合jpa,步骤详细(图文结合讲解)

    编译器Intellij IDEA 关系型数据库MySql 5 7 对象关系映射框架JPA jpa可以通过实体类生成数据库的表 同时自带很多增删改查方法 大部分sql语句不需要我们自己写 配置完成后直接调用方法即可 很方便 1 首先新建spr
  • 索引与存储过程

    1 索引 1 概念 索引 是针对数据所建立的目录 作用 可以加快查询速度 负面影响 降低了增删改的速度 2 案例 设有新闻表15列 10列上有索引 共500W行数据 如何快速导入 1 把空表的索引全部删除 2 导入数据 3 数据导入完毕后
  • 03.模块一 前端基础html、css、js

    文章目录 HTML 详解 1 HTML介绍 规范 1 1 介绍 1 2 使用记事本开发第一个网页 1 3 下载和安装 VSCode 1 3 1 下载地址 1 3 2 初始中文设置 1 3 3 创建项目 1 3 4 运行页面 1 3 5 修改
  • 简要概述Spring中注解@Autowired和@Resource的区别

    在了解注解之前 首先需要明白什么是Bean 凡是子类及带有方法或属性的类 都要加注册Bean到Spring Ioc的注解 如 Component Repository Controller Service 在Spring中 标识一个 符号
  • ChatGPT的出现会不会导致底层程序员失业?我问了下多御ChatGPT

    它是这样说的
  • 1.2【Mask-RCNN训练自己的数据集】---- Part Two: 模型训练(全部流程总结+部分释义)

    二 编写模型训练代码 打开MaskRCNN文件夹下的samples文件夹 存在以下四个文件夹 下述模型训练代码将对shapes文件夹下的train shapes ipnyb 进行修改 这里是jupyter的文本格式 笔者不太习惯使用这种格式
  • Linux input 子系统详解

    1 模块概述 1 1 相关资料和代码研究 drivers input include uapi linux input event codes h 2 模块功能 linux核心的输入框架 3 模块学习 3 1 概述 Linux输入设备种类繁
  • [转] DSP缓存机制

    本文主要以DSP讲解cache原理 但原理与CPU是相通的 故转载 原文地址 DSP 缓存机制 桑迪亚哥的博客 CSDN博客 dsp的cache DSP 缓存机制 注 本文说明的DSP基于TI c6000系列的C66x DSP 目录 DSP
  • 分类模型之职员离职分析

    今天要带来的是机器学习中几种重要的分类模型 分别是 逻辑回归 支持向量机 决策树 随机森林这四种算法模型 这里就不主要介绍模型背后的理论知识了 直接上数据 在数据分析中再来谈这些算法模型 今天要讨论的是Kaggle上的公司职员离职数据集 这
  • JS 简单实现电子时钟

    时钟的确是非常简单的一个功能 我们只需要通过js编写一个方法来获取时间的时分秒 再用定时器每隔一秒进行刷新即可 注意 通过Date类拿到的时分秒直接拼接起来可能是这样的 8 2 3 而我们想看到的效果应该是 08 02 03 所以这里我们会