简单实现JS计算器功能

2024-10-08 22:26:26

该计算器功能：
1.校验：小数点，重复计算，以及大量更符合用户体验的操作。
2.能够从键盘输入。

效果图：

html代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link type="text/css" rel="stylesheet" href="css/style.css"></link>
</head>
<body>
  <!--定义按键表格,每个按键对应一个事件触发-->
  <div id="cal" class="cal">
    <form action="./calcuServlet" method="post" id="toCalcu">
      <div class="cont">
      <input id="upText" class="textShow" type="text" name="process"
         maxlength="10" readonly="readonly" />
      <input id="downText" class="text" type="text" name="text" value="0"
         maxlength="10" readonly="readonly" />  

      <input type="button" class="button" name="deleteAll" value="C" onclick="clearAllText()" />
      <input type="button" class="button" name="opposite" value="+/-" onclick="oppositeOp()" />
      <input type="button" class="button" name="delOne" value="←" onclick="deleteOneDigit()" />
      <input type="button" class="button" name="Add" value="+" onclick="clickOperation('+')" />
      <input type="button" class="button" name="seven" value="7" onclick="clickNum(7)" />
      <input type="button" class="button" name="eight" value="8" onclick="clickNum(8)" />
      <input type="button" class="button" name="nine" value="9" onclick="clickNum(9)" />
      <input type="button" class="button" name="Reduce" value="-" onclick="clickOperation('-')" />
      <input type="button" class="button" name="Four" value="4" onclick="clickNum(4)" />
      <input type="button" class="button" name="Five" value="5" onclick="clickNum(5)" />
      <input type="button" class="button" name="Sex" value="6" onclick="clickNum(6)" />
      <input type="button" class="button" name="Multip" value="x" onclick="clickOperation('x')" />
      <input type="button" class="button" name="One" value="1" onclick="clickNum(1)" />
      <input type="button" class="button" name="Two" value="2" onclick="clickNum(2)" />
      <input type="button" class="button" name="Three" value="3" onclick="clickNum(3)" />
      <input type="button" class="button" name="Division" value="÷" onclick="clickOperation('/')" />
      <input type="button" class="button" name="opposite" value="√" onclick="more()" />
      <input type="button" class="button" name="Zero" value="0" onclick="clickNum(0)" />
      <input type="button" class="button" name="Point" value="." onclick="clickNum('.')" />
      <input type="button" class="button" name="Equal" value="=" onclick="calcu()" />
      </div>
    </form> 

  </div>
  <div class="funcBtn">
    <input type="button" id="show" class="button" value="show" onclick="show()" /> <input
      type="button" id="hide" class="button" value="hide" onclick="hide()" />
  </div> 

<script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="./js/calcu.js"></script>
</body>
</html>

css代码：

@CHARSET "UTF-8";
.button {
  width: 73px;
  height: 50px;
  margin-bottom: 5px;
  border: 1px solid #ddd;
  border-radius: 1px;
  font-weight: bold;
  color: #1e395b;
  background: aqua;
  font-size:20px;
  border-radius: 3px;
}
.text {
  width: 300px;
  border: 1px solid #c2c2c2;
  height: 50px;
  border-radius: 5px;
  font-size: 24px;
  text-align: right;
  background: #ffffff;
  margin-top: 10px;
  margin-bottom: 10px;
}
.textShow{
  width: 300px;
  border: 1px solid #c2c2c2;
  height: 40px;
  border-radius: 5px;
  font-size: 18px;
  text-align: right;
  background: #ffffff;
  margin-top: 10px;
  margin-bottom: 10px;
}
.cal{
margin-left:200px;
border:2px solid #99ccff;
margin:100px auto;
position:relative;
width:330px;
height:420px;
border-radius: 10px;
}
.cont{
 margin-left: 10px;
}
.funcBtn{
padding-left: 580px;
border-radius: 10px;
font-size: 20px;
position: fixed;
}

js代码：

/**
 *
 */
    var checkEqual = false;//Avoid repetition calcu
    var opFlag = false; //Check repetition add operation
    var upText = document.getElementById("upText");
    var cal = document.getElementById("cal").style;
    var downText = document.getElementById("downText"); 

    function show() {
      cal.display = "block";
    } 

    function hide() {
      cal.display = "none";
    } 

    function clearAllText() {
      upText.value = "";
      downText.value = "0";
      opFlag = false;
      checkEqual = false;
    } 

    function oppositeOp(){
      downText.value = -downText.value;
    } 

    function deleteOneDigit() {
      downText.value = downText.value.substring(0, downText.value.length - 1);
      if (downText.value == "" || (downText.value.charAt(0) == "-" && downText.value.charAt(1) == "")) {
        downText.value = "0";
        return downText.value;
      }
      return downText.value;
    } 

    function clickNum(num) {
      if(num == ".") {
        checkIfAddPoint(num);
      } else {
        checkIfAddNum(num);
      }
      checkEqual = false;
    } 

    function checkIfAddPoint(num) {
      if((num=="." && downText.value == "0") || opFlag == true) {
        downText.value="0.";
        opFlag = false;
      } else if(num == "." && downText.value.indexOf(".") > -1) {
        downText.value;
      } else {
        downText.value += num;
      }
    } 

    function checkIfAddNum(num) {
       if((num != "." && downText.value == "0" && downText.value[1] != ".")
           || opFlag == true
           || downText.value == "Infinity"
           || checkEqual == true) {
        downText.value = num;
        opFlag = false;
      } else {
        downText.value += num;
      }
    } 

    function clickOperation(op){
      checkEqual = false;
      downText.value = checkdownTextValid(downText.value);
      downText.value = checkZero(upText.value,downText.value);
      switch(op){
      case "+":{
        upText.value = appendupTextValue(upText.value,downText.value,"+");
        opFlag = true;
       }break;
      case "-":{
        upText.value = appendupTextValue(upText.value,downText.value,"-");
        opFlag = true;
       }break;
      case "x":{
        upText.value = appendupTextValue(upText.value,downText.value,"*");
        opFlag = true;
       }break;
      case "/":{
        upText.value = appendupTextValue(upText.value,downText.value,"/");
        opFlag = true;
       }break;
      }
    } 

    function checkdownTextValid(downText){
      if(downText.charAt(downText.length-1) == "."){
        return downText.substring(0,downText.length-1);
      }
      return downText;
    } 

    function checkZero(upText,downText){
      if(upText.charAt(upText.length-1) == "/" && downText == "0"){
        return "Error";
      }
      return downText;
    } 

    function appendupTextValue(oldvalue,newvalue,operation){
      if(oldvalue == ""){
         return oldvalue = newvalue+operation;
      } else if(opFlag!=true){
         return oldvaluee = oldvalue+newvalue+operation;
      } else{
        return oldvalue.substring(0, oldvalue.length-1)+operation;
      }
    } 

    function calcu() {
      if(!checkEqual){
      downText.value = eval(upText.value+downText.value);
      upText.value = "";
      checkEqual = true;
      }
    } 

    window.document.onkeydown = chooseKey;
    function chooseKey(evt){
      if(evt.keyCode == 13){alert("=");}
      else if(evt.keyCode == 8){deleteOneDigit();}
      else if(evt.keyCode == 27){clearAllText();}
      else if(evt.keyCode == 48){clickNum('0');}
      else if(evt.keyCode == 49){clickNum('1');}
      else if(evt.keyCode == 50){clickNum('2');}
      else if(evt.keyCode == 51){clickNum('3');}
      else if(evt.keyCode == 52){clickNum('4');}
      else if(evt.keyCode == 53){clickNum('5');}
      else if(evt.keyCode == 54){clickNum('6');}
      else if(evt.keyCode == 55){clickNum('7');}
      else if(evt.keyCode == 56){clickNum('8');}
      else if(evt.keyCode == 57){clickNum('9');}
      else if(evt.keyCode == 96){clickNum('0');}
      else if(evt.keyCode == 97){clickNum('1');}
      else if(evt.keyCode == 98){clickNum('2');}
      else if(evt.keyCode == 99){clickNum('3');}
      else if(evt.keyCode == 100){clickNum('4');}
      else if(evt.keyCode == 101){clickNum('5');}
      else if(evt.keyCode == 102){clickNum('6');}
      else if(evt.keyCode == 103){clickNum('7');}
      else if(evt.keyCode == 104){clickNum('8');}
      else if(evt.keyCode == 105){clickNum('9');}
      else if(evt.keyCode == 110){clickNum('.');}
      else if(evt.keyCode == 106){clickOperation('x');}
      else if(evt.keyCode == 107){clickOperation('+');}
      else if(evt.keyCode == 111){clickOperation('÷');}
      else if(evt.keyCode == 109){clickOperation('-');}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

Javascript 实现计算器时间功能详解及实例（二）

Javascript 计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) Javascript计算器 -> 添加时间在屏显区左上角添加时间显示效果图如下: 代码初始化 // 计算器初始化 Calculator.prototype.init = function () { this.addTdClick(); // 时间显示 this.showDate(); }; 时间显示 // 在屏显区左上角显示时间日期 Calculator
javascript实现简易计算器的代码

今天闲来无聊,想写点什么,突然想到用javascript写一个计算器.程序还存在很多的Bug,先在这里记录一下,以后慢慢更正. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.or
使用JSP制作一个超简单的网页计算器的实例分享

实现一个简单的计算器程序,要求:使用jsp+javabean模式实现. 项目源代码如下: 文件:calculator.jsp <%@ page language="java" pageEncoding="UTF-8"%> <%@ page isErrorPage="true"%> <%@ page errorPage="calculator.jsp" %> <%@ taglib uri
使用jsp调用javabean实现超简单网页计算器示例

以下是代码: Calculator.java 复制代码代码如下: package com.amos.model; import java.math.BigDecimal; /** * @ClassName: Calculator * @Description: 计算器 * @author: amosli * @email:amosli@infomorrow.com * @date Mar 20, 2014 1:04:59 AM */ public class Calculator {
javascript实现简单的可随机变色网页计算器示例

本文实例讲述了javascript实现简单的可随机变色网页计算器.分享给大家供大家参考,具体如下: 该程序能实现简单的加.减.乘.除.求余,页面还添加了随机变换颜色的功能. 运行效果图如下: 完整实例代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> Day 2 </TITLE> <META
js实现简单计算器

参考部分资料,编写一个简单的计算器案例,虽然完成了正常需求,但是也有不满之处,待后续实力提升后再来补充,先把不足之处列出: 1:本来打算只要打开页面,计算器的输入框会显示一个默认为0的状态,但是在输入框加入默认显示为0的时候,选择数据输入时,该0会显示输入数字的前面,例如"0123",由于能力有限,待后续实力提升再来补充完善! 2:目前只能实现鼠标控制选择按钮,待完善键盘录入功能. 3:乘法的那个符号在本来想改成"×"这个符号的,待后续完善. 附图片一张: html
网页计算器一个JS计算器

一个挺小的JavaScript网页计算器,界面美化的我想还是不错的,毕竟在没有使用任何图片修饰的情况下,很好看,而且功能挺实用,可以完成基本的数学算数运算,点击"运行代码"可以运行一下看效果. 计算器 button {width:40; border: 1 solid #808080;background-color: #FFFFFF} &nbsp ← 1 2 3 + 4 5 6 - 7 8 9 × C 0 = ÷ [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
JS 实现计算器详解及实例代码（一）

Javascript 实现计算器: 系列文章: JS 实现计算器详解及实例代码(一) Javascript 实现计算器时间功能详解及实例(二) 小型JavaScript计算器自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理. 总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码: 面板(main-board) 面板
node.js+express制作网页计算器

环境: 主机:WIN10 express安装: 1.安装express-generator 输入命令: npm install -g express-generator 2.安装express 输入命令: npm install -g express 3.验证是否安装成功输入命令:express -V 查看帮助:express --help 建立工程: express -e calculator cd calculator && npm install 运行默认网页: 输入命令:npm
js实现简单的计算器功能

话不多说,请看示例代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单的计算器</title> <style> * { margin: 0 auto; padding: 0px; } html, body { width: 100%; height: 100%; } a { text-
基于JSP实现一个简单计算器的方法

本文实例讲述了基于JSP实现一个简单计算器的方法.分享给大家供大家参考.具体实现方法如下: index.jsp 复制代码代码如下: <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%> <% String path = request.getContextPath(); String basePath = request.getSch
html+js实现简单的计算器代码(加减乘除)

html+js实现简单的计算器代码(加减乘除) <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <table> <tr> <td&

简单实现JS计算器功能

相关推荐

随机推荐