利用JavaScript写一个简单计算器

 更新时间:2021年11月24日 10:33:11   作者:缘分锝天空  
这篇文章主要介绍了 如何利用JavaScript写一个简单计算器,利用JavaScript写一个简单计算器算是一个简单的小练习吧,需要的小伙伴可以参考一下<BR>

效果如下:

参考程序:

<!DOCTYPE html>

<html lang="en">



<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>模拟计算器</title>

    <style>

        button {

            width: 39px;

            height: 30px;

            background-color: rgb(102, 240, 102);

        }

        button:hover {

            background-color: black;

            color: rgb(255, 249, 237);

        }



        button:active {

            background-color: rgb(79, 72, 72);

            color: white;

        }

        table{

            background: rgb(192, 248, 109);

        }

    </style>

</head>



<body>

    <div>

        <table border="1px">

            <tr style="text-align: center;">

                <td colspan="4">

                    <input type="text" id="result" >

                </td>

            </tr>

            <tr>

                <td><button id="le" onclick="getChar('(')">(</button></td>

                <td><button id="rg" onclick="getChar(')')">)</button></td>

                <td><button id="baifen" onclick="getChar('%')">%</button></td>

                <td><button id="C" onclick="clear1()">C</button></td>

            </tr>

            <tr>

                <td><button id="seven" onclick="getChar('7')">7</button></td>

                <td><button id="eight" onclick="getChar('8')">8</button></td>

                <td><button id="nine" onclick="getChar('9')">9</button></td>

                <td><button id="divi" onclick="getChar('/')">/</button></td>

            </tr>

            <tr>

                <td><button id="four" onclick="getChar('4')">4</button></td>

                <td><button id="five" onclick="getChar('5')">5</button></td>

                <td><button id="six" onclick="getChar('6')">6</button></td>

                <td><button id="mul" onclick="getChar('*')">*</button></td>

            </tr>

            <tr>

                <td><button id="one" onclick="getChar('1')">1</button></td>

                <td><button id="two" onclick="getChar('2')">2</button></td>

                <td><button id="three" onclick="getChar('3')">3</button></td>

                <td><button id="dec" onclick="getChar('-')">-</button></td>

            </tr>

            <tr>

                <td><button id="zero" onclick="getChar('0')">0</button></td>

                <td><button id="point" onclick="getChar('.')">.</button></td>

                <td><button id="=" onclick="getResult()">=</button></td>

                <td><button id="add" onclick="getChar('+')">+</button></td>

            </tr>

        </table>

    </div>

</body>

<script>

    // 点击按键返回按键值

    function getChar(btnid) {

        var btns = document.getElementsByTagName("button")

        switch (btnid) {

            case '+':

                setNum('+')

                break;

            case '.':

                setNum('.')

                break;

            case '=':

                setNum('=')

                break;

            case '0':

                setNum('0')

                break;

            case '1':

                setNum('1')

                break;

            case '2':

                setNum('2')

                break;

            case '3':

                setNum('3')

                break;

            case '-':

                setNum('-')

                break;

            case '4':

                setNum('4')

                break;

            case '5':

                setNum('5')

                break;

            case '6':

                setNum('6')

                break;

            case '7':

                setNum('7')

                break;

            case '8':

                setNum('8')

                break;

            case '9':

                setNum('9')

                break;

            case '/':

                setNum('/')

                break;

            case '*':

                setNum('*')

                break;

            case '(':

                setNum('(')

                break;

            case ')':

                setNum(')')

                break;

            case '%':

                setNum('%')

                break;

            default:

                break;

        }

    }

    // 清空显示屏

    function clear1() {

        document.getElementById("result").value = ""

    }

    // 将数值显示到显示屏

    function setNum(charCode) {

        var origin = document.getElementById('result');

        origin.value += charCode;

        origin.innerText = origin.value;

    }

    // 计算结果

    function getResult(){

        var res=eval(document.getElementById("result").value);

        // 追加'='

        setNum('=');

        // 追加结果

        setNum(res)

    }

</script>

</html>

备注:在做计算的时候,可以直接使用eval这个函数,我们就不用自己手动写加减乘除的计算逻辑了,大大简化了开发

例如:

var num=eval(‘3+3')

则运算结果是num=6

eval函数用法:

语法:eval(参数),参数是js表达式,为字符串,可以包含变量以及已经存在对象的属性

返回值情况:

参数类型 返回值
整数或者函数 整数或函数
字符串(且是表达式) 该字符串表达式的运行结果
字符串(且是语句或者语句块) 执行该语句块并返回undefined

到此这篇关于 利用JavaScript写一个简单计算器的文章就介绍到这了,更多相关JavaScript写简单计算器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • JavaScript 运行机制详解再浅谈Event Loop

    JavaScript 运行机制详解再浅谈Event Loop

    这篇文章主要介绍了JavaScript 运行机制详解及浅谈了Event Loop,感兴趣的小伙伴可以和小编一起阅读下面文章的具体内容
    2021-09-09
  • 微信小程序与php 实现微信支付的简单实例

    微信小程序与php 实现微信支付的简单实例

    这篇文章主要介绍了微信小程序与php 实现微信支付的简单实例的相关资料,需要的朋友可以参考下
    2017-06-06
  • Javascript设计模式之原型模式详细

    Javascript设计模式之原型模式详细

    这篇文章主要介绍了Javascript设计模式之原型模式,原型模式用于在创建对象时,通过共享某个对象原型的属性和方法,从而达到提高性能、降低内存占用、代码复用的效果。下面小编将详细介绍 ,需要的朋友可以参考下
    2021-09-09
  • 微信小程序(十六)form组件详细介绍

    微信小程序(十六)form组件详细介绍

    这篇文章主要介绍了微信小程序form组件详细介绍的相关资料,需要的朋友可以参考下
    2016-09-09
  • 四十九个javascript小知识实用技巧

    四十九个javascript小知识实用技巧

    这篇文章主要给大家分享得是四十九个javascript小知识实用技巧像下面文章围绕JavaScript得各种技巧详细介绍,需要的朋友可以参考一下,希望对你有所帮助
    2021-11-11
  • 微信小程序获取用户openId的实现方法

    微信小程序获取用户openId的实现方法

    这篇文章主要介绍了微信小程序获取用户openId的实现方法的相关资料,需要的朋友可以参考下
    2017-05-05
  • 基于JavaScript代码实现微信扫一扫下载APP

    基于JavaScript代码实现微信扫一扫下载APP

    有很多人在做微信的扫一扫下载。但是在微信更新之后微信将该功能给禁止掉了,也不能说是全面禁止吧,因为腾讯、微信是一家嘛,通过应用宝审核的应用好像还是可以通过扫一扫直接下载的,下面通过本篇文章给大家介绍微信扫一扫下载app的代码片段,感兴趣的朋友一起看看吧
    2015-12-12
  • 微信小程序 Canvas增强组件实例详解及源码分享

    微信小程序 Canvas增强组件实例详解及源码分享

    这篇文章主要介绍了微信小程序 Canvas增强组件实例详解及源码分享的相关资料,WeZRender是一个微信小程序Canvas增强组件,这里详细介绍,需要的朋友可以参考下
    2017-01-01
  • 微信小程序 富文本转文本实例详解

    微信小程序 富文本转文本实例详解

    这篇文章主要介绍了微信小程序 富文本转文本实例详解的相关资料,需要的朋友可以参考下
    2016-10-10
  • Google 地图叠加层实例讲解

    Google 地图叠加层实例讲解

    本文主要介绍Google 地图叠加层,这里帮大家整理了Google地图叠加层一些实用代码并详细介绍了相关知识,有需要的小伙伴可以参考下
    2016-08-08

最新评论