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 相关文章推荐
jQuery动态添加的元素绑定事件处理函数代码
Aug 02 Javascript
js验证是否为数字的总结
Apr 14 Javascript
javascript常用函数归纳整理
Oct 31 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
JavaScript常用基础知识强化学习
Dec 09 Javascript
你不知道的高性能JAVASCRIPT
Jan 18 Javascript
基于angularJS的表单验证指令介绍
Oct 21 Javascript
微信小程序开发之IOS和Android兼容的问题
Sep 26 Javascript
express.js中间件说明详解
Mar 19 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
详解关于Vue单元测试的几个坑
Apr 26 Javascript
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
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
php删除数组元素示例分享
2014/02/17 PHP
汇总PHPmailer群发Gmail的常见问题
2016/02/24 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
php文件后缀不强制为.php的实操方法
2019/09/18 PHP
让iframe框架网页在任何浏览器下自动伸缩
2006/08/18 Javascript
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
简短几句 通俗解释javascript的闭包
2011/01/17 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
html中鼠标滚轮事件onmousewheel的处理方法
2016/11/11 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
给Easyui-Datebox设置隐藏或者不可用的解决方法
2017/05/26 Javascript
利用JS对iframe父子(内外)页面进行操作的方法教程
2017/06/15 Javascript
Node.js  REPL (交互式解释器)实例详解
2017/08/06 Javascript
使用Node.js实现ORM的一种思路详解(图文)
2017/10/24 Javascript
vue实现前进刷新后退不刷新效果
2018/01/26 Javascript
vue实现axios图片上传功能
2019/08/20 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
vue实现修改图片后实时更新
2019/11/14 Javascript
[03:20]2015国际邀请赛全明星表演赛
2015/08/08 DOTA
详解PyTorch批训练及优化器比较
2018/04/28 Python
PyTorch上搭建简单神经网络实现回归和分类的示例
2018/04/28 Python
python实现测试工具(一)——命令行发送get请求
2020/10/19 Python
matplotlib 画动态图以及plt.ion()和plt.ioff()的使用详解
2021/01/05 Python
利用纯CSS3实现文字向右循环闪过效果实例(可用于移动端)
2017/06/15 HTML / CSS
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
浅谈html5与APP混合开发遇到的问题总结
2018/03/20 HTML / CSS
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
2014年学校党建工作总结
2014/11/11 职场文书
2014年党支部书记工作总结
2014/12/04 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
原生Javascript+HTML5一步步实现拖拽排序
2021/06/12 Javascript
使用RedisTemplat实现简单的分布式锁
2021/11/20 Redis
css filter和getUserMedia的联合使用
2022/02/24 HTML / CSS