jquery实现的网页计数器

需求背景:门户网站特别是商务型网站实时统计加入某项活动的人数:

前端效果设计:根据访问的实时人数将数字实时反映到列表上,用的元素是 cite  em ,用jquery效果控制数字画面实时翻转的效果。

代码:

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus?">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Document</title>
  <script type="text/javascript" src="jquery-2.1.1.js">
  </script>
     <style>
         ul{
             position: absolute;
             z-index: 1000;
             height: 30px;


             overflow: hidden;
             list-style-type: none;
         }
         ul li{


             float:right;
             margin: 0 10px;
         }
         .item{
            border: solid thin #808080;
            text-align: center;
             display: block;


             width: 18px;
             height: 28px;
         }
        .item em{


            font-family: "Times New Roman",Georgia,Serif;
        ;
            font-size: 18pt;
            font-weight: bold;
            color: #ff0000;
            background-color: #ffffff;
        }
     </style>
  <script type="text/javascript">
      var total,total_arr1;
      function init() {
          total = 100000000;
          total_arr1 = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
          for (var k = 0; k < 9; k++) {
              for (var j = 1; j < 10; j++) {


                  $("em[t=" + j + "]:eq(" + k + ")").fadeOut();
              }
          }
      }
      function flush() {


          var one = total % 10;                        //个位
          var two = Math.floor(total % 100 / 10);     //十位
          var thr = Math.floor(total % 1000 / 100);           //百位
          var fou = Math.floor(total % 10000 / 1000);            //千位
          var fiv = Math.floor(total % 100000 / 10000);          //万位
          var six = Math.floor(total % 1000000 / 100000);          //十万位
          var sev = Math.floor(total % 10000000 / 1000000);              //
          var eig = Math.floor(total % 100000000 / 10000000);
          var nig = Math.floor(total % 1000000000 / 100000000);
          var arr = [one, two, thr, fou, fiv, six, sev, eig, nig];      //用一数组将这九个数字表示的九个位存起来,从左至右依次个位。。。




          for (var i = 0; i < 9; i++) {


              switch (arr[i]) {
                  case 1:
                       while(total_arr1[i]!=1){                           //用arr1保存的当前位的数字,当与新的数字不同时,从当前数字开始依次递增翻转数字,直到匹配时停止遍历
                           $("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();
                           total_arr1[i]=(total_arr1[i]+1)%10;
                           $("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();
                       }


                      break;
                  case 2:
                      while(total_arr1[i]!=2){
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();
                          total_arr1[i]=(total_arr1[i]+1)%10;
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();
                      }
                      break;
                  case 3:
                      while(total_arr1[i]!=3){
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();
                          total_arr1[i]=(total_arr1[i]+1)%10;
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();
                      }
                      break;
                  case 4:
                      while(total_arr1[i]!=4){
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();
                          total_arr1[i]=(total_arr1[i]+1)%10;
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();
                      }                                //将当次的数字编号保存进数组arr1[i]中
                      break;
                  case 5:
                      while(total_arr1[i]!=5){
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();
                          total_arr1[i]=(total_arr1[i]+1)%10;
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();
                      }
                      break;
                  case 6:
                      while(total_arr1[i]!=6){
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();
                          total_arr1[i]=(total_arr1[i]+1)%10;
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();
                      }
                      break;
                  case 7:
                      while(total_arr1[i]!=7){
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();
                          total_arr1[i]=(total_arr1[i]+1)%10;
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();
                      }
                      break;
                  case 8:
                      while(total_arr1[i]!=8){
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();
                          total_arr1[i]=(total_arr1[i]+1)%10;
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();
                      }
                      break;
                  case 9:
                      while(total_arr1[i]!=9){
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();
                          total_arr1[i]=(total_arr1[i]+1)%10;
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();
                      }
                      break;
                  case 0:
                      while(total_arr1[i]!=0){
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").fadeOut();
                          total_arr1[i]=(total_arr1[i]+1)%10;
                          $("em[t="+total_arr1[i]+"]:eq("+i+")").slideToggle();
                      }
                      break;
                  default :
                      break;
              }
          }
      }


      function add(){
          total++;
          if(total==999999999){
              total=0;
          }
      }


   $(document).ready(function(){
        init();
       window.setInterval(‘add()‘,100);
      var result=window.setInterval(‘flush()‘,2000);
  });
  </script>
 </head>
 <body>


 <ul>
 <li class="item">
     <cite>
  <em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
   <em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
         </cite>
  </li>
  <li class="item">
      <cite>
  <em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
   <em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
      </cite>
  </li>
  <li class="item">
      <cite>
  <em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
   <em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
 </cite>
  </li>
     <li> <span>,</span></li>
     <li class="item">
         <cite>
             <em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
             <em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
         </cite>
     </li>
     <li class="item">
         <cite>
             <em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
             <em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
         </cite>
     </li>
     <li class="item">
         <cite>
             <em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
             <em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
         </cite>
     </li>
     <li> , </li>
     <li class="item">
         <cite>
             <em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
             <em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
         </cite>
     </li>
     <li class="item">
     <cite>
         <em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
         <em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
     </cite>
 </li>
     <li class="item">
     <cite>
         <em t="1">1</em> <em t="2">2</em> <em t="3">3</em> <em t="4">4</em>
         <em t="5">5</em> <em t="6">6</em> <em t="7">7</em> <em t="8">8</em><em t="9">9</em><em t="0">0</em>
     </cite>
 </li>
</ul>


 </body>
</html>
      

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。