当前位置: 首页 > article >正文

JS显示数字时钟的格式时间

在web开发中,显示数字时钟是常见的需求之一。通过使用JavaScript,我们可以轻松地实现一个简单而优雅的数字时钟,方便用户查看当前时间。下面让我来介绍一下如何显示数字时钟的格式时间。

这是初学JavaScript重要的一环。

目录

获取当前时间

目标

完成判断


获取当前时间

首先我们得分别得到当前的的小时、分钟以及秒;

var now = new Date();
var hour = now.getHours();
var minute = now.getMinute();
var second = now.getSeconds();

目标

然后我们有几个需求:

1、小时以十二小时的格式显示;比如:当前为4点,显示为4; 当前为20点,显示为8。

2、我们平时的显示时间一般为 “小时 : 分钟 : 秒 ”的格式,比如:0:10:18,分钟数为超过10就显示正常的数字,而不足10就要写为“:0 + 当前分钟数”,完成它!

3、秒钟数同理。

4、判断上午以及下午,上午为“AM”, 下午为“PM”。

完成判断

我们var一个temp变量,传入小时数,并完成判断:

var temp = "" + (hour > 12 ? hour - 12 : hour);
if(hour < 0){

    temp = "12";

}

然后将小时、分钟、秒拼接在一起:

temp = temp + (minute < 10 ? ":0":":") + minute;

temp = temp + (second < 10 ? ":0" : ":") + second;

temp = temp + (hour >= 12 ? " PM" : " AM");

再来cosole.log();一下:

0
0:17:24 AM

这样一个非常简单的小功能就实现了

----------------

本章到此结束

希望能帮助到你!!


http://www.kler.cn/news/319863.html

相关文章:

  • Vue.js 与 Flask 或 Django 后端配合
  • ArrayList源码实现(一)
  • Scala第一天
  • Tomcat may not be running
  • Facebook个人账户被停用是什么原因?如何解决?
  • 剖析:基于 RDMA 的多机数据分发和接收场景
  • 基于Java的宠物之家小程序 宠物服务小程序【源码+调试】
  • sort 命令:文本排序
  • 计算机的错误计算(一百零四)
  • 通过两个类计算一个长方形的周长和面积
  • MySql语言操作数据库---增删改查数据库,表,数据
  • 速盾:AI能为高防cdn带来什么?
  • 828华为云征文|华为云Flexus云服务器X实例Windows系统部署一键短视频生成AI工具moneyprinter
  • 专题八_链表_算法专题详细总结
  • 一带一路区块链赛项样题解析(中)
  • C++——求3*3矩阵对角元素之和。
  • 第164天:应急响应-挖矿脚本检测指南_威胁情报_样本定性_文件清除_入口修复
  • ubuntu系统插入u盘不识别
  • 从一个Vite Vue项目开始 - 整体设计
  • 软件设计模式——工厂模式
  • 招行科技笔试——合并区间,移动零
  • 加入AI新引擎,华为数据中台全面智能化升级
  • Java 发布jar包到maven中央仓库(2024年9月保姆级教程)
  • PPTP、L2TP、SSTP协议和HTTP、SOCKS5代理:全面解析与对比
  • Kafka-Manager安装及操作
  • Linux文件IO-基础知识了解及文件描述符
  • 模拟自然的本质:与IBM量子计算研究的问答
  • 函数组件、Hooks和类组件区别
  • 使用php生成图片
  • 第 1 章:Vue 核心