Js电子时钟
时间:2022-07-28
本文章向大家介绍Js电子时钟,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
简单版电子时钟,需要以下几个步骤
1. 封装一个函数 返回当前的时分秒
2. 使用定时器使当前以获取到的系统时间走动,每间隔一面调用
3. 把获取到的时间放到span盒子里,添加样式
效果展示
实现代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>电子时钟</title>
<style>
*{
margin: 0;
padding: 0;
}
div {
width: 200px;
height: 100px;
line-height: 100px;
margin: 100px auto;
background-color: skyblue;
text-align: center;
}
span {
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
color: #ffffff;
font-size: 20px;
background-color: cornflowerblue;
text-align: center;
}
</style>
</head>
<body>
<div>
<span class="hour"></span>
<span class="minute"></span>
<span class="second"></span>
</div>
<script>
let hour = document.querySelector('.hour');
let minute = document.querySelector('.minute');
let second = document.querySelector('.second');
// 1. 封装一个函数 返回当前的时分秒
getTimes();
function getTimes() {
let time = new Date();
let h = time.getHours();
h = h < 10 ? "0" + h : h;
// 将获取到的时间h添加到span盒子里
hour.innerHTML = h;
let m = time.getMinutes();
m = m < 10 ? "0" + m : m;
// 将获取到的时间m添加到span盒子里
minute.innerHTML = m;
// 将获取到的时间s添加到span盒子里
let s = time.getSeconds();
s = s < 10 ? "0" + s : s;
second.innerHTML = s;
}
// 2. 使用定时器使当前以获取到的系统时间走动,每间隔一面调用
setInterval(getTimes,1000);
</script>
</body>
</html>
- 《Redis设计与实现》读书笔记(三十二) ——Redis事务设计与实现
- 收藏一个简洁的PHP可逆加密函数
- 《Redis设计与实现》读书笔记(三十二) ——Redis集发布订阅设计与实现
- Android点击EditText文本框之外任何地方隐藏键盘的解决办法
- Spark 1.4为DataFrame新增的统计与数学函数
- 《Redis设计与实现》读书笔记(三十三) ——Redis排序命令sort的实现
- 高通HAL层之Sensor HAL
- Android Data Binding(数据绑定)用户指南
- Android 禁止Viewpager左右滑动功能
- 高通Audio中ASOC的machine驱动
- 《Redis设计与实现》读书笔记(三十五) ——Redis 二进制位数组及SWAR汉明重量算法
- Android TabWidget底部显示
- 《Redis设计与实现》读书笔记(三十六) ——Redis 慢查询日志实现
- 概率学中的随机变量与分布
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法