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>
时间： 2024-09-30 02:00:06