js+dom娱乐之一个夸张的倒计时

最新推荐文章于 2022-09-23 18:33:51 发布

浪漫不属意

最新推荐文章于 2022-09-23 18:33:51 发布

阅读量564

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/ohmyauthentic/article/details/62896016

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

用dom节点来显示数字，哈哈，用盒子模型的border模拟数字屏显示；
这里写图片描述|center

talk is cheap ,show the code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
      .up{
        height:100px;
        width:100px;
        transition: all 0.5s;
        border: 50px solid;
        border-bottom: 25px solid;
      }
      .down{
        height:100px;
        width:100px;
        border: 50px solid;
        border-top: 25px solid;
        transition: all 0.5s;
      }
    </style>
  </head>
  <body>
      <div class="up"></div>
      <div class="down"></div>
  </body>
  <script type="text/javascript">
    window.onload = function(){
      setInterval(discount(),1000);
    }

    function discount(){
      var time = 0;

      return function(){
        // console.log(time);
        transition(time,document);
        // document.body.innerHTML = time;
        time++;
        if (time > 9) {
          time = 0;
        }
      }
    }
    function transition(num,node){
      if(typeof num != 'number')return;
      var code_lib = [
        [1,1,0,1,0,1,1,1],
        [0,1,0,0,0,1,0,0],
        [1,1,1,0,1,0,1,1],
        [1,1,1,0,1,1,1,0],
        [0,1,1,1,1,1,0,0],
        [1,0,1,1,1,1,1,0],
        [1,0,1,1,1,1,1,1],
        [1,1,0,0,0,1,0,0],
        [1,1,1,1,1,1,1,1],
        [1,1,1,1,1,1,1,0],
      ];
      var color = ["rgba(0,0,0,0)","rgba(0,0,1,1)"];
      var code = code_lib[num%10];
      var up = node.querySelector('.up');
      var down = node.querySelector('.down');
      up.style['border-top-color'] =  color[code[0]]
      up.style['border-right-color'] = color[code[1]]
      up.style['border-bottom-color'] = color[code[2]]
      up.style['border-left-color'] = color[code[3]]
      down.style['border-top-color'] = color[code[4]]
      down.style['border-right-color'] = color[code[5]]
      down.style['border-bottom-color'] = color[code[6]]
      down.style['border-left-color'] = color[code[7]]
    }

  </script>
</html>

浪漫不属意

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js+dom娱乐之一个夸张的倒计时

用dom节点来显示数字，哈哈，用盒子模型的border模拟数字屏显示； talk is cheap ,show the code<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style media="screen"> .up{ height:100p
复制链接

扫一扫