首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

利用JavaScript写一个简单计算器

Posted in Javascript onNovember 27, 2021

效果如下：

利用JavaScript写一个简单计算器

参考程序：

<!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写一个简单计算器

- Author -

缘分锝天空

- Original Sources -

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
页面使用密码保护代码
Apr 10 Javascript
函数window.open实现关闭所有的子窗口
Aug 03 Javascript
JS实现网页上随滚动条滚动的层效果代码
Nov 04 Javascript
Angularjs根据json文件动态生成路由状态的实现方法
Apr 17 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
Sep 29 Javascript
Vue中正确使用jQuery的方法
Oct 30 jQuery
JavaScript分步实现一个出生日期的正则表达式
Mar 22 Javascript
vuex直接赋值的三种方法总结
Sep 16 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
JavaScript eval()函数定义及使用方法详解
Jul 07 Javascript
vue props default Array或是Object的正确写法说明
Jul 30 Javascript
JavaScript中的宏任务和微任务详情
Nov 27 #Javascript
前端监听websocket消息并实时弹出(实例代码)
Vue实现跑马灯样式文字横向滚动
Nov 23 #Vue.js
利用js实现简单开关灯代码
Nov 23 #Javascript
详解Vue的列表渲染
Nov 20 #Vue.js
详解JS数组方法
Nov 20 #Javascript
详解Vue slot插槽
Nov 20 #Vue.js
数据库卡死(1) update(2) 递归(1) Parser(1) tcp/ip(1) IP(1) 限流(2) 内置模块(1) 全局锁(1) 限速(1)
You might like
Smarty foreach控制循环次数的实现详解
2013/07/03 PHP
修改PHP脚本使WordPress拦截垃圾评论的方法示例
2015/12/10 PHP
Thinkphp框架+Layui实现图片/文件上传功能分析
2020/02/07 PHP
JQUERY设置IFRAME的SRC值的代码
2010/11/30 Javascript
JavaScript中使用正则匹配多条，且获取每条中的分组数据
2010/11/30 Javascript
jQuery EasyUI API 中文文档 - Calendar日历使用
2011/10/19 Javascript
仅IE支持clearAttributes/mergeAttributes方法使用介绍
2012/05/04 Javascript
jquery插件制作教程 txtHover
2012/08/17 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
基于jquery实现的省市区级联无ajax
2013/09/24 Javascript
node.js中的fs.stat方法使用说明
2014/12/16 Javascript
微信中一些常用的js方法汇总
2015/03/12 Javascript
4种JavaScript实现简单tab选项卡切换的方法
2016/01/06 Javascript
jQuery遮罩层效果实例分析
2016/01/14 Javascript
AngularJS中的指令全面解析(必看)
2016/05/20 Javascript
JavaScript事件学习小结（一）事件流
2016/06/09 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
微信小程序 动态绑定数据及动态事件处理
2017/03/14 Javascript
jQuery简单判断值是否存在于数组中的方法示例
2018/04/17 jQuery
vue项目中将element-ui table表格写成组件的实现代码
2019/06/12 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
使用纯前端JavaScript实现Excel导入导出方法过程详解
2020/08/07 Javascript
如何利用node转发请求详解
2020/09/17 Javascript
Python的ORM框架SQLAlchemy入门教程
2014/04/28 Python
Python入门篇之字符串
2014/10/17 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
用Python制作简单的钢琴程序的教程
2015/04/01 Python
详解Python中的from..import绝对导入语句
2016/06/21 Python
Python基于列表list实现的CRUD操作功能示例
2018/01/05 Python
python实现向微信用户发送每日一句 python实现微信聊天机器人
2019/03/27 Python
基于Python打造账号共享浏览器功能
2019/05/30 Python
python手写均值滤波
2020/02/19 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
实习护士自我鉴定
2013/10/13 职场文书
政风行风建设整改方案
2014/10/27 职场文书