两位数四则混合运算考试题

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