首页 > 代码库 > 跑秒效果,从0开始一直加在规定时间内加到最大值

跑秒效果,从0开始一直加在规定时间内加到最大值

技术分享

 

 1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4     <meta charset="UTF-8"> 5     <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height"> 6     <meta name="Author" content="haley"> 7     <meta name="Keywords" content=""> 8     <meta name="Description" content=""> 9     <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>10     <title>跑秒显示效果</title>11     <style>12         .num{13             color:green;14             font-weight: bold;15             border:1px solid #f00;16             height: 80px;17             line-height: 80px;;18             font-size: 50px;19             width: 14%;20             float: left;21             text-align: center;22         }23     </style>24 </head>25 <body>26 <div class="num num1">15</div>27 <div class="num num2">34</div>28 <div class="num num3">25</div>29 <div class="num num4">32</div>30 <script>31     var numbers=[460,260,100,245];32     var cons=[33         {"name":$(.num1),"n":numbers[0]},34         {"name":$(.num2),"n":numbers[1]},35         {"name":$(.num3),"n":numbers[2]},36         {"name":$(.num4),"n":numbers[3]}37     ];38     var timer=null;39     var second=2000;40     function setHtml(){41         $.each(cons,function(i){42             cons[i].name.html(cons[i].n);43         });44     }45     $.fn.extend({46         runSecond: function () {47             var elem = $(this);48             var h = elem.html()/1;49             var a = 0;50             timer = setInterval(function () {51                 if (a <= h) {52                     elem.html(a++);53                 } else {54 //                    clearInterval(timer);55                     timer = null;56                 }57             }, second / h);58             console.log(h);59         }60     });61     (function ($) {62         setHtml();63         $.each(cons, function (j) {64             $(cons[j].name).runSecond();65         });66     })(jQuery);67 68 </script>69 </body>70 </html>

 

跑秒效果,从0开始一直加在规定时间内加到最大值