利用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 相关文章推荐
javascript实现二分查找法实现代码
Nov 12 Javascript
JavaScript获取当前网页最后修改时间的方法
Apr 03 Javascript
js简单倒计时实现代码
Apr 30 Javascript
JavaScript兼容性总结之获取非行间样式案例
Aug 07 Javascript
JavaScript DOM节点操作方法总结
Aug 23 Javascript
手机端 HTML5使用photoswipe.js仿微信朋友圈图片放大效果
Aug 25 Javascript
基于Require.js使用方法(总结)
Oct 26 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
Nov 22 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
js Math数学简单使用操作示例
Mar 13 Javascript
vue实现用户长时间不操作自动退出登录功能的实现代码
Jul 23 Javascript
基于vue实现简易打地鼠游戏
Aug 21 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导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP排序算法之冒泡排序(Bubble Sort)实现方法详解
2018/04/20 PHP
用PHP的反射实现委托模式的讲解
2019/03/22 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
document.onreadystatechange事件的用法分析
2009/10/17 Javascript
javascript 关于# 和 void的区别分析
2009/10/26 Javascript
原生JS实现表单checkbook获取已选择的值
2013/07/21 Javascript
javascript中call和apply方法浅谈
2013/09/27 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
ANGULARJS中用NG-BIND指令实现单向绑定的例子
2014/12/08 Javascript
NodeJS学习笔记之MongoDB模块
2015/01/13 NodeJs
JavaScript数据类型详解
2015/04/01 Javascript
jQuery关键词说明插件cluetip使用指南
2015/04/21 Javascript
JavaScript基本数据类型及值类型和引用类型
2015/08/25 Javascript
javascript DOM的详解及实例代码
2017/03/06 Javascript
angularjs之$timeout指令详解
2017/06/13 Javascript
js推箱子小游戏步骤代码解析
2018/01/10 Javascript
基于vue实现网站前台的权限管理(前后端分离实践)
2018/01/13 Javascript
iview table render集成switch开关的实例
2018/03/14 Javascript
使用Angular自定义字段校验指令的方法示例
2019/02/01 Javascript
详解javascript脚本何时会被执行
2021/02/05 Javascript
[01:00:35]2018DOTA2亚洲邀请赛3月30日B组 EffcetVSMineski
2018/03/31 DOTA
[01:02:45]完美世界DOTA2联赛 LBZS vs Forest 第三场 11.07
2020/11/09 DOTA
Python3遍历目录树实现方法
2015/05/22 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
Python备份目录及目录下的全部内容的实现方法
2016/06/12 Python
Python基于identicon库创建类似Github上用的头像功能
2017/09/25 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
python selenium自动化测试框架搭建的方法步骤
2020/06/14 Python
HTML5的语法变化介绍
2013/08/13 HTML / CSS
士力架广告词
2014/03/20 职场文书
小学六年级学生评语
2014/04/22 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
雷锋观后感
2015/06/10 职场文书