当沉醉在代码的世界里多时，偶尔做做口算加法题，也是一种放松，当然，别被那计时搞紧张了
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>加法随机算术题</title> <style> html,body,h2{margin:0px;padding:0px;} .headTitle{width:100%;height:50px;line-height:50px;text-align:center;background:#3879D9;color:#fff;} .headLine{width:100%;text-align: center; margin:5px 0;} .headLine button{padding: 5px 12px;margin:0 8px;} .once{/*max-width:240px;*/height:30px;line-height:30px;display:inline-block;margin:10px 14px;border-bottom: 2px solid #DC4C4C;padding-bottom: 5px;} .once span.sumCls{padding:0 5px;} .hideCls{display:none;} .inputCls{width:50px;height:20px;line-height:20px;text-align: center;border-width: 0px;border-bottom: 1px solid #000;outline: mediumaquamarine;} button#timeOut{width:150px;text-align:left;} input.inputBotLineCls{ border:none;border-bottom:1px solid #333; outline:none; } input{ vertical-align:bottom; } </style> </head> <body> <h2 class="headTitle"> 10-100之间的(加法)随机算术题加法运算题 </h2> <div class="headLine"> <button οnclick="canculateFn();">点击换题</button> <button οnclick="showResult()">评分</button> <input type="text" value="开始计时：" id="timeOut" class="inputBotLineCls"> <input type="text" value="得分：" id="scores" class="inputBotLineCls"> </div> <div id="examination"></div> </body> </html> <script> var testObj = { timeId: null,//计时器id counts:30 //题目总数，默认20 } // testObj.counts canculateFn(); function canculateFn(){ toggleClassTest();//显示/隐藏答案 if(testObj.timeId){ clearInterval(testObj.timeId); testObj.timeId = null; document.getElementById('timeOut').value = '开始计时：'; } var a,b,c,sum=0,str,input,span,span1,span2,div,sums,plusNum; document.getElementById('examination').innerHTML = ''; for(var i=0;i<testObj.counts;i++){ a = parseInt((Math.random()*90)+11);//10-100 的整数，不包含10和100（计算公式100-10=90，(Math.random()*90+11） b = parseInt((Math.random()*90)+11);//10-100 的整数，不包含10和100 c = 0; sum = a+b+c; str = ''; var index = i+1; index = index.toString().length==1 ? '0'+index : index; str += index+'. '+a+' + '+b+' = '; span1 = document.createElement('span') span2 = document.createElement('span') input = document.createElement('input') input.setAttribute('type','text'); // input.setAttribute('value',''); span2.setAttribute('class','sumCls hideCls'); input.setAttribute('class','inputCls'); sums = document.createTextNode(sum); plusNum = document.createTextNode(str); span1.appendChild(plusNum); span2.appendChild(sums); input.onchange = function(){ if(!testObj.timeId){ countDownTime(); } } div=document.createElement("div"); div.setAttribute('class','once') div.appendChild(span1); div.appendChild(input); div.appendChild(span2); document.getElementById('examination').appendChild(div); } } // 计时 function countDownTime(){ var num = 0; var timeout = document.getElementById('timeOut'); if(testObj.timeId){ clearInterval(testObj.timeId); testObj.timeId = null; } testObj.timeId = setInterval(function(){ num++; var h=m=s=0,str = ''; m = formatterTime(parseInt(num/60));//分 s = formatterTime(parseInt(num`));//秒 if(m>60){//分钟大于60 h = formatterTime(parseInt(m/60));//时 m = formatterTime(parseInt(m`));//分 } // 时间格式整理 str = '00:00:'+s; if(m>0){//分有值 if(h>0){//时有值 str = h+':'+m+':'+s; }else{ str = '00:'+m+':'+s; } } // 打印 timeout.value = '开始计时：'+str; },1000); } // 时间格式处理 function formatterTime(param){ return param.toString().length==1 ? '0'+param : param; } // 评分 function showResult(){ toggleClassTest(); if(testObj.timeId){ clearInterval(testObj.timeId); testObj.timeId = null; } } function toggleClassTest(){ var correct = 0;//正确数 var obj = document.getElementsByClassName('once'); var count = obj.length;//总题数 for(var i=0;i<obj.length;i++){ //判断用户输入是否为空或者出错！ // console.log(obj[i].children[2].innerHTML) var inputVal = obj[i].children[1].value; // console.log(inputVal); var spanText = obj[i].children[2].innerHTML; var spanDom = document.createElement('span'); spanDom.style.paddingLeft = '5px'; if(inputVal == '' || inputVal!==spanText){ //错误 obj[i].style.color = '#f00'; var spanText = document.createTextNode('错误！') spanDom.appendChild(spanText); }else{ //正确 correct++; obj[i].style.color = '#3879D9'; var spanText = document.createTextNode('正确！') spanDom.appendChild(spanText); } obj[i].childNodes[2].appendChild(spanDom); toggleClass(obj[i].childNodes[2],"hideCls"); //增删class // 计算得分 document.getElementById('scores').value = ('得分：'+Math.floor(correct/count*100)); } } // 存在就删除，不存在就添加 function toggleClass(obj,cls){ if(hasClass(obj,cls)){ removeClass(obj, cls); }else{ addClass(obj, cls); } } // 判断class是否存在 function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } // 增加class function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += " " + cls; } // 删除class function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); obj.className = obj.className.replace(reg, ' '); } } </script>
