JS实现基本的网页计算器功能示例


Posted in Javascript onJanuary 16, 2020

本文实例讲述了JS实现基本的网页计算器功能。分享给大家供大家参考,具体如下:

<html>
    <head>
        <title>网页计算机</title>
        <meta charset="UTF-8"/>
        <style type="text/css">
            #jsjdiv{
                border: solid 1px black;
                border-radius: 5px;
                width: 200px;
                /*height: 400px;*/
                text-align: center; /*设置div内部居中*/
                margin: auto;    /*设置计算机居中*/
                background-color: darkgrey;
            }
            input[type=text]{
                width: 190px;          /*设置大小*/
                height: 35px;
                margin-top: 10px;   /*设置边框*/
                margin-bottom: 5px;
            }
            input[type=button]{
                width: 44px;
                height: 44px;
                /*margin-left: 5px;
                margin-right: 5px;*/
                margin-top: 5px;
                margin-bottom: 10px;
                font-size: 25px;  /*设置text的字体大小及深度*/
                font-weight: 600;
            }
        </style>
        <script type="text/javascript">
            function cal(btn){
                var num=btn.value;
                switch (num){   // 利用eval可以把string的内容转化成代码,在代码中输入可以直接进行计算
                    case "=":
                        document.getElementById("inp").value=eval(document.getElementById("inp").value);
                        break;
                    case "c":
                        document.getElementById("inp").value="";
                        break;
                    default:        //进行输入数据的拼接
                        document.getElementById("inp").value=document.getElementById("inp").value + num;
                        break;
                }
            }
        </script>
    </head>
    <body>
        <div id="jsjdiv">
            <input type="text" name="" id="inp" value="" /><br />
            <input type="button" name="" id="btn" value="1" onclick="cal(this)"/>
            <input type="button" name="" id="" value="2" onclick="cal(this)"/>
            <input type="button" name="" id="" value="3" onclick="cal(this)"/>
            <input type="button" name="" id="" value="4" onclick="cal(this)"/><br />
            <input type="button" name="" id="" value="5" onclick="cal(this)"/>
            <input type="button" name="" id="" value="6" onclick="cal(this)"/>
            <input type="button" name="" id="" value="7" onclick="cal(this)"/>
            <input type="button" name="" id="" value="8" onclick="cal(this)"/><br />
            <input type="button" name="" id="" value="9" onclick="cal(this)"/>
            <input type="button" name="" id="" value="+" onclick="cal(this)"/>
            <input type="button" name="" id="" value="-" onclick="cal(this)"/>
            <input type="button" name="" id="" value="*" onclick="cal(this)"/><br />
            <input type="button" name="" id="" value="0" onclick="cal(this)"/>
            <input type="button" name="" id="" value="/" onclick="cal(this)"/>
            <input type="button" name="" id="" value="c" onclick="cal(this)"/>
            <input type="button" name="" id="" value="=" onclick="cal(this)" />
        </div>
    </body>
</html>

运行效果:

JS实现基本的网页计算器功能示例

网页计算机:

利用css进行div的布局设置基本的计算机的基本的框架,

在其内部设置text进行显示,利用button添加按钮。

一个主要的点:我们要在按按钮的时候,把数据输出到text文本上。我们利用了function添加一个函数,在进行按按钮时,利用onclick,连接到函数,在函数中实现文本的显示。但是我们在函数中只能对某个id进行调用,这样就表示有多少按钮就要有多少函数,而且内容相同。所以我们引用了this(当前对象)进行调用。

另一方面,我们要实现计算,我们利用eval()把其中的内容转化为代码,就相当于代码执行。所以可以直接进行运算输出。

当我们输入“=”和“c"就要进行计算操作,相应的我们利用了switch进行区分。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript前端代码调试运行工具:http://tools.3water.com/code/WebCodeRun测试上述代码运行效果。

Javascript 相关文章推荐
JavaScript 事件记录使用说明
Oct 20 Javascript
JS 控制非法字符的输入代码
Dec 04 Javascript
JQuery Ajax 跨域访问的解决方案
Mar 12 Javascript
通过jquery还原含有rowspan、colspan的table的实现方法
Feb 10 Javascript
JavaScript中九种常用排序算法
Sep 02 Javascript
理解javascript中的MVC模式
Jan 28 Javascript
关于JavaScript中事件绑定的方法总结
Oct 26 Javascript
vue的token刷新处理的方法
Jul 17 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
vue中的双向数据绑定原理与常见操作技巧详解
Mar 16 Javascript
Vue Object.defineProperty及ProxyVue实现双向数据绑定
Sep 02 Javascript
vue选项卡切换的实现案例
Apr 11 Vue.js
JS数组进阶示例【数组的几种函数用法】
Jan 16 #Javascript
js实现简单的秒表
Jan 16 #Javascript
JS 数组基本用法入门示例解析
Jan 16 #Javascript
js实现上下左右键盘控制div移动
Jan 16 #Javascript
vue-cli3 取消eslint校验代码的解决办法
Jan 16 #Javascript
jQuery实现数字华容道小游戏(实例代码)
Jan 16 #jQuery
js实现点击生成随机div
Jan 16 #Javascript
You might like
WinXP + Apache +PHP5 + MySQL + phpMyAdmin安装全功略
2006/07/09 PHP
php检测数组长度函数sizeof与count用法
2014/11/17 PHP
php 基础函数
2017/02/10 PHP
php大小写转换函数(strtolower、strtoupper)用法介绍
2017/11/17 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
Javascript实现CheckBox的全选与取消全选的代码
2010/07/20 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
JS+CSS实现弹出全屏灰黑色透明遮罩效果的方法
2014/12/20 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
2015/01/23 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
jQuery UI库中dialog对话框功能使用全解析
2016/04/23 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
基于vuejs实现一个todolist项目
2017/04/11 Javascript
ES6使用Set数据结构实现数组的交集、并集、差集功能示例
2017/10/31 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
JavaScript实现与使用发布/订阅模式详解
2019/01/19 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
layui 表单标签的校验方法
2019/09/04 Javascript
node.js通过url读取文件
2020/10/16 Javascript
python网络编程学习笔记(七):HTML和XHTML解析(HTMLParser、BeautifulSoup)
2014/06/09 Python
Python下singleton模式的实现方法
2014/07/16 Python
python使用Queue在多个子进程间交换数据的方法
2015/04/18 Python
Python求导数的方法
2015/05/09 Python
Python在不同目录下导入模块的实现方法
2017/10/27 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Python wxpython模块响应鼠标拖动事件操作示例
2018/08/23 Python
Python实现打砖块小游戏代码实例
2019/05/18 Python
python常用排序算法的实现代码
2019/11/08 Python
opencv3/python 鼠标响应操作详解
2019/12/11 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Pycharm 如何一键加引号的方法步骤
2021/02/05 Python
酒店中秋节活动方案
2014/01/31 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
管理标语大全
2014/06/24 职场文书
MySQL 使用SQL语句修改表名的实现
2021/04/07 MySQL