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 相关文章推荐
JavaScript开发时的五个注意事项
Dec 08 Javascript
关于JavaScript的一些看法
May 27 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
详细分析JavaScript变量类型
Jul 08 Javascript
javascript中checkbox使用方法简单实例演示
Nov 17 Javascript
JavaScript中 ES6 generator数据类型详解
Aug 11 Javascript
JavaScript-html标题滚动效果的简单实现
Sep 08 Javascript
Flask中获取小程序Request数据的两种方法
May 12 Javascript
jQuery操作DOM_动力节点Java学院整理
Jul 04 jQuery
vue-cli 引入、配置axios的方法
May 08 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
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
用php解析html的实现代码
2011/08/08 PHP
php强大的时间转换函数strtotime
2016/02/18 PHP
Yii2 rbac权限控制操作步骤实例教程
2016/04/29 PHP
php批量删除操作代码分享
2017/02/26 PHP
thinkPHP5 tablib标签库自定义方法详解
2017/05/10 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
Javascript学习笔记7 原型链的原理
2010/01/11 Javascript
Easy.Ajax 部分源代码 支持文件上传功能, 兼容所有主流浏览器
2011/02/24 Javascript
javascript实现仿IE顶部的可关闭警告条
2015/05/05 Javascript
Javascript中实现String.startsWith和endsWith方法
2015/06/10 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
非常实用的vue导航钩子
2017/03/20 Javascript
javascript 产生随机数的几种方法总结
2017/09/26 Javascript
jQuery实现网页拼图游戏
2020/04/22 jQuery
JS/HTML5游戏常用算法之碰撞检测 像素检测算法实例详解
2018/12/12 Javascript
vue项目添加多页面配置的步骤详解
2019/05/22 Javascript
Python使用matplotlib绘制三维图形示例
2018/08/25 Python
使用Python编写Prometheus监控的方法
2018/10/15 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
django 使用全局搜索功能的实例详解
2019/07/18 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
菲律宾旅游网站:Expedia菲律宾
2017/10/11 全球购物
I.T中国官网:精选时尚设计师单品网购平台
2018/03/26 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
opencv实现图像几何变换
2021/03/24 Python
国际贸易个人求职信范文
2014/01/04 职场文书
七一党建活动方案
2014/01/28 职场文书
美容院考勤制度
2014/01/30 职场文书
收款委托书
2014/10/14 职场文书
华山导游词
2015/02/03 职场文书
云冈石窟导游词
2015/02/04 职场文书
2015年度优秀员工获奖感言
2015/07/31 职场文书
学习弘扬焦裕禄精神心得体会
2016/01/23 职场文书
Python如何快速找到多个字典中的公共键(key)
2022/04/29 Python