php+ajax实现答题总量数据的实时更新
Posted 李家大少爷
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了php+ajax实现答题总量数据的实时更新相关的知识，希望对你有一定的参考价值。
背景：最近给我们学生处搭建了一个新生学生手册考试平台。平台使用人数差不多达到近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 = $("html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。Ajax PHP JavaScript MySQL实现简易的无刷新在线聊天室