利用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 相关文章推荐
DOM 脚本编程中的兄弟节点
Oct 31 Javascript
JS中showModalDialog 的使用解析
Apr 17 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
JavaScript数据结构与算法之栈详解
Mar 12 Javascript
jquery专业的导航菜单特效代码分享
Aug 29 Javascript
微信小程序 教程之WXML
Oct 18 Javascript
JS实现中文汉字按拼音排序的方法
Oct 09 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
深入koa-bodyparser原理解析
Jan 16 Javascript
js获取 gif 的帧数的代码实例
Sep 10 Javascript
JavaScript 替换所有匹配内容及正则替换方法
Feb 12 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
You might like
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
Zend Framework教程之路由功能Zend_Controller_Router详解
2016/03/07 PHP
PHP 接入微信扫码支付总结(总结篇)
2016/11/03 PHP
php修改数组键名的方法示例
2017/04/15 PHP
基于PHP的加载类操作以及其他两种魔术方法的应用实例
2017/08/28 PHP
一份老外写的XMLHttpRequest代码多浏览器支持兼容性
2007/01/11 Javascript
JQuery select控件的相关操作实现代码
2012/09/14 Javascript
深入理解Javascript作用域与变量提升
2013/12/09 Javascript
javascript实现控制的多级下拉菜单
2015/07/05 Javascript
d3.js实现简单的网络拓扑图实例代码
2016/11/06 Javascript
jQuery倒计时代码(超简单)
2017/02/27 Javascript
微信小程序 MD5的方法详解及实例代码
2017/03/10 Javascript
解决vue中使用Axios调用接口时出现的ie数据处理问题
2018/08/13 Javascript
纯javascript前端实现base64图片下载(兼容IE10+)
2018/09/14 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
JavaScript算法学习之冒泡排序和选择排序
2019/11/02 Javascript
Python标准库os.path包、glob包使用实例
2014/11/25 Python
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
python getopt详解及简单实例
2016/12/30 Python
对Python 2.7 pandas 中的read_excel详解
2018/05/04 Python
Centos 升级到python3后pip 无法使用的解决方法
2018/06/12 Python
html Table 表头固定的实现
2019/01/22 HTML / CSS
英国复古皮包品牌:Beara Beara
2018/07/18 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
木工主管岗位职责
2013/12/08 职场文书
导游的职业规划书范文
2013/12/27 职场文书
部队学习十八大感言
2014/01/11 职场文书
任命书模板
2014/06/04 职场文书
低碳环保标语
2014/06/12 职场文书
2014年底个人工作总结
2015/03/10 职场文书
民事申诉状范本
2015/05/20 职场文书
2015年支教教师工作总结
2015/07/22 职场文书
matplotlib之pyplot模块实现添加子图subplot的使用
2021/04/25 Python
mysql函数全面总结
2021/11/11 MySQL