标签:运算 min 考试题 两位数 item let result numB numA
1.html代码
<h1>两位数四则混合运算考试题</h1><hr />
<div class="content"></div>
<div class="option">
<button class="end">答题结束</button>
<button class="again">再做一套</button>
<button class="close">关闭窗口</button>
</div>
2.js代码
let result=[];
//生成试题
function createQues(parent,count){
function amend(data){
return parseInt(data*100)/100
};
for(let i=0;i<count;i++){
//生成题号
let questionItem=create("div","questionItem");
let questionCode=create("div","questionCode");
questionCode.textContent=`(${i+1})`;
//生成两个随机数
let CalculationFormula=create("div","CalculationFormula")
let min=10,max=99;
let numA=parseInt(Math.random()*(max-min+1))+min;
let numB=parseInt(Math.random()*(max-min+1))+min;
while(numA<numB){
numB=parseInt(Math.random()*(max-min+1))+min;
}
//生成随机符号
let symbol=["+","-","×","÷"];
let index=parseInt(Math.random()*symbol.length);
let op=symbol[index];
CalculationFormula.textContent=`${numA}${op}${numB}=`;
switch(op){
case "+":result.push(numA+numB);break;
case "-":result.push(numA-numB);break;
case "×":result.push(amend(numA*numB));break;
case "÷":result.push(amend(numA/numB));break;
}
//生成后边的文本框
let input=create("input")
//生成后边的对和错
let span=create("span");
questionItem.append(questionCode,CalculationFormula,input,span)
parent.append(questionItem)
}
return result
}
// 刚开始就要生成试题,所以要一开始就调用生成试题的函数
createQues($(".content"),10);
//答题结束按钮
$(".end").addEventListener("click",function(){
let count=0;
// 定义数组接收下边的元素节点
let endValue=[];
//让所有的span都显示出来
let spanss=$$("span");
spanss.forEach(item=>{
item.style.display="block";
})
//找到所有的input元素节点,把节点添加到数组里
let end=$$("input");
for(let i=0;i<end.length;i++){
endValue.push(end[i])
}
/* 遍历数组判断做的是否正确,获取每个元素节点的value取值,
和result数组里边的正确答案对比,如果两个数相等,就给它后面的那个span添加类名
类名是从阿里图库下载的,点击提交后,为了防二次提交,让此按钮变为不可用
*/
endValue.forEach((item,index)=>{
if (parseFloat(item.value)===result[index]) {
count++;
item.nextElementSibling.classList.add("iconfont icon-icon--yes");
}else{
item.nextElementSibling.classList.add("iconfont icon-cuode");
}
})
window.alert(`您做对了${count}道题,得分为${count*10}`);
this.disabled=true;
})
//再做一套按钮
$(".again").addEventListener("click",function(){
// 清空里边原有的内容
$(".content").innerHTML="";
// 调用生成试题的函数
createQues($(".content"),10);
// 让提交按钮变得可用
this.disabled=false;
});
//关闭窗口按钮
$(".close").addEventListener("click",function(){
window.close()
});
标签:运算,min,考试题,两位数,item,let,result,numB,numA 来源: https://blog.csdn.net/m0_63466615/article/details/121139664
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。