html+js生成10道小学生加法题

运行效果

在这里插入图片描述

<!DOCTYPE html>
<html>
    <head>
       <title>小朋友做数学题</title>
        <script type="text/javascript">
        var c=1
        var x
        var i;
        var a;
        var b;
        function create(){
      
      
        var div1=document.getElementById('div1');
        div1.innerHTML="";
        var str="";
        if(document.getElementById('txt').value=="10以内"){
      
      
            for (var i=1; i<=10; i++){
      
      
                    var p=document.createElement("p"); 
                    a=Math.round(Math.random()*10)
                    b=Math.round(Math.random()*10)
                    str+=""+i+".  "+a+"+"+b+"=";
                    p.innerHTML=str;
                    div1.appendChild(p);
                    str="";
                }
            }
        else if(document.getElementById('txt').value=="20以内")
        {
      
      
        for (var i=1; i<=10; i++){
      
      
            var p=document.createElement("p"); 
                    a=Math.round(Math.random()*20)
                    b=Math.round(Math.random()*20)
                    str+=""+i+".  "+a+"+"+b+"=";
                    p.innerHTML=str;
                    div1.appendChild(p);
                    str="";
        }
        }
        else
        {
      
      
        for (var i=1; i<=10; i++){
      
      
                var p=document.createElement("p"); 
                    a=Math.round(Math.random()*100)
                    b=Math.round(Math.random()*100)
                    str+=""+i+".  "+a+"+"+b+"=";
                    p.innerHTML=str;
                    div1.appendChild(p);
                    str="";
        }
        }
        }
        </script>
    </head>
    <body>
       <div>
        <p>小朋友学数学</p>
        </div>
        <div>
        <p>加法运算</p>
        </div>
        <div id="table1">
           <table>
               <tr>
                   <td>计算范围</td>
                    <td>
                       <select id="txt">
                        <option value="10以内">10以内</option>
                        <option value="20以内">20以内</option>
                        <option value="100以内">100以内</option>
                        </select>
                    </td>
                </tr>
            </table>
        </div>
    <div><p><input id="button" type="button" value="开始计算" onClick="create()"></p></div>
    <div style="border:0px solid red; width:500px;height:500px;" id="div1"><div>
    </body>
</html>

复制上面代码,新建文本文档,后缀名修改为.html格式,浏览器打开即可。

猜你喜欢

转载自blog.csdn.net/weixin_44226883/article/details/124145603