原生js实现电子时钟
本文实例为大家分享了js实现电子时钟的具体代码，供大家参考，具体内容如下
index.html
<!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"> <title>数字时钟</title> <link rel="stylesheet" href="index.css" rel="external nofollow" > </head> <body> <div class="wrap"> <div class="item">0</div><!-- 0~2 --> <div class="item">0</div><!-- 0~9 --> <div class="colon">:</div> <div class="item">0</div><!-- 0~6 --> <div class="item">0</div><!-- 0~9 --> <div class="colon">:</div> <div class="item">0</div><!-- 0~6 --> <div class="item">0</div><!-- 0~9 --> </div> <script src="clock.js"></script> </body> </html>
index.css
* {
margin: 0;
padding: 0;
}
body {
background-color: black;
}
.wrap {
width: 800px;
height: 100px;
background-color: #355da7;
border-radius: 10px;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
display: flex;
}
.wrap .item,
.wrap .colon {
flex: 1;
text-align: center;
line-height: 100px;
font-size: 70px;
font-weight: 100;
color: wheat;
}
clock.js
let item = document.getElementsByClassName("item");
function changeTime() {
setInterval(function() {
let hour = new Date().getHours();
let minute = new Date().getMinutes();
let sec = new Date().getSeconds();
let hourItem = handleTime(hour);
let minuteItem = handleTime(minute);
let secItem = handleTime(sec);
item[0].innerHTML = hourItem[0];
item[1].innerHTML = hourItem[1];
item[2].innerHTML = minuteItem[0];
item[3].innerHTML = minuteItem[1];
item[4].innerHTML = secItem[0];
item[5].innerHTML = secItem[1];
},1000)
}
changeTime();
function handleTime(number) {
let arr = [];
//23 =2--3
//11 =1--1
//10 % 10 = 1--0
//5 % 10 = 0--5
let a = number % 10;
let b = (number - a) / 10;
arr.push(b,a);
return arr;
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript电子时钟倒计时第二款
本文实例讲解了JavaScript电子时钟倒计时的详细代码,分享给大家供大家参考,具体内容如下 JavaScript时间类 1.获取时分秒: getHours() getMinutes(); getSeconds(); 2.获取年月日: getFullYear(); getMonth() + 1;//获取的月份需要+1: getDate(); //日期 getDay(); //获取的是星期,0-->星期天 效果图: 具体代码: <!doctype html> <html> &
-
五步轻松实现JavaScript HTML时钟效果
学了一段时间的HTML.CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图: 涉及到的知识点有: CSS3动画.DOM操作.定时器.圆点坐标的计算(好多人是不是已经还给自己的老师了~) 接下来,我们用5步来制作它 step1.准备HTML 首先,我们需要准备HTML结构,背景.表盘.指针(时针.分针.秒针).数字. <div id="clock"> <div class="bg"> <div class="p
-
一个简易时钟效果js实现代码
本文实例为大家分享了js时钟特效 的具体代码,供大家参考,具体内容如下 js代码 var canvas = document.getElementById("clock"); var clock = canvas.getContext("2d"); function zhong() { clock.save(); //开始画外层圆 clock.translate(200, 200); clock.strokeStyle = 'black'; clock.lineWi
-
js实现电子时钟效果
本文实例为大家分享了js实现电子时钟效果的具体代码,供大家参考,具体内容如下 代码区域 代码如下(示例): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0
-
JavaScript电子时钟倒计时
本文实例讲解了JavaScript电子时钟倒计时的详细代码,分享给大家供大家参考,具体内容如下 JavaScript时间类 1.获取时分秒: getHours() getMinutes(); getSeconds(); 2.获取年月日: getFullYear(); getMonth() + 1;//获取的月份需要+1: getDate(); //日期 getDay();
-
js实现一个简单的数字时钟效果
效果图: 代码如下: <!DOCTYPE HTML> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>一个简单的数字时钟</title> <script type="text/javascript" charset="utf-8
-
js实现电子时钟功能
电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先准备一个html元素,用来放置时钟.新建一个div元素,它的id命名为clock,如下所示: <div id="clock" class="clock_con"></div><!--基础时钟元素--> 本实例电子时钟的格式设定为 (yyyy
-
html5 canvas js(数字时钟)实例代码
复制代码 代码如下: <!doctype html><html> <head> <title>canvas dClock</title> </head> <body> <canvas id = "clock" width = "500px" height = "200px"> 您的浏览
-
JavaScript实现简单的时钟实例代码
复制代码 代码如下: <html> <head> <title>JS实现简单的时钟</title><script> function displayTime() { document.getElementById("time").innerHTML = new Date().toTimeString(); } setInterval(displayTime,1000); // 每隔1秒钟调用dis
-
JavaScript实现抖音罗盘时钟
本文实例为大家分享了JavaScript实现抖音罗盘时钟的具体代码,供大家参考,具体内容如下 其实很早以前就想发了,很多东西其实并不难,只要多动手动脑就行了,下面直接上代码,其他的自己下去慢慢研究吧! HTML部分代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" co