利用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 相关文章推荐
一个对于Array的简单扩展
Oct 03 Javascript
javascript 检测浏览器类型和版本的代码
Sep 15 Javascript
改善你的jQuery的25个步骤 千倍级效率提升
Feb 11 Javascript
JS 如果改变span标签的是否隐藏属性
Oct 06 Javascript
JQuery中SetTimeOut传参问题探讨
May 10 Javascript
jquery模拟多级复选框效果的简单实例
Jun 08 Javascript
Angular工具方法学习
Dec 26 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
webpack写jquery插件的环境配置
Dec 21 jQuery
vue的传参方式汇总和router使用技巧
May 22 Javascript
vue.js绑定事件监听器示例【基于v-on事件绑定】
Jul 07 Javascript
使用Vue 实现滑动验证码功能
Jun 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实现的蚂蚁爬杆路径算法代码
2015/12/03 PHP
php检查函数必传参数是否存在的实例详解
2017/08/28 PHP
httpclient模拟登陆具体实现(使用js设置cookie)
2013/12/11 Javascript
js换图片效果可进行定时操作
2014/06/09 Javascript
简介JavaScript中的italics()方法的使用
2015/06/08 Javascript
微信小程序 特效菜单抽屉效果实例代码
2017/01/11 Javascript
前端图片懒加载(lazyload)的实现方法(提高用户体验)
2017/08/21 Javascript
jQuery ajax读取本地json文件的实例
2017/10/31 jQuery
js比较两个单独的数组或对象是否相等的实例代码
2019/04/28 Javascript
详解vue项目中实现图片裁剪功能
2019/06/07 Javascript
微信小程序自定义头部导航栏(组件化)
2019/11/15 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
微信小程序绘制半圆(弧形)进度条
2020/11/18 Javascript
Python过滤函数filter()使用自定义函数过滤序列实例
2014/08/26 Python
Python httplib模块使用实例
2015/04/11 Python
Python数据可视化实现正态分布(高斯分布)
2019/08/21 Python
基于Python+Appium实现京东双十一自动领金币功能
2019/10/31 Python
Python3直接爬取图片URL并保存示例
2019/12/18 Python
关于jupyter打开之后不能直接跳转到浏览器的解决方式
2020/04/13 Python
关于Kotlin中SAM转换的那些事
2020/09/15 Python
基于Python-turtle库绘制路飞的草帽骷髅旗、美国队长的盾牌、高达的源码
2021/02/18 Python
实例讲解HTML5的meta标签的一些应用
2015/12/08 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
当当网官方旗舰店:中国图书销售夺金品牌
2018/04/02 全球购物
澳大利亚最受欢迎的女士度假服装:Kabana Shop
2020/10/10 全球购物
一封普通求职者的求职信
2013/11/20 职场文书
财务分析个人的自荐书范文
2013/11/24 职场文书
春节活动策划方案
2014/01/24 职场文书
离婚协议书该怎么写
2014/10/04 职场文书
外贸业务员岗位职责
2015/02/13 职场文书
二十年同学聚会致辞
2015/07/28 职场文书
《鸟的天堂》教学反思
2016/02/19 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
Java 关于String字符串原理上的问题
2022/04/07 Java/Android
Python实现简单得递归下降Parser
2022/05/02 Python
NoSQL优缺点与MongoDB数据库简介
2022/06/05 MongoDB