js实现随机的四则运算题目效果

本文主要介绍了随机的四则运算题目,这样就可以自动的生成随机的30个四则运算题目了。可以生成随机的四则运算题目给给小学生用,但是还是有问题,小学生啊!他们不知道负数,不知道小数。所以还要加入判定条件。具体代码如下:

switch(Arr[n]){
    case "+":{
    sum=a+b;
    break;
    }
    case "-":{
    sum=a-b;
    while(sum<0){
     var a = GetRandomNum(1,30);
     var b = GetRandomNum(1,30);
     sum=a-b;
    }
    break;
    }
    case "*":{
    sum=a*b;
    break;
    }
    case "/":{
    sum=a/b;
    while(hasDot(sum)){
      var a = GetRandomNum(1,100);
      var b = GetRandomNum(1,100);
      sum=a/b;
     }
    break;
    }

这样负数和小数都没有了。

不过,小学生貌似会分数的运算。于是我又开始试试写分数的。

<body>
<button class="btn btn-success btn-sm" type='button' onclick="pl_f()">开始生成题目</button>
 <span id="text_f"></span>
 <script>
 function GetRandomNum(Min,Max)
 {
  var Range = Max - Min;
  var Rand = Math.random();
  return(Min + Math.round(Rand * Range));
 }
 function max_num(x,y) {
  var t;
  while (y) {
   t = x%y;
   x = y;
   y = t;
  }
  return x;
 }
 function fenshu(a,b,p) {
  if (p==1) {
   if (a>b) {
    return a+"/"+b;
   }else if(a<b){
    return a+"/"+b;
   }else {
    return 1;
   }
  }else {
   var x=a/p;
   var y=b/p;
   if(y==1){
    return x;
   }else{
    return x+"/"+y;
   }
  }
 }
 function pl_f() {
  var son_a = GetRandomNum(1,30);
  var par_b = GetRandomNum(1,30);
  var son_c = GetRandomNum(1,30);
  var par_d = GetRandomNum(1,30);
  var X=son_a+"/"+par_b;
  var Y=son_c+"/"+par_d;
  document.write("第一个分数:"+X+"<br>");
  document.write("第二个分数"+Y+"<br>");
  max_x=max_num(son_a,par_b);
  max_y=max_num(son_c,par_d);
  document.write("第一个最大公约数"+max_x+"<br>");
  document.write("第二个最大公约数"+max_y+"<br>");
  var N=fenshu(son_a,par_b,max_x);
  var M=fenshu(son_c,par_d,max_y);
  document.write("第一个分数化简:"+N+"<br>");
  document.write("第二个分数化简"+M);
 }
 </script>
 </body>

这个可以动态的生成两个分数,然后输出这个分数分子和分母的最大公约数。最后输出分子的最简式。

最后就是将分数放入整数一起了!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title> new document </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="generator" content="editplus" />
 <meta name="author" content="" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 </head>

 <body>
 <button type='button' onclick="play_all()">开始生成题目</button>
 <span id="text"></span>
 </body>
 <script>
 function GetRandomNum(Min,Max)
 {
  var Range = Max - Min;
  var Rand = Math.random();
  return(Min + Math.round(Rand * Range));
 }
 function max_num(x,y) {
  var t;
  while (y) {
   t = x%y;
   x = y;
   y = t;
  }
  return x;
 }
 function fenshu(a,b,p) {
  if (p==1) {
   if (a>b) {
    return a+"/"+b;
   }else if(a<b){
    return a+"/"+b;
   }else {
    return 1;
   }
  }else {
   var x=a/p;
   var y=b/p;
   if(y==1){
    return x;
   }else{
    return x+"/"+y;
   }
  }
 }
 function f_count(a,b,c,d) {
   var Arr = ["+","-","*","/"];
   var n = GetRandomNum(0,3);
   switch(Arr[n]){
    case "+":{
    var sum_x=(a*d)+(b*c);
    var sum_y=b*d;
    max_x=max_num(sum_x,sum_y);
    max_y=max_num(sum_x,sum_y);
    var N=fenshu(sum_x,sum_y,max_x);
    return a+"/"+b+"+"+c+"/"+d+"="+N;
    break;
    }
    case "-":{
    var sum_x=(a*d)-(b*c);
     while (sum_x<0) {
      var a = GetRandomNum(1,30);
      var b = GetRandomNum(1,30);
      var c = GetRandomNum(1,30);
      var d = GetRandomNum(1,30);
      var sum_x=(a*d)-(b*c);
     }
    var sum_y=b*d;
    max_x=max_num(sum_x,sum_y);
    max_y=max_num(sum_x,sum_y);
    var N=fenshu(sum_x,sum_y,max_x);
    return a+"/"+b+"-"+c+"/"+d+"="+N;
    break;
    }
    case "*":{
    var sum_x=a*c;
    var sum_y=b*d;
    max_x=max_num(sum_x,sum_y);
    max_y=max_num(sum_x,sum_y);
    var N=fenshu(sum_x,sum_y,max_x);
    return a+"/"+b+"*"+c+"/"+d+"="+N;
    break;
    }
    case "/":{
    var sum_x=a*d;
    var sum_y=b*c;
    max_x=max_num(sum_x,sum_y);
    max_y=max_num(sum_x,sum_y);
    var N=fenshu(sum_x,sum_y,max_x);
    return a+"/"+b+"÷"+c+"/"+d+"="+N;
    break;
    }
   }
 }
 function count(a,b){
   var Arr = ["+","-","*","/"];
   var n = GetRandomNum(0,3);
   switch(Arr[n]){
    case "+":{
    var sum=a+b;
    return a+"+"+b+"="+sum;
    break;
    }
    case "-":{
    var sum=a-b;
    while(sum<0){
     var a = GetRandomNum(1,30);
     var b = GetRandomNum(1,30);
     var sum=a-b;
    }
    return a+"-"+b+"="+sum;
    break;
    }
    case "*":{
    var sum=a*b;
    return a+"*"+b+"="+sum;
    break;
    }
    case "/":{
    var sum=a/b;
    while(a%b!==0){
     var max_x=max_num(a,b);
     var N=fenshu(a,b,max_x);
     return a+"÷"+b+"="+N;
    }
    return a+"÷"+b+"="+sum;
    break;
    }
   }
 }
 function pl_f() {
  var son_a = GetRandomNum(1,30);
  var par_b = GetRandomNum(1,30);
  var son_c = GetRandomNum(1,30);
  var par_d = GetRandomNum(1,30);
  var suma=f_count(son_a,par_b,son_c,par_d);
  return suma;
 }
 function pl() {
   var a = GetRandomNum(1,30);
   var b = GetRandomNum(1,30);
   var sumb=count(a,b);
   return sumb;
 }
 function play_all() {
   for (i = 1; i <=30; i++) {
    var a = GetRandomNum(0,1);
    document.getElementById("text").innerHTML+=("<br>"+"第"+i+"题:");
    switch (a) {
     case 0:
      var A=pl();
      document.getElementById("text").innerHTML+=(A);
      break;
     case 1:
      var B=pl_f();
      document.getElementById("text").innerHTML+=(B);
      break;
    }
   }
 }
 </script>
</html>

执行完节目就成这样的啦

最后上个答案和题目分开的版本!

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title> new document </title>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <meta name="generator" content="editplus" />
 <meta name="author" content="" />
 <meta name="keywords" content="" />
 <meta name="description" content="" />
 </head>

 <body>
 <button type='button' onclick="play_all()">开始生成题目</button>
 <span id="text"></span>
 <span id="text2"></span>
 </body>
 <script>
 function GetRandomNum(Min,Max)
 {
  var Range = Max - Min;
  var Rand = Math.random();
  return(Min + Math.round(Rand * Range));
 }
 function max_num(x,y) {
  var t;
  while (y) {
   t = x%y;
   x = y;
   y = t;
  }
  return x;
 }
 function fenshu(a,b,p) {
  if (p==1) {
   if (a>b) {
    return a+"/"+b;
   }else if(a<b){
    return a+"/"+b;
   }else {
    return 1;
   }
  }else {
   var x=a/p;
   var y=b/p;
   if(y==1){
    return x;
   }else{
    return x+"/"+y;
   }
  }
 }
 function f_count(a,b,c,d) {
   var Arr = ["+","-","*","/"];
   var n = GetRandomNum(0,3);
   switch(Arr[n]){
    case "+":{
    var sum_x=(a*d)+(b*c);
    var sum_y=b*d;
    max_x=max_num(sum_x,sum_y);
    max_y=max_num(sum_x,sum_y);
    var N=fenshu(sum_x,sum_y,max_x);
    return a+"/"+b+"+"+c+"/"+d+"="+N;
    break;
    }
    case "-":{
    var sum_x=(a*d)-(b*c);
     while (sum_x<0) {
      var a = GetRandomNum(1,30);
      var b = GetRandomNum(1,30);
      var c = GetRandomNum(1,30);
      var d = GetRandomNum(1,30);
      var sum_x=(a*d)-(b*c);
     }
    var sum_y=b*d;
    max_x=max_num(sum_x,sum_y);
    max_y=max_num(sum_x,sum_y);
    var N=fenshu(sum_x,sum_y,max_x);
    return a+"/"+b+"-"+c+"/"+d+"="+N;
    break;
    }
    case "*":{
    var sum_x=a*c;
    var sum_y=b*d;
    max_x=max_num(sum_x,sum_y);
    max_y=max_num(sum_x,sum_y);
    var N=fenshu(sum_x,sum_y,max_x);
    return a+"/"+b+"*"+c+"/"+d+"="+N;
    break;
    }
    case "/":{
    var sum_x=a*d;
    var sum_y=b*c;
    max_x=max_num(sum_x,sum_y);
    max_y=max_num(sum_x,sum_y);
    var N=fenshu(sum_x,sum_y,max_x);
    return a+"/"+b+"÷"+c+"/"+d+"="+N;
    break;
    }
   }
 }
 function count(a,b){
   var Arr = ["+","-","*","/"];
   var n = GetRandomNum(0,3);
   switch(Arr[n]){
    case "+":{
    var sum=a+b;
    return a+"+"+b+"="+sum;
    break;
    }
    case "-":{
    var sum=a-b;
    while(sum<0){
     var a = GetRandomNum(1,30);
     var b = GetRandomNum(1,30);
     var sum=a-b;
    }
    return a+"-"+b+"="+sum;
    break;
    }
    case "*":{
    var sum=a*b;
    return a+"*"+b+"="+sum;
    break;
    }
    case "/":{
    var sum=a/b;
    while(a%b!==0){
     var max_x=max_num(a,b);
     var N=fenshu(a,b,max_x);
     return a+"÷"+b+"="+N;
    }
    return a+"÷"+b+"="+sum;
    break;
    }
   }
 }
 function pl_f() {
  var son_a = GetRandomNum(1,30);
  var par_b = GetRandomNum(1,30);
  var son_c = GetRandomNum(1,30);
  var par_d = GetRandomNum(1,30);
  var suma=f_count(son_a,par_b,son_c,par_d);
  return suma;
 }
 function pl() {
   var a = GetRandomNum(1,30);
   var b = GetRandomNum(1,30);
   var sumb=count(a,b);
   return sumb;
 }
 function play_all() {
   for (i = 1; i <=30; i++) {
    var a = GetRandomNum(0,1);
    document.getElementById("text").innerHTML+=("<br>"+"第"+i+"题:");
    switch (a) {
     case 0:
      var A=pl();
      var strs = A.split("=");
      document.getElementById("text").innerHTML+=(strs[0]+"="+"<br>");
      document.getElementById("text2").innerHTML+=("<br>"+"第"+i+"题答案:"+strs[1]);
      break;
     case 1:
      var B=pl_f();
      var strs = B.split("=");
      document.getElementById("text").innerHTML+=(strs[0]+"="+"<br>");
      document.getElementById("text2").innerHTML+=("<br>"+"第"+i+"题答案:"+strs[1]);
      break;
    }
   }
 }
 </script>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • Js四则运算函数代码

    复制代码 代码如下: //除法函数,用来得到精确的除法结果 //说明:javascript的除法结果会有误差,在两个浮点数相除的时候会比较明显.这个函数返回较为精确的除法结果. //调用:accDiv(arg1,arg2) //返回值:arg1除以arg2的精确结果 function accDiv(arg1,arg2){ var t1=0,t2=0,r1,r2; try{t1=arg1.toString().split(".")[1].length}catch(e){} try{t2=

  • javascript中解析四则运算表达式的算法和示例

    在编写代码时我们有时候会碰到需要自己解析四则运算表达式的情况,本文简单的介绍使用JavaScript实现对简单四则运算表达式的解析. 一.熟悉概念 中缀表示法(或中缀记法)是一个通用的算术或逻辑公式表示方法, 操作符是以中缀形式处于操作数的中间(例:3 + 4).也就是我们最常用的算术表达式,中缀表达式对于人类来说比较容易理解,但是不易于计算机解析. 逆波兰表示法(Reverse Polish notation,RPN,或逆波兰记法),是一种是由波兰数学家扬·武卡谢维奇1920年引入的数学表达式

  • javascript 四则运算精度修正函数代码

    函数代码如下: 复制代码 代码如下: /* * 四则运算精度修正函数 * m 数值1(number) * n 数值2(number) * op 操作符(string) */ function fixMath(m, n, op) { var a = (m+ " "); var b = (n+ " "); var x = 1; var y = 1; var c = 1; if(a.indexOf( ". ")> 0) { x = Math.po

  • js实现随机的四则运算题目效果

    本文主要介绍了随机的四则运算题目,这样就可以自动的生成随机的30个四则运算题目了.可以生成随机的四则运算题目给给小学生用,但是还是有问题,小学生啊!他们不知道负数,不知道小数.所以还要加入判定条件.具体代码如下: switch(Arr[n]){ case "+":{ sum=a+b; break; } case "-":{ sum=a-b; while(sum<0){ var a = GetRandomNum(1,30); var b = GetRandomN

  • js实现随机div颜色位置 类似满天星效果

    本文实例为大家分享了js实现随机div颜色位置的具体代码,供大家参考,具体内容如下 效果如下: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MTX</title> <style> div{width: 50px;height: 50px;position: absolute;}

  • 原生js实现随机点餐效果

    html: <div class="wrap"> <div id="box"> </div> <button id="start">开始</button> <button id="stop">停止</button> css: .wrap{ width: 500px; height: 400px; margin: 0 auto; text-ali

  • 使用JS实现图片展示瀑布流效果(简单实例)

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

  • JS实现的简单四则运算计算器功能示例

    本文实例讲述了JS实现的简单四则运算计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <meta name="content-type" content="text/html; charset=UTF-8"> <head> <title>www.jb51.net 计算器 Calculator</title> <!

  • 使用JS实现图片展示瀑布流效果的实例代码

    不知大家有没有发现,一般的图片展示网站都会使用瀑布流效果,所谓的瀑布流 就是网站内的图片不会一下子全缓存出来,而是等你滚动到一定的距离的时候, 下面的图片才会继续缓存,并且图片也是随机出现的,只是宽度一样,高度并不 一样,高高低低就像瀑布一样,所以叫做瀑布流效果.下面我把代码给大家,大家 随便下几张图片试试. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&qu

  • 原生JS实现随机点名项目的实例代码

    核心思想 •随机产生规定范围内的整数,然后再产生相同范围内的整数,两者相同时,则暂停. 所用知识 •Math.random() * num: 产生从0到num的随机数 •Math.floor(): 向下取整 •简单的DOM操作等 技术扩展 •扩展人数 •添加停止键等 效果 代码如下 •html: <div class="container"> <section class="demo"> <ul> <li></l

  • js实现单元格拖拽效果

    本文实例为大家分享了js实现单元格拖拽效果的具体代码,供大家参考,具体内容如下 <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * { margin: 0; padding: 0; } #box { position: relative; } #box div { position: absolute; width:

  • JS实现炫酷雪花飘落效果

    用js实现漂亮的雪花飘过效果: 步骤: 页面基本样式,雪花旋转动画效果 body{ width: 100vw; height: 100vh; background-color: #000; overflow: hidden; user-select: none; -webkit-user-select: none; } .snowAnimation { animation: snow 5s infinite linear; -webkit-animation: snow 5s infinite

  • js实现随机点名功能

    本文实例为大家分享了js实现随机点名的具体代码,供大家参考,具体内容如下 效果: PS:在原来的效果中很快的,但是不知怎么的录下来就变得这么慢了 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,

随机推荐