JS处理一些简单计算题

更新时间：2018年02月24日 10:26:30 作者：彬菌

本篇文章通过JS来实现以下日常用经常用到的计算以及换算等小工具，有兴趣的朋友可以学习下。

我们先来看下运行后的效果：

接下来我们分享给大家全部代码：

<!doctype html>  
<html>  
  <head>  
  <meta charset="utf-8">  
  <title>document</title>  
  <style type="text/css">  
/*计算器的style*/  
.jisuanqi {  
  width: 270px;  
  height: 200px;  
  border: 1px solid black;  
  list-style-type: none;  
  background: #C9E495;  
  margin: 10px 0px 10px 0px;  
}  
.jisuanqi span {  
  width: 20px;  
  height: 10px;  
  margin-right: 5px;  
}  
.jisuanqi input {  
  margin-bottom: 5px;  
}  
[name=yunsuanfu] {  
  width: 50px;  
  height: 30px;  
  margin-left: 10px;  
}  
/*一元二次函数求根style*/  
.box {  
  width: 300px;  
  height: 200px;  
  border: 1px solid black;  
  text-align: center;  
  background: #C9E495;  
}  
.box input {  
  margin-bottom: 10px;  
}  
</style>  
  <script type="text/javascript">  
  //计算10-100之和  
  function Sum(){  
    var i=0;  
    for (var j=10;j<=100;j++){  
      i+=j;  
    }  
    document.getElementById("count").value=i;  
  }  
  //判断是否闰年  
  function Runnian() {   
    var year = document.getElementById("year").value;   
    if (year==""){  
      alert("请先输入年份");  
    }  
    else if (year<=0){  
      alert("请输入大于0的年份");  
    }  
    else if ((year % 4 == 0) && (year % 100 != 0 || year % 400 == 0)){  
      document.write(year+"是闰年"+"\n");  
      document.write("<a href=''>返回重新输入</a>")  
    }  
    else{    
      document.write(year+"不是闰年"+"\n");   
      document.write("<a href=''>返回重新输入</a>")  
    }   
  }   
  //计算器1  
  function Calculate (){  
    var sum=0;  
    var num1 = parseFloat(document.getElementById("text1").value);  
    var num2 = parseFloat(document.getElementById("text2").value);  
    var sel = document.getElementById("select").value;  
    switch(sel){  
      case "+":sum=num1+num2;break;  
      case "-":sum=num1-num2;break;  
      case "*":sum=num1*num2;break;  
      case "/":sum=num1/num2;break;  
      default:sum="请输入数字选择运算符";break;  
      }  
      document.getElementById("jieguo").value = sum;  
  }  
    //计算器2  
    function Cal(count){      
      var sum;  
      var num1 = parseFloat(document.getElementById("text3").value);  
      var num2 = parseFloat(document.getElementById("text4").value);  
      switch(count){  
        case "+":sum=num1+num2;break;  
        case "-":sum=num1-num2;break;  
        case "*":sum=num1*num2;break;  
        case "/":sum=num1/num2;break;  
      }  
        document.getElementById("result").value = (sum.toFixed(2));  
    }  
    //计算一元二次函数根  
    function hanshu(){  
    var a=parseFloat(document.getElementById("txta").value);  
    var b=parseFloat(document.getElementById("txtb").value);  
    var c=parseFloat(document.getElementById("txtc").value);  
    var d=b*b-4*a*c  
    var r1=(-b+Math.sqrt(d))/(2*a);  
    var r2=(-b-Math.sqrt(d))/(2*a);  
    document.getElementById("txt1").value=(r1.toFixed(2));  
    document.getElementById("txt2").value=(r2.toFixed(2));  
    }  
  </script>  
  </head>  
  <body>  
<!--第1题计算10到100之和-->  
<input type="button" value="计算" onClick="Sum()" >  
<input type="text" id="count" value="单击计算10-100之和">  
<!--第2题判断是否为闰年-->  
<p></p>  
<div>判断是否为闰年：</div>  
<input type="search" id="year" maxlength="4">  
<input type="button" value="计算" onClick="Runnian()">  
<!--第三题计算器-->  
<p></p>  
<input type="text" id="text1" size="5">  
<select id="select">  
   <option value="">选择运算符</option>  
   <option value="+">+</option>  
   <option value="-">-</option>  
   <option value="*">*</option>  
   <option value="/">/</option>  
  </select>  
<input type="text" id="text2" size="5">  
<input type="button" value=" = " onClick = "Calculate()">  
<input type="text" id="jieguo">  
<!--计算器-->  
<div class="jisuanqi">  
   <h2>购物简易计算器</h2>  
   <li><span>第一个数</span>  
  <input type="search" id="text3">  
 </li>  
   <li><span>第二个数</span>  
  <input type="search" id="text4">  
 </li>  
   <li>  
  <input type="button" value=" + " name="yunsuanfu" onClick="Cal('+')">  
  <input type="button" value=" - " name="yunsuanfu" onClick="Cal('-')">  
  <input type="button" value=" × " name="yunsuanfu" onClick="Cal('*')">  
  <input type="button" value=" ÷ " name="yunsuanfu" onClick="Cal('/')">  
 </li>  
   <li><span>计算结果</span>  
  <input type="search" id="result">  
 </li>  
  </div>  
<div class="box">  
   <h3>分别输入abc求根</h3>  
   <input type="text" size="3" value="" id="txta">  
   <input type="text" size="3" value="" id="txtb">  
   <input type="text" size="3" value="" id="txtc">  
   <br />  
   <input type="button" value="求根" onClick="hanshu()">  
   <br />  
   <input type="text" size="7" id="txt1">  
   <input type="text" size="7" id="txt2">  
  </div>  
</body>  
</html>

其中的JS代码以及样式大家可以在需要用到的时候灵活变换，感谢你对脚本之家的支持。

您可能感兴趣的文章:

JS
计算题

JavaScript中实现继承的三种方式和实例
这篇文章主要介绍了JavaScript中实现继承的三种方式和实例,本文讲解了类式继承、原型式继承、使用扩充方法实现多重继承三种方式,需要的朋友可以参考下
2015-01-01
webpack之引入图片的实现及问题
如果我们希望在页面引入图片。当我们基于webpack进行开发时，引入图片会遇到一些问题，这篇文章主要介绍了webpack之引入图片的实现及问题，非常具有实用价值，需要的朋友可以参考下
2018-10-10
JS中实现隐藏部分姓名或者电话号码的代码
最近做了小项目，项目需要只显示用户的姓名和手机号开头跟结尾，其他部分用*号代替，下面小编给大家分享一段简单的代码，需要的朋友跟随脚本之家小编一起看看吧
2018-07-07
浅谈layer弹出层按钮颜色修改方法
今天小编就为大家分享一篇浅谈layer弹出层按钮颜色修改方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-09-09
转换json格式的日期为Javascript对象的函数
项目中碰到了用jQuery从后台获取的json格式的日期的字符串，需要将此字符串转换成JavaScript的日期对象，记在此处，以备后用。
2010-07-07
Bootstrap3 datetimepicker控件使用实例
这篇文章主要为大家详细介绍了Bootstrap3 datetimepicker控件使用实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-12-12
HTML页面滚动时获取离页面顶部的距离2种实现方法
获取离滚动页面的顶部距离有两种方法一是DOM；而是jquery，具体的实现如下，感兴趣的朋友可以尝试操作下
2013-09-09
JavaScript组合模式学习要点
组合模式大概是设计模式里面使用最为广泛的模式之一了，模式本身理解起来也比较简单，以至于可以毫不费力的写出一个能用的组合模式伪代码
2016-08-08
javascript添加前置0(补零)的几种方法
很多时候为了显示格式，需要在某一字符串不满位的情况下进行前补0操作。下面这篇文章就给大家主要介绍了javascript添加前置0(补零)的几种方法,文中给出了详细的示例代码，需要的朋友可以参考借鉴，下面来一起看看吧。
2017-01-01
js 将图片连接转换成base64格式的简单实例
下面小编就为大家带来一篇js 将图片连接转换成base64格式的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08

JS处理一些简单计算题

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具