利用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 相关文章推荐
JQuery 学习笔记 element属性控制
Jul 23 Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
javascript 放大镜 v1.0 基于Yui2 实现的放大镜效果
Mar 08 Javascript
将form表单中的元素转换成对象的方法适用表单提交
May 02 Javascript
jQuery中click事件用法实例
Dec 26 Javascript
require简单实现单页应用程序(SPA)
Jul 12 Javascript
Node.js的文件权限及读写flag详解
Oct 11 Javascript
修改vue+webpack run build的路径方法
Sep 01 Javascript
vue解决弹出蒙层滑动穿透问题的方法
Sep 22 Javascript
react的滑动图片验证码组件的示例代码
Feb 27 Javascript
配置eslint规范项目代码风格
Mar 11 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
数据库相关问题
2006/10/09 PHP
BBS(php &amp; mysql)完整版(五)
2006/10/09 PHP
回答PHPCHINA上的几个问题:URL映射
2007/02/14 PHP
php Mysql日期和时间函数集合
2007/11/16 PHP
PHP中使用localhost连接Mysql不成功的解决方法
2014/08/20 PHP
php7安装mongoDB扩展的方法分析
2017/08/02 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
详解在YII2框架中使用UEditor编辑器发布文章
2018/11/02 PHP
列表内容的选择
2006/06/30 Javascript
javascript图像处理—仿射变换深度理解
2013/01/16 Javascript
js解析与序列化json数据(三)json的解析探讨
2013/02/01 Javascript
简易js代码实现计算器操作
2013/04/15 Javascript
jquery实现的鼠标拖动排序Li或Table
2014/05/04 Javascript
JS倒计时代码汇总
2014/11/25 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
javascript中innerText和innerHTML属性用法实例分析
2015/05/13 Javascript
JavaScript实现相册弹窗功能(zepto.js)
2016/06/21 Javascript
浅谈js中的引用和复制(传值和传址)
2016/09/18 Javascript
Node.js 多进程处理CPU密集任务的实现
2019/05/26 Javascript
[03:00]DOTA2-DPC中国联赛1月18日Recap集锦
2021/03/11 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
python 平衡二叉树实现代码示例
2018/07/07 Python
python实现简单登陆系统
2018/10/18 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
解决Keras 中加入lambda层无法正常载入模型问题
2020/06/16 Python
css3 media 响应式布局的简单实例
2016/08/03 HTML / CSS
俄罗斯最大的灯具网站:Fandeco
2020/03/14 全球购物
心理健康课教学反思
2014/02/13 职场文书
英语教师岗位职责
2014/03/16 职场文书
《观舞记》教学反思
2014/04/16 职场文书
文秘专业应届生求职信
2014/05/26 职场文书
抵押贷款承诺书
2014/05/30 职场文书
大学生党员批评与自我批评范文
2014/10/14 职场文书
食堂采购员岗位职责
2015/04/03 职场文书
创业计划书之网络外卖
2019/10/31 职场文书