利用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引导程序
Oct 26 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
学习JavaScript设计模式之策略模式
Jan 12 Javascript
AngularJS表单和输入验证实例
Nov 02 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
Dec 25 Javascript
angularjs之$timeout指令详解
Jun 13 Javascript
js制作简单的音乐播放器的示例代码
Aug 28 Javascript
Vue利用History记录上一页面的数据方法实例
Nov 02 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
详解JavaScript中精度失准问题及解决方法
Feb 04 Javascript
JavaScript实现通讯录功能
Dec 27 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 在线翻译函数代码
2009/05/07 PHP
php中操作memcached缓存进行增删改查数据的实现代码
2014/08/15 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
PHP微信开发之微信录音临时转永久存储
2018/01/26 PHP
javaScript 读取和设置文档元素的样式属性
2009/04/14 Javascript
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
一个简单的JS时间控件示例代码(JS时分秒时间控件)
2013/11/22 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
Nodejs学习笔记之测试驱动
2015/04/16 NodeJs
jquery实现全选、反选、获得所有选中的checkbox
2020/09/13 Javascript
JavaScript程序中的流程控制语句用法总结
2016/05/23 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
vue双向绑定的简单实现
2016/12/22 Javascript
开源免费天气预报接口API及全国所有地区代码(国家气象局提供)
2016/12/26 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
原生JS+Canvas实现五子棋游戏
2020/05/28 Javascript
今天,小程序正式支持 SVG
2019/04/20 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
[03:39]2015国际邀请赛主赛事首日精彩回顾
2015/08/05 DOTA
[02:37]2018DOTA2亚洲邀请赛赛前采访 VP.no[o]ne心中最强SOLO是谁
2018/04/04 DOTA
Python导入模块时遇到的错误分析
2017/08/30 Python
Python中的random.uniform()函数教程与实例解析
2019/03/02 Python
python爬虫 Pyppeteer使用方法解析
2019/09/28 Python
Python matplotlib以日期为x轴作图代码实例
2019/11/22 Python
python爬虫用mongodb的理由
2020/07/28 Python
python使用建议技巧分享(三)
2020/08/18 Python
python实现经典排序算法的示例代码
2021/02/07 Python
Ivory Isle Designs美国/加拿大:婚礼和活动文具公司
2018/08/21 全球购物
四年大学生活的自我评价范文
2014/02/07 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
介绍信样本
2015/01/31 职场文书
单位病假条范文
2015/08/17 职场文书
机械生产实习心得体会
2016/01/22 职场文书
读《方与圆》有感:交友方圆有度
2020/01/14 职场文书
详解运行Python的神器Jupyter Notebook
2021/06/03 Python
Redis配置外网可访问(redis远程连接不上)的方法
2022/12/24 Redis