首页 > 代码库 > 跑秒效果,从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开始一直加在规定时间内加到最大值
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。