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

来源：互联网发布：全国书画艺术网络大赛编辑：程序博客网时间：2024/04/30 01:17

用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