js+html实现简易网页计算器

前言

很早之前就想用js写一个简单的计算器，今天这个心愿算是完成了，作为用js做的第一个小项目，挣扎了一下午，代码其实挺简单的，无奈本人太菜了，代码十分钟，bug半小时；

图片展示

其实第一张图才是我想做的计算器，但是最上面一行的功能无法实现，并且第一张是用grid布局写的，添加js不方便，于是我又写了第二张图的界面

这个计算器的主要特点就是可以在屏幕上显示出用户想要计算的整个表达式，然后直接计算出结果，而不需要每进行一次加减乘除的运算都要按等于号；功能与界面是仿照的vivo手机自带的计算器，由于我用的就是vivo手机；

代码解析

html 部分

<body>
 <table>
      <tr>
          <td colspan="4"><input class="screen" type="text" disabled /></td>
      </tr>
      <tr>
        <td><input class="but_ac but" type="button" value="AC" style="color: orange"></td>
        <td><input class="but_ac but" type="button" value="<—" style="color: orange"></td>
        <td><input class="but" type="button" value="+/-"></td>
        <td><input class="but" type="button" value="÷"></td>
      </tr>
      <tr>
        <td><input class="but" type="button" value="7"></td>
        <td><input class="but" type="button" value="8"></td>
        <td><input class="but" type="button" value="9"></td>
        <td><input class="but" type="button" value="×"></td>
      </tr>
      <tr>
        <td><input class="but" type="button" value="4"></td>
        <td><input class="but" type="button" value="5"></td>
        <td><input class="but" type="button" value="6"></td>
        <td><input class="but" type="button" value="-"></td>
      </tr>
      <tr>
        <td><input class="but" type="button" value="1"></td>
        <td><input class="but" type="button" value="2"></td>
        <td><input class="but" type="button" value="3"></td>
        <td><input class="but" type="button" value="+"></td>
      </tr>
      <tr>
        <td colspan="2"><input class="but" type="button" value="0" style="width: 180px"></td>
        <td><input class="but" type="button" value="."></td>
        <td><input class="but" type="button" value="=" style="background-color:orange ;color:white"></td>
      </tr>
</table>
</body>

html部分就是简单的用table写的，在单元格内嵌套按钮，为了和手机上的界面更像，AC、<-、=这三个按钮单独设置了字体颜色和背景颜色；

css部分

   <style type="text/css">
        table{
            margin:0 auto;      //使整个计算器的界面位于网页中央
        }
        .but_ac{
            width: 80px;
            height: 60px;
            background-color : lightgray;  //设置按钮的背景颜色为浅灰色
            font-size: 1.2em;              //设置字体大小
        }
        .but{
            width: 80px;
            height: 60px;
            background-color : lightgray;
            font-size: 1.2em;
        }
        .screen{
                width: 350px;
            height: 70px;
            font-size: 1.5em;
            color: white;
            background-color: black;
            text-align:right;       //使用户输入的表达数从屏幕的右边开始显示
        }
    </style>

js部分

思路

获取用户所点击的按钮上的元素
将获取的元素显示在屏幕上
调用eval函数计算表达式的结果
整体就是用一连串的if else语句判断你所点击的按钮，然后作出回应

代码

<script type="text/javascript">
window.onload=function(){
var num=document.getElementsByClassName("but");  //num数组存放元素对象
var scr=document.getElementsByClassName("screen")[0]; //获取屏幕对象
for(var i=0;i<num.length;i++)    //通过for循环为每个按钮添加onclick事件
{
  num[i].onclick=function(){
   if(this.value=="AC"){       //如果点击AC，则清空屏幕
           scr.value="";
    }
  else if( this.value=="+/-"){  //如果点击“+/-”按钮有两种情况
       //第一种情况，如果此时屏幕为空，则什么也不显示
       if(scr.value==""){
              scr.value="";
         }
       //如果屏幕不为空，就判断最后两个元素是不是运算符加数字的结构
        else if(isNaN(scr.value.charAt(scr.value.length-  1))==false&&isNaN(scr.value.charAt(scr.value.length-2))==true)
         {
       //给最后一个数字加括号并变为负数
    scr.value=scr.value.substr(0,scr.value.length-1)+"("+"-"+scr.value.charAt(scr.value.length-1)+")";
           }
   }
    //当屏幕不为空时，判断点击的是不是退格键
  else if (this.value=="<—"&&this.value!=""){
     //将最后一个元素截掉
        scr.value=scr.value.substr(0,scr.value.length-1);
  }
    //当屏幕为空时判断是否点击的是小数点
    else if(scr.value==""&&this.value=="."){
        scr.value="0.";
   }
    //当点击等于号时，用eval函数计算表达式的结果并显示到屏幕上
  else if(this.value=="="){
           scr.value=eval(scr.value);
   }
    //当屏幕为空时，点击+、-、*、/时不做反应
  else if(scr.value==""&&(this.value=="+"||this.value=="-"||this.value=="×"||this.value=="÷"))
   {
      scr.value=="";
   }
  else{
            scr.value+=this.value;
   }
      }
    }
 }
    </script>

完整代码

<!DOCTYPE html>
<html>
<head>
    <title>jsss</title>
    <style type="text/css">
        table{

            margin:0 auto;

        }

        .but_ac{
            width: 80px;
            height: 60px;
            background-color : lightgray;
            font-size: 1.2em;
        }
        .but{
            width: 80px;
            height: 60px;
            background-color : lightgray;
            font-size: 1.2em;
        }
        .screen{
            width: 350px;
            height: 70px;
            font-size: 1.5em;
            color: white;
            background-color: black;
            text-align:right;
        }

    </style>

    <script type="text/javascript">
        window.onload=function(){
           var result;
           var str=[];
           var num=document.getElementsByClassName("but");
           var scr=document.getElementsByClassName("screen")[0];
           for(var i=0;i<num.length;i++)
           {

                num[i].onclick=function(){

                if(this.value=="AC"){
                    scr.value="";
                  }
                else if( this.value=="+/-"){
                    if(scr.value=="")
                    {
                        scr.value="";
                    }
                    else if(isNaN(scr.value.charAt(scr.value.length-1))==false&&isNaN(scr.value.charAt(scr.value.length-2))==true)
                    {
                        scr.value=scr.value.substr(0,scr.value.length-1)+"("+"-"+scr.value.charAt(scr.value.length-1)+")";
                    }
                  }

                else if (this.value=="<—"&&this.value!=""){
                  scr.value=scr.value.substr(0,scr.value.length-1);
                }
                else if(scr.value==""&&this.value=="."){
                     scr.value="0.";
                 }
                else if(this.value=="="){
                    scr.value=eval(scr.value);
                 }
                 else if(scr.value==""&&(this.value=="+"||this.value=="-"||this.value=="×"||this.value=="÷"))
                    {
                        scr.value=="";
                    }

               else
                 {
                    scr.value+=this.value;
                 }
            }
         }

    }

    </script>

</head>
<body>
 <table>
      <tr>
          <td colspan="4"><input class="screen" type="text" disabled /></td>
      </tr>
      <tr>
        <td><input class="but_ac but" type="button" value="AC" style="color: orange"></td>
        <td><input class="but_ac but" type="button" value="<—" style="color: orange"></td>
        <td><input class="but" type="button" value="+/-"></td>
        <td><input class="but" type="button" value="÷"></td>
      </tr>
      <tr>
        <td><input class="but" type="button" value="7"></td>
        <td><input class="but" type="button" value="8"></td>
        <td><input class="but" type="button" value="9"></td>
        <td><input class="but" type="button" value="×"></td>
      </tr>
      <tr>
        <td><input class="but" type="button" value="4"></td>
        <td><input class="but" type="button" value="5"></td>
        <td><input class="but" type="button" value="6"></td>
        <td><input class="but" type="button" value="-"></td>
      </tr>
      <tr>
        <td><input class="but" type="button" value="1"></td>
        <td><input class="but" type="button" value="2"></td>
        <td><input class="but" type="button" value="3"></td>
        <td><input class="but" type="button" value="+"></td>
      </tr>
      <tr>
        <td colspan="2"><input class="but" type="button" value="0" style="width: 180px"></td>
        <td><input class="but" type="button" value="."></td>
        <td><input class="but" type="button" value="=" style="background-color:orange ;color:white"></td>
      </tr>

</table>

</body>
</html>

原文地址：https://www.cnblogs.com/zhulmz/p/11623685.html

时间： 2024-10-28 00:45:05

js+html实现简易网页计算器的相关文章

网页计算器 && 简易网页时钟 && 倒计时时钟

<!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.org/1999/xhtml"> <head> <meta http-equiv="Content-

js css 实现简易计算器

<!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.org/1999/xhtml"> <head> <meta http-equiv="Content-

JavaScript版网页计算器,仿Vista风格,计算器中的按钮做的想当漂亮,由此也增加了对此计算器的专业好感.鼠标移在计算器上,有响应效果. <!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

js网页计算器(按键+点击)

var text = document.getElementById('text');// 显示文本 var by = document.getElementById('by'); //按钮生成区域 //按键的value var str = new Array('2', '√', '=', '清除', '1', '2', '3', '+', '4', '5', '6', '-', '7', '8', '9', '×', '0', '.', '±', '÷'); var x = '',// 计算的

JS实现一个简单的计算器

使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除.效果如上: 第一步: 创建构建运算函数count(). 第二步: 获取两个输入框中的值和获取选择框的值. 提示:document.getElementById( id名 ).value 获取或设置 id名的值. 第三步: 获取通过下拉框来选择的值来改变加减乘除的运算法则. 提示:使用switch判断运算法则. 第四步: 通过 = 按钮来调用创建的函数,得到结果. 注意: 使用parseInt

iOS:制作一个简易的计算器

初步接触视图,制作了一个简易的计算器,基本上简单的计算是没有问题的,不是很完美,可能还有一些bug,再接再厉. 1 // 2 // ViewController.m 3 // 计算器 4 // 5 // Created by ma c on 15/8/25. 6 // Copyright (c) 2015年 bjsxt. All rights reserved. 7 // 8 9 #import "ViewController.h" 10 11 @interface ViewContr

css,js写的简易的tab导航

简易tab导航作为前端新手,看着别人写的tab导航代码,自己想模仿却总是忘记.于是这次自己利用css,js写了简易的tab导航,话不多说,上代码,首先是html和css部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab选项卡切换</title> <style type="tex

Objective-C:制作一个简易的计算器

js实现双击后网页自动跑-------Day55

公司的界面设计环节总算是告一段落了,必须要承认的是,这段时间晚间的学习带给我很多益处,在工作中偶尔的应用,效果出奇的好,收到领导和同事的一些小赞扬,表示很欣慰,也长了点不少自信,虽然不理解,他们这些工作好几年的人应该对这些不是应该都很了解么,为什么会表现出来有些陌生,不过不想那么多了,喜欢就好. 今天来记录下js实现双击后网页自动跑,这个在很多网站上都有所体现吧,那么该如何实现呢? 首先我们来分析下实现的基本原理: 1.获取鼠标的双击事件(这个在前面曾经记录过一次,但是很不幸的是上次貌似还写错了