背景：最近给我们学生处搭建了一个新生学生手册考试平台。平台使用人数差不多达到近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": $hd158 ??},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: 0168 ??},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 ????}php+ajax实现答题总量数据的实时更新
原文地址：http://www.cnblogs.com/hello-lijj/p/7874758.html