JS处理一些简单计算题

2024-11-30 04:10:20

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

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

<!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计算距当前时间的时间差实例
AngularJS实现的根据数量与单价计算总价功能示例
JavaScript实现的超简单计算器功能示例
JS基于递归实现网页版计算器的方法分析
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Java调用JavaScript实现字符串计算器代码示例
js实现rem自动匹配计算font-size的示例
javascript计算对象长度的方法
JS实现的简单四则运算计算器功能示例
javascript计算渐变颜色的实例
利用JS如何计算字符串所占字节数示例代码

利用JS如何计算字符串所占字节数示例代码

前言在工作中是不是经常会遇到字符串,但是要求控制字节数的需求?因为很多时候数据库中对字节数有控制,所以在前端过程中就需要判断一下,今天我们来分享一下. 本文主要给大家介绍了关于JS计算字符串所占字节数的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 示例代码 /** * 计算字符串所占的内存字节数,默认使用UTF-8的编码方式计算,也可制定为UTF-16 * UTF-8 是一种可变长度的 Unicode 编码格式,使用一至四个字节为每个字符编码 * * 000000
JS基于递归实现网页版计算器的方法分析

本文实例讲述了JS基于递归实现网页版计算器的方法.分享给大家供大家参考,具体如下: 递归实现网页版计算器可以简化代码,设计思路: 1.css+html实现计算器的外观,给每个button绑定number(z)事件,传入z的不同来区分触发事件的按钮. <style>放入head中这个div放在body中,是计算器的html,number()通过传入不同的数字,区分触发按钮. <div class="bg"> <div id="txt"&
JS计算距当前时间的时间差实例

如下所示: /** * JS获取距当前时间差 * * @param int time 时间戳格式 * */ function get_time_diff(time) { var diff = ''; var time_diff = new Date().getTime() - time; //时间差的毫秒数 //计算出相差天数 var days = Math.floor(time_diff / (24 * 3600 * 1000)); if (days > 0) { diff += days +
JavaScript实现的超简单计算器功能示例

本文实例讲述了JavaScript实现的超简单计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net JS计算器</title> <script type="text/javascript&qu
js实现rem自动匹配计算font-size的示例

实际开发过程中,我们经常会被各种宽度,高度计算搞晕.尤其是使用了rem的计算方式,自适应布局难倒一大片程序员.为了解决这类问题,我觉得可以利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值. 下面是相关JavaScript的实现代码: (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' :
JS实现的简单四则运算计算器功能示例

本文实例讲述了JS实现的简单四则运算计算器功能.分享给大家供大家参考,具体如下: 先来看看运行效果: 具体代码如下: <!DOCTYPE html> <html> <meta name="content-type" content="text/html; charset=UTF-8"> <head> <title>www.jb51.net 计算器 Calculator</title> <!
javascript计算渐变颜色的实例

javascript计算渐变颜色的实例有时候,一个表格或者一片区域内,需要若干同色系从浅到深的颜色,如图所示: 如果需要的颜色少,则颜色的差异较大,需要的颜色多,则颜色差异小,如下图: 这时,就用到了同色系渐变颜色的计算,算法如下: function getItemColors (colorLevel) { var colors= []; //默认的最深颜色 var red = 134,green = 108, blue = 184; //最浅颜色是239,239,239 比如:最浅颜色的re
javascript计算对象长度的方法

计算对象的长度,即获取对象属性的个数,具体如下方法一:通过for in 遍历对象,并通过hasOwnProperty判断是否是对象自身可枚举的属性 var obj = {"c1":1,"c2":2}; function countProperties(obj){ for(var property in obj){ if(Object.prototype.hasOwnProperty.call(obj,property){ count++; }) } return
Java调用JavaScript实现字符串计算器代码示例

如果表达式是字符串的形式,那么一般我们求值都会遇到很大的问题. 这里有一种直接调用JavaScript的方法来返回数值,无疑神器. 代码如下: package scc; import javax.script.ScriptEngine; import javax.script.ScriptEngineManager; import javax.script.ScriptException; public class Counter { public static void main(String
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】

本文实例讲述了JavaScript重复元素处理方法.分享给大家供大家参考,具体如下: 判断一个字符串中出现次数最多的字符,统计这个次数 //将字符串的字符保存在一个hash table中,key是字符,value是这个字符出现的次数 var str = "abcdefgaddda"; var obj = {}; for (var i = 0, l = str.length; i < l; i++) { var key = str[i]; if (!obj[key]) { obj[
AngularJS实现的根据数量与单价计算总价功能示例

本文实例讲述了AngularJS实现的根据数量与单价计算总价功能.分享给大家供大家参考,具体如下: 先看一下效果: 代码如下: <!DOCTYPE html> <html lang="en" ng-app> <head> <meta charset="UTF-8"> <title>www.jb51.net angular计算总价</title> <link rel="styles

JS处理一些简单计算题

您可能感兴趣的文章:

相关推荐

随机推荐