背景：最近给我们学生处搭建了一个新生学生手册考试平台。平台使用人数差不多达到近5000余人。自由练习模块几乎是每时每刻都有人在做题。于是好奇心颇强的我就写了个答题总量数据的事实更新。做成之后的效果如下：http://newer.gailvlunpt.com/EntranceEducation/admin.php/Statis/sum
看着每时每刻都在增长的答题数据，心中未免不欣喜。
涉及到的技术：前台网页用javascipt+ajax每隔2秒钟请求后台服务器数据。后台接口是统计数据库答题总量。
此功能的实现，大量参考了
前端html+css+js代码
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title></title>
5 <style type="text/css">
6 #container{background:black;min-width:600px;}.flip{margin:0 auto;width:500px;height:100px;color:yellow;padding-top:40px;}.price-div{font:12px tahoma,Arial,Verdana,sans-serif;}.price-div > div,.total-price > div{float:left;text-align:center;}.price-icon{background:dimgrey;width:25px;height:30px;line-height:30px;font-size:26px;font-weight:bold;float:left;margin-right:2px;}.price-div .number{background:dimgrey;width:32px;height:48px;line-height:48px;font-size:43px;font-weight:bold;overflow:hidden;margin-right:1px;}.price-div .sign{font-size:40px;font-weight:bold;line-height:68px;height:48px;}
7 </style>
8 </head>
9 <body>
10 <div id="container">
11 <div class="flip" style="width: 800px;">
12 <!-- <div>浙江工商大学新生始业平台答题数据实时统计</div> -->
13 <div class="price-div">
14 <div class="comma sign" style="line-height: 42px;">新生始业平台答题总计</div>
15 <div class="h-k number"></div>
16 <div class="t-k number"></div>
17 <div class="comma sign">,</div>
18 <div class="k number"></div>
19 <div class="h number"></div>
20 <div class="t number"></div>
21 <div class="comma sign">,</div>
22 <div class="single number"></div>
23 <div class="t-d number"></div>
24 <div class="h-d number"></div>
25 <div class="comma sign" style="line-height: 42px;">题</div>
26 </div>
27 </div>
28 </div>
29 <a href="{:U(‘index‘)}" target="_blank">实时统计每分钟的做题数据</a>
30
31
32
33 <!-- 推荐开源CDN来选取需引用的外部JS //-->
34 <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
35
36 </body>
37 </html>
38
39 <script type="text/javascript">
40 //乘法函数
41 function accMul(arg1, arg2) {
42 var m = 0, s1 = arg1.toString(), s2 = arg2.toString();
43 try {
44 m += s1.split(".")[1].length;
45 }
46 catch (e) {
47 }
48 try {
49 m += s2.split(".")[1].length;
50 }
51 catch (e) {
52 }
53 return Number(s1.replace(".", "")) * Number(s2.replace(".", "")) / Math.pow(10, m);
54 }
55
56 //给Number类型增加一个mul方法，使用时直接用 .mul 即可完成计算。
57 Number.prototype.mul = function (arg) {
58 return accMul(arg, this);
59 };
60
61 //除法函数
62 function accDiv(arg1, arg2) {
63 var t1 = 0, t2 = 0, r1, r2;
64 try {
65 t1 = arg1.toString().split(".")[1].length;
66 }
67 catch (e) {
68 }
69 try {
70 t2 = arg2.toString().split(".")[1].length;
71 }
72 catch (e) {
73 }
74 with (Math) {
75 r1 = Number(arg1.toString().replace(".", ""));
76 r2 = Number(arg2.toString().replace(".", ""));
77 return (r1 / r2) * pow(10, t2 - t1);
78 }
79 }
80 //给Number类型增加一个div方法，，使用时直接用 .div 即可完成计算。
81 Number.prototype.div = function (arg) {
82 return accDiv(this, arg);
83 };
84 function accAdd(arg1, arg2) {
85 var r1, r2, m;
86 try {
87 r1 = arg1.toString().split(".")[1].length;
88 }
89 catch (e) {
90 r1 = 0;
91 }
92 try {
93 r2 = arg2.toString().split(".")[1].length;
94 }
95 catch (e) {
96 r2 = 0;
97 }
98 m = Math.pow(10, Math.max(r1, r2));
99 return (arg1.mul(m) + arg2.mul(m)).div(m);
100 }
101
102 //给Number类型增加一个add方法，，使用时直接用 .add 即可完成计算。
103 Number.prototype.add = function (arg) {
104 return accAdd(arg, this);
105 };
106
107
108 //减法函数
109 function Subtr(arg1, arg2) {
110 var r1, r2, m, n;
111 try {
112 r1 = arg1.toString().split(".")[1].length;
113 }
114 catch (e) {
115 r1 = 0;
116 }
117 try {
118 r2 = arg2.toString().split(".")[1].length;
119 }
120 catch (e) {
121 r2 = 0;
122 }
123 m = Math.pow(10, Math.max(r1, r2));
124 //last modify by deeka
125 //动态控制精度长度
126 n = (r1 >= r2) ? r1 : r2;
127 return parseFloat(((arg1 * m - arg2 * m) / m).toFixed(n));
128 }
129
130 //给Number类型增加一个add方法，，使用时直接用 .sub 即可完成计算。
131 Number.prototype.sub = function (arg) {
132 return Subtr(this, arg);
133 };
134
135 var $hk = $(".h-k"); // ê?íò
136 var $tk = $(".t-k"); // íò
137 var $k = $(".k"); // ?§
138 var $h = $(".h"); // °ù
139 var $t = $(".t"); // ê?
140 var $single = $(".single"); // ??
141 var $td = $(".t-d"); // ê?·???
142 var $hd = $(".h-d"); // °ù·???
143 var $comma = $(".comma.sign");
144 var $dot = $(".dot.sign");
145 var $bigMap = $(".big-map");
146
147 var data = {
148 numbers: ["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine"],
149 targetClass: {
150 "hk": $hk,
151 "tk": $tk,
152 "k": $k,
153 "h": $h,
154 "t": $t,
155 "single": $single,
156 "td": $td,
157 "hd": $hd
158 },
159 zero: {
160 hk: 0,
161 tk: 0,
162 k: 0,
163 h: 0,
164 t: 0,
165 single: 0,
166 td: 0,
167 hd: 0
168 },
169 numbersTmp: ""
170 };
171
172 (function (){
173 function numberDiv(num){
174 return "<div class=‘" + data.numbers[num] + "‘>" + num + "</div>";
175 }
176
177 for(var i = 0; i < 10; i ++) {
178 data.numbersTmp += numberDiv(i);
179 }
180
181 $(".price-div .number").append("<div class=‘numbers-view‘>" + data.numbersTmp + "</div>");
182 })();
183
184 function priceToObj(price){
185 if(price == 0) {
186 return data.zero;
187 }
188 var obj = {};
189 obj.hd = parseInt((price.mul(100)) % 10);
190 obj.td = parseInt((price.mul(10)) % 10);
191 obj.single = parseInt(price % 10);
192 obj.t = parseInt((price.div(10)) % 10);
193 obj.h = parseInt((price.div(100)) % 10);
194 obj.k = parseInt((price.div(1000)) % 10);
195 obj.tk = parseInt((price.div(10000)) % 10);
196 obj.hk = parseInt((price.div(100000)) % 10);
197 return obj;
198 }
199
200 function objToPrice(obj) {
201 return obj.hk.mul(100000).add(obj.tk.mul(10000))
202 .add(obj.k.mul(1000)).add(obj.h.mul(100))
203 .add(obj.t.mul(10)).add(obj.single)
204 .add(obj.td.div(10)).add(obj.hd.div(100));
205 }
206
207 function animateQueue(){
208 locking = false;
209 if(eventQueue.length > 0) {
210 eventQueue.shift()();
211 }
212 }
213
214 $.fn.extend({
215 scrollToNumber: function(num, pos){
216 var $this = $(this);
217 var target = data.numbers[num];
218
219 $this.find(".numbers-view").stop(true, true);
220
221 var top = num * $this.find(".zero").height();
222 var currentTop = -parseFloat($this.find(".numbers-view").css("marginTop").split("px")[0]);
223
224 if(top == currentTop) {
225 return;
226 } else if(currentTop < top) {
227 $this.find(".numbers-view").animate({marginTop: -top}, 1500, "swing");
228 } else {
229 $this.find(".numbers-view").append($(data.numbersTmp).addClass("temp"));
230 top = $this.find("." + target + ".temp").offset().top - $this.find(".numbers-view").offset().top;
231
232 $this.find(".numbers-view").animate({marginTop: -top}, 1500, "swing", function(){
233 if($this.find(".zero").size() > 1) {
234 var top = $this.find("." + target + ":not(.temp)").first().offset().top - $this.find(".numbers-view").offset().top;
235 $this.find(".numbers-view").css({marginTop: -top});
236 $this.find(".numbers-view .temp").remove();
237 }
238 });
239 }
240 }
241 })
242
243 $.animateToPrice = function(price){
244 var obj = priceToObj(price);
245
246 $.each(obj, function(key, value){
247 data.targetClass[key].scrollToNumber(value, key);
248 });
249 };
250
251
252
253 url = "{:U(‘Statis/getSum‘)}";
254
255 $.get(url).done(function (data) {
256
257 $.animateToPrice(data/100);
258
259 });
260
261 setInterval(function () {
262 $.get(url).done(function (data) {
263 $.animateToPrice(data/100);
264 });
265
266 }, 2000); //每2秒统计一次
267 </script>
后台php代码
1 public function getSum() {
2
3 $sum = D(‘Exercise‘)->count();
4
5 $this->ajaxReturn($sum);
6 }
时间： 2024-10-18 04:18:44