利用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 相关文章推荐
使用Microsoft Ajax Minifier减小JavaScript文件大小的方法
Apr 01 Javascript
基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)
Jul 26 Javascript
Javascript 判断是否存在函数的方法
Jan 03 Javascript
javascript使用中为什么10..toString()正常而10.toString()出错呢
Jan 11 Javascript
小结Node.js中非阻塞IO和事件循环
Sep 18 Javascript
JavaScript中SetInterval与setTimeout的用法详解
Nov 10 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
JavaScript学习笔记--常用的互动方法
Dec 07 Javascript
Angular2库初探
Mar 01 Javascript
javascript实现圣旨卷轴展开效果(代码分享)
Mar 23 Javascript
Vue实现点击后文字变色切换方法
Feb 11 Javascript
Vue.js实现立体计算器
Feb 22 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
PHP伪静态写法附代码
2008/06/20 PHP
PHP静态调用非静态方法的应用分析
2013/05/02 PHP
ThinkPHP使用PHPExcel实现Excel数据导入导出完整实例
2014/07/22 PHP
php的ddos攻击解决方法
2015/01/08 PHP
php中注册器模式类用法实例分析
2015/11/03 PHP
PHP数据的提交与过滤基本操作实例详解
2016/11/11 PHP
Prototype1.5 rc2版指南最后一篇之Position
2007/01/10 Javascript
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
js遍历td tr等html元素
2012/12/13 Javascript
nodejs的10个性能优化技巧
2014/07/15 NodeJs
Nodejs实现多人同时在线移动鼠标的小游戏分享
2014/12/06 NodeJs
jQuery搜索同辈元素方法
2015/02/10 Javascript
jQuery动态修改超链接地址的方法
2015/02/13 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
JavaScript实现兼容IE6的收起折叠与展开效果实例
2017/09/20 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
解决vue2中使用axios http请求出现的问题
2018/03/05 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
js实现简易点击切换显示或隐藏
2020/11/29 Javascript
linux服务器快速卸载安装node环境(简单上手)
2021/02/22 Javascript
[16:56]教你分分钟做大人:司夜刺客
2014/10/30 DOTA
[01:15:45]DOTA2上海特级锦标赛B组小组赛#1 Alliance VS Spirit第一局
2016/02/26 DOTA
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
python redis 删除key脚本的实例
2019/02/19 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
Python random库使用方法及异常处理方案
2020/03/02 Python
CSS3网格的三个新特性详解
2014/04/04 HTML / CSS
Berghaus官网:户外服装和设备,防水服
2020/01/17 全球购物
客服专员岗位职责
2014/02/28 职场文书
高等教育专业自荐信范文
2014/03/26 职场文书
人力资源管理专业自荐信
2014/06/24 职场文书
项目安全员岗位职责
2015/02/15 职场文书
你会写报告?产品体验报告到底该怎么写?
2019/08/14 职场文书
Python预测分词的实现
2021/06/18 Python
i5-10400f处理相当于i7多少水平
2022/04/19 数码科技