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 自动安装exe程序
Nov 30 Javascript
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
JQuery最佳实践之精妙的自定义事件
Aug 11 Javascript
收集的10个免费的jQuery相册
Feb 26 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
javascript实现3D切换焦点图
Oct 16 Javascript
js实现微博发布小功能
Jan 12 Javascript
几行js代码实现自适应
Feb 24 Javascript
webpack使用 babel-loader 转换 ES6代码示例
Aug 21 Javascript
使用Vue完成一个简单的todolist的方法
Dec 01 Javascript
浅析node.js的模块加载机制
May 25 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 array_push()数组函数:将一个或多个单元压入数组的末尾(入栈)
2011/07/12 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
[原创]PHP简单开启curl的方法(测试可行)
2016/01/11 PHP
Symfony2函数用法实例分析
2016/03/18 PHP
CI框架中数据库操作函数$this-&gt;db-&gt;where()相关用法总结
2016/05/17 PHP
PHP实现支持加盐的图片加密解密
2016/09/09 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
js 内存释放问题
2010/04/25 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
JS实现至少包含字母、大小写数字、字符的密码等级的两种方法
2015/02/03 Javascript
JS动态加载当前时间的方法
2015/02/09 Javascript
基于insertBefore制作简单的循环插空效果
2015/09/21 Javascript
第一次接触神奇的Bootstrap表单
2016/07/27 Javascript
Linux系统中利用node.js提取Word(doc/docx)及PDF文本的内容
2017/06/17 Javascript
在vue中封装可复用的组件方法
2018/03/01 Javascript
基于Axios 常用的请求方法别名(详解)
2018/03/13 Javascript
angular-tree-component的使用详解
2018/07/30 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
[31:29]完美世界DOTA2联赛PWL S3 INK ICE vs Magma 第一场 12.20
2020/12/23 DOTA
在Python的框架中为MySQL实现restful接口的教程
2015/04/08 Python
python获取局域网占带宽最大3个ip的方法
2015/07/09 Python
CentOS下Python3的安装及创建虚拟环境的方法
2018/11/28 Python
基于腾讯云服务器部署微信小程序后台服务(Python+Django)
2019/05/08 Python
pandas DataFrame行或列的删除方法的实现示例
2019/08/02 Python
Python OpenCV图像指定区域裁剪的实现
2019/10/30 Python
Python高并发解决方案实现过程详解
2020/07/31 Python
德国骆驼商店:ActiveFashionWorld
2017/11/18 全球购物
印尼值得信赖的在线交易网站:Bukalapak
2019/03/11 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
财务主管自我鉴定
2014/01/17 职场文书
家长会欢迎标语
2014/06/24 职场文书
论文答谢词
2015/01/20 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
《蜜蜂引路》教学反思
2016/02/22 职场文书
2019年朋友圈经典励志语录50条
2019/07/05 职场文书