有话说
想必大家都听说过电子时钟吧?大概长下边这个样子。
那么什么是网页电子时钟?
什么?是网页电子时钟?
如果你想知道 什么是网页电子时钟的话
那么 就让我带你研究~
带你研究
我们分别创建三个div盒子,里边分别存放时,分,秒的节点。
<div class="ClockBorder">
<div class="ClockScreen">
<div class="hour">
<div class="num1">
<span class="d1"></span>
<span class="d2"><span class="son"></span></span>
<span class="d3"></span>
<span class="d4"></span>
<span class="d5"></span>
<span class="d6"></span>
<span class="d7"></span>
</div>
<div class="num2">
<span class="d1"></span>
<span class="d2"><span class="son"></span></span>
<span class="d3"></span>
<span class="d4"></span>
<span class="d5"></span>
<span class="d6"></span>
<span class="d7"></span>
</div>
</div>
<div class="maohao1">
<div class="circle1"></div>
<div class="circle2"></div>
</div>
<div class="minutes">
<div class="min1">
<span class="d1"></span>
<span class="d2"><span class="son"></span></span>
<span class="d3"></span>
<span class="d4"></span>
<span class="d5"></span>
<span class="d6"></span>
<span class="d7"></span>
</div>
<div class="min2">
<span class="d1"></span>
<span class="d2"><span class="son"></span></span>
<span class="d3"></span>
<span class="d4"></span>
<span class="d5"></span>
<span class="d6"></span>
<span class="d7"></span>
</div>
</div>
<div class="maohao2">
<div class="circle1"></div>
<div class="circle2"></div>
</div>
<div class="second">
<div class="second1">
<span class="d1"></span>
<span class="d2"><span class="son"></span></span>
<span class="d3"></span>
<span class="d4"></span>
<span class="d5"></span>
<span class="d6"></span>
<span class="d7"></span>
</div>
<div class="second2">
<span class="d1"></span>
<span class="d2"><span class="son"></span></span>
<span class="d3"></span>
<span class="d4"></span>
<span class="d5"></span>
<span class="d6"></span>
<span class="d7"></span>
</div>
</div>
</div>
</div>
然后我们去设置一下css样式
* {
margin: 0;
padding: 0;
}
body {
background-color: #fff;
perspective: 100000px;
transform-style: preserve-3d;
}
.ClockBorder {
background-color: #f3f3f3;
border-radius: 7px;
width: 1000px;
height: 430px;
margin: 100px auto;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 20px 30px #333;
}
.ClockScreen {
position: relative;
width: 965px;
height: 395px;
background-color: #ddd;
border: 1px solid #ddd;
border-radius: 7px;
box-shadow: 0 2px 3px 0px #999 inset;
display: flex;
justify-content: space-evenly;
transform: translateZ(1000px);
}
span {
display: block;
}
.top {
border-top-color: #484848 !important;
}
.bottom {
border-bottom-color: #484848 !important;
}
.hour {
position: relative;
/* left: 50px; */
top: calc(50% - 65px);
filter: blur(.7px);
}
.num1 {
float: left;
position: relative;
}
.num2 {
float: left;
position: relative;
left: 10px;
}
.d1 {
width: 0px;
width: 70px;
border-bottom: none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #d7d7d7;
}
.d3 {
width: 0px;
width: 70px;
position: relative;
top: 125px;
border-top: none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #d7d7d7;
}
.d2 {
width: 70px;
border-top: none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 5px solid #d7d7d7;
position: relative;
top: 60px;
}
.d2 > .son {
display: block;
width: 70px;
border-bottom: none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 5px solid #d7d7d7;
position: absolute;
top: 5px;
left: -10px;
}
.d4 {
width: 55px;
border-top: none;
border-left: 10px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #d7d7d7;
transform: rotate(90deg);
position: relative;
top: 8px;
left: -30px;
}
.d5 {
width: 55px;
border-top: none;
border-left: 5px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #d7d7d7;
transform: rotate(-90deg);
position: relative;
top: -2px;
left: 50px;
}
.d6 {
width: 55px;
border-top: none;
border-left: 5px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #d7d7d7;
transform: rotate(90deg);
position: relative;
top: 62px;
left: -30px;
}
.d7 {
width: 55px;
border-top: none;
border-left: 10px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid #d7d7d7;
transform: rotate(-90deg);
position: relative;
top: 52px;
left: 50px;
}
.minutes {
position: relative;
filter: blur(.7px);
top: calc(50% - 65px);
}
.min1,
.min2 {
float: left;
}
.min2 {
margin-left: 10px;
}
.second {
position: relative;
filter: blur(.7px);
top: calc(50% - 65px);
}
.second1,
.second2 {
float: left;
}
.second2 {
margin-left: 10px;
}
.maohao1 {
width: 20px;
height: 116px;
display: flex;
flex-flow: row wrap;
align-content: space-between;
position: absolute;
top: calc(50% - 47px);
left: 329px;
filter: blur(0.7px);
}
.circle1,
.circle2 {
width: 20px;
height: 20px;
background-color: #d7d7d7;
border-radius: 50%;
animation: blink 2s steps(1, end) 0.1s infinite;
}
.maohao2 {
width: 20px;
height: 116px;
display: flex;
flex-flow: row wrap;
align-content: space-between;
position: absolute;
top: calc(50% - 47px);
left: 613px;
filter: blur(0.7px);
}
@keyframes blink {
50% {
background-color: #484848;
}
}
到这一步,电子时钟的外观基本就做好了。
想要它“开机”的话,那我们还需要去写点JS。
//获取小时的
var h1 = document.getElementsByClassName('d1')[0];
var h2 = document.getElementsByClassName('d2')[0];
var h3 = document.getElementsByClassName('d3')[0];
var h4 = document.getElementsByClassName('d4')[0];
var h5 = document.getElementsByClassName('d5')[0];
var h6 = document.getElementsByClassName('d6')[0];
var h7 = document.getElementsByClassName('d7')[0];
var h8 = document.getElementsByClassName('d1')[1];
var h9 = document.getElementsByClassName('d2')[1];
var h10 = document.getElementsByClassName('d3')[1];
var h11 = document.getElementsByClassName('d4')[1];
var h12 = document.getElementsByClassName('d5')[1];
var h13 = document.getElementsByClassName('d6')[1];
var h14 = document.getElementsByClassName('d7')[1];
var h15 = document.getElementsByClassName('son')[1];
var h16 = document.getElementsByClassName('son')[0];
//获取分钟的
var m1 = document.getElementsByClassName('d1')[2];
var m2 = document.getElementsByClassName('d2')[2];
var m3 = document.getElementsByClassName('d3')[2];
var m4 = document.getElementsByClassName('d4')[2];
var m5 = document.getElementsByClassName('d5')[2];
var m6 = document.getElementsByClassName('d6')[2];
var m7 = document.getElementsByClassName('d7')[2];
var m8 = document.getElementsByClassName('d1')[3];
var m9 = document.getElementsByClassName('d2')[3];
var m10 = document.getElementsByClassName('d3')[3];
var m11 = document.getElementsByClassName('d4')[3];
var m12 = document.getElementsByClassName('d5')[3];
var m13 = document.getElementsByClassName('d6')[3];
var m14 = document.getElementsByClassName('d7')[3];
var m15 = document.getElementsByClassName('son')[2];
var m16 = document.getElementsByClassName('son')[3];
//获取秒的
var s1 = document.getElementsByClassName('d1')[4];
var s2 = document.getElementsByClassName('d2')[4];
var s3 = document.getElementsByClassName('d3')[4];
var s4 = document.getElementsByClassName('d4')[4];
var s5 = document.getElementsByClassName('d5')[4];
var s6 = document.getElementsByClassName('d6')[4];
var s7 = document.getElementsByClassName('d7')[4];
var s8 = document.getElementsByClassName('d1')[5];
var s9 = document.getElementsByClassName('d2')[5];
var s10 = document.getElementsByClassName('d3')[5];
var s11 = document.getElementsByClassName('d4')[5];
var s12 = document.getElementsByClassName('d5')[5];
var s13 = document.getElementsByClassName('d6')[5];
var s14 = document.getElementsByClassName('d7')[5];
var s15 = document.getElementsByClassName('son')[4];
var s16 = document.getElementsByClassName('son')[5];
var arr2 = [];
function clearH() {
h8.classList.remove('top'); //上
h12.classList.remove('bottom'); //右上
h11.classList.remove('bottom'); //左上
h9.classList.remove('bottom'); //中间
h15.classList.remove('top'); //中间
h14.classList.remove('bottom'); //右下
h10.classList.remove('bottom'); //底
h13.classList.remove('bottom'); //左下
h5.classList.remove('bottom');
h7.classList.remove('bottom');
h1.classList.remove('top');
h2.classList.remove('bottom');
h3.classList.remove('bottom');
h6.classList.remove('bottom');
h16.classList.remove('top');
h4.classList.remove('bottom');
}
function hour() {
clearH();
var d = new Date();
var h = d.getHours();
h += '';
arr2 = h.split('');
if (arr2.length == 1) {
arr2.unshift('0');
console.log(arr2);
}
console.log('当前时间:' + h);
if (h >= 10 && h < 20) {
h5.classList.add('bottom');
h7.classList.add('bottom');
} else if (h >= 20) {
h1.classList.add('top');
h2.classList.add('bottom');
h3.classList.add('bottom');
h5.classList.add('bottom');
h6.classList.add('bottom');
h16.classList.add('top');
} else if (h < 10) {
h1.classList.add('top');
h3.classList.add('bottom');
h4.classList.add('bottom');
h5.classList.add('bottom');
h6.classList.add('bottom');
h7.classList.add('bottom');
}
if (h - 10 == 0 || h == 0 || h - 20 == 0) {
h8.classList.add('top');
h10.classList.add('bottom');
h11.classList.add('bottom');
h12.classList.add('bottom');
h13.classList.add('bottom');
h14.classList.add('bottom');
}
if (h - 10 == 1 || h == 1 || h - 20 == 1) {
h12.classList.add('bottom'); //右上
h14.classList.add('bottom'); //右下
}
if (h - 10 == 2 || h == 2 || h - 20 == 2) {
h8.classList.add('top'); //上
h12.classList.add('bottom'); //右上
h9.classList.add('bottom'); //中间
h15.classList.add('top'); //中间
h10.classList.add('bottom'); //底
h13.classList.add('bottom'); //左下
}
if (h - 10 == 3 || h == 3 || h - 20 == 3) {
h8.classList.add('top'); //上
h12.classList.add('bottom'); //右上
h9.classList.add('bottom'); //中间
h15.classList.add('top'); //中间
h10.classList.add('bottom'); //底
h14.classList.add('bottom'); //右下
}
if (h - 10 == 4 || h == 4) {
h12.classList.add('bottom'); //右上
h14.classList.add('bottom'); //右下
h11.classList.add('bottom'); //左上
h9.classList.add('bottom'); //中间
h15.classList.add('top'); //中间
}
if (h - 10 == 5 || h == 5) {
h8.classList.add('top'); //上
h11.classList.add('bottom'); //左上
h9.classList.add('bottom'); //中间
h15.classList.add('top'); //中间
h14.classList.add('bottom'); //右下
h10.classList.add('bottom'); //底
}
if (h - 10 == 6 || h == 6) {
h8.classList.add('top'); //上
h11.classList.add('bottom'); //左上
h9.classList.add('bottom'); //中间
h15.classList.add('top'); //中间
h14.classList.add('bottom'); //右下
h10.classList.add('bottom'); //底
h13.classList.add('bottom'); //左下
}
if (h - 10 == 7 || h == 7) {
h8.classList.add('top'); //上
h12.classList.add('bottom'); //右上
h14.classList.add('bottom'); //右下
}
if (h - 10 == 8 || h == 8) {
h8.classList.add('top'); //上
h12.classList.add('bottom'); //右上
h11.classList.add('bottom'); //左上
h9.classList.add('bottom'); //中间
h15.classList.add('top'); //中间
h14.classList.add('bottom'); //右下
h10.classList.add('bottom'); //底
h13.classList.add('bottom'); //左下
}
if (h - 10 == 9 || h == 9) {
h8.classList.add('top'); //上
h12.classList.add('bottom'); //右上
h11.classList.add('bottom'); //左上
h9.classList.add('bottom'); //中间
h15.classList.add('top'); //中间
h14.classList.add('bottom'); //右下
h10.classList.add('bottom'); //底
}
}
var arr = [];
function clearM() {
m1.classList.remove('top');
m5.classList.remove('bottom'); //右上
m2.classList.remove('bottom');
m15.classList.remove('top');
m3.classList.remove('bottom');
m4.classList.remove('bottom');
m7.classList.remove('bottom');
m6.classList.remove('bottom'); //左下
m8.classList.remove('top');
m12.classList.remove('bottom'); //右上
m9.classList.remove('bottom');
m16.classList.remove('top');
m10.classList.remove('bottom');
m11.classList.remove('bottom');
m14.classList.remove('bottom');
m13.classList.remove('bottom'); //左下remove
}
function min() {
var d = new Date();
var m = d.getMinutes();
console.log('当前时间' + m);
clearM();
m += '';
arr = m.split('');
if (arr.length == 1) {
arr.unshift('0');
}
if (arr[0] == 1) {
m5.classList.add('bottom'); //右上
m7.classList.add('bottom'); //右下
}
if (arr[0] == 2) {
m1.classList.add('top'); //顶部
m5.classList.add('bottom'); //右上
m2.classList.add('bottom'); //中间
m15.classList.add('top'); //中间
m3.classList.add('bottom'); //底部
m6.classList.add('bottom'); //左下
}
if (arr[0] == 3) {
m1.classList.add('top'); //顶部
m5.classList.add('bottom'); //右上
m2.classList.add('bottom'); //中间
m15.classList.add('top'); //中间
m3.classList.add('bottom'); //底部
m7.classList.add('bottom'); //右下
}
if (arr[0] == 4) {
m4.classList.add('bottom'); //左上
m2.classList.add('bottom'); //中间
m15.classList.add('top'); //中间
m5.classList.add('bottom'); //右上
m7.classList.add('bottom'); //右下
}
if (arr[0] == 5) {
m1.classList.add('top');
m2.classList.add('bottom');
m15.classList.add('top');
m3.classList.add('bottom');
m4.classList.add('bottom');
m7.classList.add('bottom');
}
if (arr[0] == 6) {
m1.classList.add('top');
m2.classList.add('bottom');
m15.classList.add('top');
m3.classList.add('bottom');
m4.classList.add('bottom');
m7.classList.add('bottom');
m6.classList.add('bottom'); //左下
}
if (arr[0] == 7) {
m1.classList.add('top');
m5.classList.add('bottom'); //右上
m7.classList.add('bottom'); //右下
}
if (arr[0] == 8) {
m1.classList.add('top');
m5.classList.add('bottom'); //右上
m2.classList.add('bottom');
m15.classList.add('top');
m3.classList.add('bottom');
m4.classList.add('bottom');
m7.classList.add('bottom');
m6.classList.add('bottom'); //左下
}
if (arr[0] == 9) {
m1.classList.add('top');
m5.classList.add('bottom'); //右上
m2.classList.add('bottom');
m15.classList.add('top');
m3.classList.add('bottom');
m4.classList.add('bottom');
m7.classList.add('bottom');
}
if (arr[0] == 0) {
m1.classList.add('top');
m5.classList.add('bottom'); //右上
m3.classList.add('bottom');
m4.classList.add('bottom');
m7.classList.add('bottom');
m6.classList.add('bottom'); //左下
}
if (arr[1] == 1) {
m12.classList.add('bottom'); //右上
m14.classList.add('bottom'); //右下
}
if (arr[1] == 2) {
m8.classList.add('top'); //顶部
m12.classList.add('bottom'); //右上
m9.classList.add('bottom'); //中间
m16.classList.add('top'); //中间
m10.classList.add('bottom'); //底部
m13.classList.add('bottom'); //左下
}
if (arr[1] == 3) {
m8.classList.add('top'); //顶部
m12.classList.add('bottom'); //右上
m9.classList.add('bottom'); //中间
m16.classList.add('top'); //中间
m10.classList.add('bottom'); //底部
m14.classList.add('bottom'); //右下
}
if (arr[1] == 4) {
m11.classList.add('bottom'); //左上
m9.classList.add('bottom'); //中间
m16.classList.add('top'); //中间
m12.classList.add('bottom'); //右上
m14.classList.add('bottom'); //右下
}
if (arr[1] == 5) {
m8.classList.add('top');
m9.classList.add('bottom');
m16.classList.add('top');
m10.classList.add('bottom');
m11.classList.add('bottom');
m14.classList.add('bottom');
}
if (arr[1] == 6) {
m8.classList.add('top');
m9.classList.add('bottom');
m16.classList.add('top');
m10.classList.add('bottom');
m11.classList.add('bottom');
m14.classList.add('bottom');
m13.classList.add('bottom'); //左下
}
if (arr[1] == 7) {
m8.classList.add('top');
m12.classList.add('bottom'); //右上
m14.classList.add('bottom'); //右下
}
if (arr[1] == 8) {
m8.classList.add('top');
m12.classList.add('bottom'); //右上
m9.classList.add('bottom');
m16.classList.add('top');
m10.classList.add('bottom');
m11.classList.add('bottom');
m14.classList.add('bottom');
m13.classList.add('bottom'); //左下
}
if (arr[1] == 9) {
m8.classList.add('top');
m12.classList.add('bottom'); //右上
m9.classList.add('bottom');
m16.classList.add('top');
m10.classList.add('bottom');
m11.classList.add('bottom');
m14.classList.add('bottom');
}
if (arr[1] == 0) {
m8.classList.add('top');
m12.classList.add('bottom'); //右上
m10.classList.add('bottom');
m11.classList.add('bottom');
m14.classList.add('bottom');
m13.classList.add('bottom'); //左下
}
}
function clearS() {
s1.classList.remove('top');
s5.classList.remove('bottom'); //右上
s2.classList.remove('bottom');
s15.classList.remove('top');
s3.classList.remove('bottom');
s4.classList.remove('bottom');
s7.classList.remove('bottom');
s6.classList.remove('bottom'); //左下
s8.classList.remove('top');
s12.classList.remove('bottom'); //右上
s9.classList.remove('bottom');
s16.classList.remove('top');
s10.classList.remove('bottom');
s11.classList.remove('bottom');
s14.classList.remove('bottom');
s13.classList.remove('bottom'); //左下remove
}
function second() {
var d = new Date();
var s = d.getSeconds();
console.log('当前时间' + s);
clearS();
s += '';
arr = s.split('');
if (arr.length == 1) {
arr.unshift('0');
}
if (arr[0] == 1) {
s5.classList.add('bottom'); //右上
s7.classList.add('bottom'); //右下
}
if (arr[0] == 2) {
s1.classList.add('top'); //顶部
s5.classList.add('bottom'); //右上
s2.classList.add('bottom'); //中间
s15.classList.add('top'); //中间
s3.classList.add('bottom'); //底部
s6.classList.add('bottom'); //左下
}
if (arr[0] == 3) {
s1.classList.add('top'); //顶部
s5.classList.add('bottom'); //右上
s2.classList.add('bottom'); //中间
s15.classList.add('top'); //中间
s3.classList.add('bottom'); //底部
s7.classList.add('bottom'); //右下
}
if (arr[0] == 4) {
s4.classList.add('bottom'); //左上
s2.classList.add('bottom'); //中间
s15.classList.add('top'); //中间
s5.classList.add('bottom'); //右上
s7.classList.add('bottom'); //右下
}
if (arr[0] == 5) {
s1.classList.add('top');
s2.classList.add('bottom');
s15.classList.add('top');
s3.classList.add('bottom');
s4.classList.add('bottom');
s7.classList.add('bottom');
}
if (arr[0] == 6) {
s1.classList.add('top');
s2.classList.add('bottom');
s15.classList.add('top');
s3.classList.add('bottom');
s4.classList.add('bottom');
s7.classList.add('bottom');
s6.classList.add('bottom'); //左下
}
if (arr[0] == 7) {
s1.classList.add('top');
s5.classList.add('bottom'); //右上
s7.classList.add('bottom'); //右下
}
if (arr[0] == 8) {
s1.classList.add('top');
s5.classList.add('bottom'); //右上
s2.classList.add('bottom');
s15.classList.add('top');
s3.classList.add('bottom');
s4.classList.add('bottom');
s7.classList.add('bottom');
s6.classList.add('bottom'); //左下
}
if (arr[0] == 9) {
s1.classList.add('top');
s5.classList.add('bottom'); //右上
s2.classList.add('bottom');
s15.classList.add('top');
s3.classList.add('bottom');
s4.classList.add('bottom');
s7.classList.add('bottom');
}
if (arr[0] == 0) {
s1.classList.add('top');
s5.classList.add('bottom'); //右上
s3.classList.add('bottom');
s4.classList.add('bottom');
s7.classList.add('bottom');
s6.classList.add('bottom'); //左下
}
if (arr[1] == 1) {
s12.classList.add('bottom'); //右上
s14.classList.add('bottom'); //右下
}
if (arr[1] == 2) {
s8.classList.add('top'); //顶部
s12.classList.add('bottom'); //右上
s9.classList.add('bottom'); //中间
s16.classList.add('top'); //中间
s10.classList.add('bottom'); //底部
s13.classList.add('bottom'); //左下
}
if (arr[1] == 3) {
s8.classList.add('top'); //顶部
s12.classList.add('bottom'); //右上
s9.classList.add('bottom'); //中间
s16.classList.add('top'); //中间
s10.classList.add('bottom'); //底部
s14.classList.add('bottom'); //右下
}
if (arr[1] == 4) {
s11.classList.add('bottom'); //左上
s9.classList.add('bottom'); //中间
s16.classList.add('top'); //中间
s12.classList.add('bottom'); //右上
s14.classList.add('bottom'); //右下
}
if (arr[1] == 5) {
s8.classList.add('top');
s9.classList.add('bottom');
s16.classList.add('top');
s10.classList.add('bottom');
s11.classList.add('bottom');
s14.classList.add('bottom');
}
if (arr[1] == 6) {
s8.classList.add('top');
s9.classList.add('bottom');
s16.classList.add('top');
s10.classList.add('bottom');
s11.classList.add('bottom');
s14.classList.add('bottom');
s13.classList.add('bottom'); //左下
}
if (arr[1] == 7) {
s8.classList.add('top');
s12.classList.add('bottom'); //右上
s14.classList.add('bottom'); //右下
}
if (arr[1] == 8) {
s8.classList.add('top');
s12.classList.add('bottom'); //右上
s9.classList.add('bottom');
s16.classList.add('top');
s10.classList.add('bottom');
s11.classList.add('bottom');
s14.classList.add('bottom');
s13.classList.add('bottom'); //左下
}
if (arr[1] == 9) {
s8.classList.add('top');
s12.classList.add('bottom'); //右上
s9.classList.add('bottom');
s16.classList.add('top');
s10.classList.add('bottom');
s11.classList.add('bottom');
s14.classList.add('bottom');
}
if (arr[1] == 0) {
s8.classList.add('top');
s12.classList.add('bottom'); //右上
s10.classList.add('bottom');
s11.classList.add('bottom');
s14.classList.add('bottom');
s13.classList.add('bottom'); //左下
}
}
window.onload = function () {
var M = setInterval(hour, 200);
setInterval(min, 200);
setInterval(second, 200);
};
看懂了吗?没错,数字都是我就是一个一个拼出来的🐱💻
好了本期的作品分享就这些啦,拜拜