JS处理一些简单计算题


Posted in Javascript onFebruary 24, 2018

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

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代码以及样式大家可以在需要用到的时候灵活变换,感谢你对三水点靠木的支持。

Javascript 相关文章推荐
非常漂亮的JS代码经典广告
Oct 21 Javascript
javascript 复杂的嵌套环境中输出单引号和双引号
May 26 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
全面了解javascript中的错误处理机制
Jul 18 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
解析js如何获取css样式
Dec 11 Javascript
vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)
Feb 10 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
Sep 16 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
关于AOP在JS中的实现与应用详解
May 06 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
jQuery实现简单QQ聊天框
Aug 27 jQuery
jQuery 改变P标签文本值方法
Feb 24 #jQuery
jQuery实现标签子元素的添加和赋值方法
Feb 24 #jQuery
通过js动态创建标签,并设置属性方法
Feb 24 #Javascript
JS随机数产生代码分享
Feb 24 #Javascript
JS中常用的消息框总结
Feb 24 #Javascript
JS改变页面颜色源码分享
Feb 24 #Javascript
jquery 给动态生成的标签绑定事件的几种方法总结
Feb 24 #jQuery
You might like
使用迭代器 遍历文件信息的详解
2013/06/08 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
yii2中的rules 自定义验证规则详解
2016/04/19 PHP
Prototype源码浅析 String部分(二)
2012/01/16 Javascript
javascript正则匹配汉字、数字、字母、下划线
2014/04/10 Javascript
JS计算网页停留时间代码
2014/04/28 Javascript
js+css绘制颜色动态变化的圈中圈效果
2016/01/27 Javascript
Javascript实现数组中的元素上下移动
2017/04/28 Javascript
学习使用ExpressJS 4.0中的新Router的用法
2018/11/06 Javascript
基于vue-cli、elementUI的Vue超简单入门小例子(推荐)
2019/04/17 Javascript
一篇文章带你从零快速上手Rollup
2020/09/07 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
centos下更新Python版本的步骤
2013/02/12 Python
跟老齐学Python之做一个小游戏
2014/09/28 Python
python实现简单五子棋游戏
2019/06/18 Python
python实现连连看辅助(图像识别)
2020/03/25 Python
Django 模型类(models.py)的定义详解
2019/07/19 Python
Python面向对象封装操作案例详解
2019/12/31 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
用纯css3实现的图片放大镜特效效果非常不错
2014/09/02 HTML / CSS
使用CSS3的ruby-position固定注音位置的用法示例
2016/07/05 HTML / CSS
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
毕业生简单求职信
2013/11/19 职场文书
思想政治教育专业个人求职信范文
2013/12/20 职场文书
应届本科生推荐信范文
2013/12/25 职场文书
打架检讨书50字
2014/01/11 职场文书
学习委员自我鉴定
2014/01/13 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
公司节能减排方案
2014/05/16 职场文书
开工仪式策划方案
2014/05/23 职场文书
擅自离岗检讨书
2014/09/12 职场文书
流动人口婚育证明
2014/10/19 职场文书
2015年禁毒工作总结
2015/04/30 职场文书
2016七夕情人节寄语
2015/12/04 职场文书
MySQL中日期型单行函数代码详解
2021/06/21 MySQL