网页电子时钟

有话说

想必大家都听说过电子时钟吧？大概长下边这个样子。

那么什么是网页电子时钟？

什么？是网页电子时钟？
如果你想知道 什么是网页电子时钟的话
那么 就让我带你研究~

带你研究

我们分别创建三个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);
};

看懂了吗？没错，数字都是我就是一个一个拼出来的🐱‍💻

好了本期的作品分享就这些啦，拜拜