背景：最近给我们学生处搭建了一个新生学生手册考试平台。平台使用人数差不多达到近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 }
6493
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
