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的trim,ltrim,rtrim自定义函数
Sep 21 Javascript
jQuery 1.2.x 升? 1.3.x 注意事项
May 06 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
Dec 27 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
Apr 12 Javascript
简介JavaScript中setUTCSeconds()方法的使用
Jun 12 Javascript
javascript实现拖放效果
Dec 16 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
JavaScript表单验证完美代码
Mar 02 Javascript
详解Vue 动态添加模板的几种方法
Apr 25 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
May 17 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
Oct 28 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
WINXP下apache+php4+mysql
2006/11/25 PHP
PHP和Mysqlweb应用开发核心技术 第1部分 Php基础-3 代码组织和重用2
2011/07/03 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP Callable强制指定回调类型的方法
2016/08/30 PHP
yii通过小物件生成view的方法
2016/10/08 PHP
PHP获取当前URL路径的处理方法(适用于多条件筛选列表)
2017/02/10 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
在JQuery dialog里的服务器控件 事件失效问题
2010/12/08 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
JavaScript中输出标签的方法
2014/08/27 Javascript
jQuery中index()方法用法实例
2014/12/27 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
2016/06/23 Javascript
JSON字符串和JSON对象相互转化实例详解
2017/01/05 Javascript
jQuery实现级联下拉框实战(5)
2017/02/08 Javascript
vue实现a标签点击高亮方法
2018/03/17 Javascript
jQuery插件Validation表单验证详解
2018/05/26 jQuery
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
jQuery Datatables 动态列+跨列合并实现代码
2020/01/30 jQuery
pytorch: tensor类型的构建与相互转换实例
2018/07/26 Python
python实现一个简单的udp通信的示例代码
2019/02/01 Python
python设置环境变量的原因和方法
2019/06/24 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
Python3 集合set入门基础
2020/02/10 Python
Django框架请求生命周期实现原理
2020/11/13 Python
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
C语言基础笔试题
2013/04/27 面试题
Java文件和目录(IO)操作
2014/08/26 面试题
会计核算科岗位职责
2014/03/19 职场文书
2014党员学习《反腐倡廉警示教育读本》思想汇报
2014/09/13 职场文书
2014年小学国庆节活动方案
2014/09/16 职场文书
财务工作检讨书
2014/10/29 职场文书
提升Nginx性能的一些建议
2021/03/31 Servers