1.生成加减号：
Math.floor(Math.random()*2)随机产生数字1或2，用1表示+，2表示-
2.随机产生两个数：
Math.floor(Math.random()*range)，range表示范围
因为是小学简单数学，所以结果不能为负数，这就需要做减法是第二个数比第一个数小
3.访问链接 运行效果
4.具体代码如下：
javascript
<script type="text/javascript" >
$(function(){
$(‘input‘).keydown(function(event){
if(event.keyCode!=8 && (event.keyCode<48 || event.keyCode>57)){
return false;
}
});
$(‘#create‘).click(function(){
var num = $(‘#num‘).val();
var range = $(‘#range‘).val();
if(num == ‘‘){
alert(‘请填写题目数量！‘);
return false;
}
if(range == ‘‘){
alert(‘请填写出题范围！‘);
return false;
}
$("#createDiv").css(‘display‘,‘none‘);
for(var i=0;i<num;i++){
var mark = Math.floor(Math.random()*2);
var valueA = Math.floor(Math.random()*range);
if(mark==0){
mark=‘+‘;
var valueB = Math.floor(Math.random()*range);
}else{
mark=‘-‘;
var valueB = Math.floor(Math.random()*parseInt(valueA));
}
var html = "<div class=‘question‘><span class=‘span‘>"+(i+1)+".</span><span class=‘span1‘>"+valueA+"</span><span class=‘span2‘>"+mark+"</span><span class=‘span3‘>"+valueB+"</span><span class=‘span4‘>=</span><input type=‘text‘ class=‘input‘></div>";
$(‘#div‘).append(html);
}
$(‘input‘).keydown(function(event){
if(event.keyCode!=8 && (event.keyCode<48 || event.keyCode>57)){
return false;
}
});
$(‘#submit‘).css(‘display‘,‘block‘);
});
$(‘#submit‘).click(function(){
var yes = 0;
var no = 0;
$(this).css(‘display‘,‘none‘);
$(‘.question‘).each(function(){
$(this).find(‘input‘).attr(‘disabled‘,true);
var valueA = $(this).find(‘.span1‘).html();
var mark = $(this).find(‘.span2‘).html();
var valueB = $(this).find(‘.span3‘).html();
var res = $(this).find(‘input‘).val();
var rightRes=0; //输入结果
if(res == ‘‘){
no++;
$(this).append(‘<span class="res2">?</span>‘);
}else{
if(mark == ‘+‘){
rightRes = parseInt(valueA)+parseInt(valueB);
}else{
rightRes = parseInt(valueA)-parseInt(valueB);
}
if(res == rightRes){
yes++;
$(this).append(‘<span class="res1">?</span>‘);
}else{
no++;
$(this).append(‘<span class="res2">?</span>‘);
}
}
});
alert(‘正确‘+yes+‘道题，错误‘+no+‘道题。‘);
$(‘#div‘).append(‘正确‘+yes+‘道题，错误‘+no+‘道题。‘);
});
});
</script>
css
<style type="text/css">
.span{
margin:0 10px;
width:50px;
display:inline-block;
text-align: center;
}
.span1,.span3{
margin:0 5px;width:50px;
display:inline-block;text-align: center;
}
.span2,.span4{
margin:0 5px;width:20px;
display:inline-block;text-align: center;
}
.question{
width:500px;
height:30px;
margin:2px;
}
.question input{
margin:0 5px;text-align: center;width:100px;
}
#submit{
display:none;
}
#div1{
width:500px;
margin:0 auto;
}
.res1{
color:#56D003;
}
.res2{
color:#F10100;
}
</style>
html
<body>
<div id="div1">
<div id="div">
</div>
<button id="submit">提交</button>
<div id="createDiv">
<table>
<tr>
<td>题目数量：</td>
<td><input type="text" id="num" class="input"></td>
</tr>
<tr>
<td>题目范围：</td>
<td><input type="text" id="range" class="input"></td>
</tr>
</table>
<button id="create">出题</button>
</div>
</div>
</body>
时间： 2024-10-11 03:39:40