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小技巧之生成html元素
May 15 Javascript
node.js应用后台守护进程管理器Forever安装和使用实例
Jun 01 Javascript
如何让浏览器支持jquery ajax load 前进、后退功能
Jun 12 Javascript
Node.js中的process.nextTick使用实例
Jun 25 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
js运动应用实例解析
Dec 28 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
JS仿JQuery选择器功能
Mar 08 Javascript
使用JavaScript实现alert的实例代码
Jul 06 Javascript
基于vue2.0实现简单轮播图
Nov 27 Javascript
SSM+layUI 根据登录信息显示不同的页面方法
Sep 20 Javascript
node实现mock-plugin中间件的方法
Dec 25 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 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
ThinkPHP3.1查询语言详解
2014/06/19 PHP
PHP使用Redis长连接的方法详解
2018/02/12 PHP
TP5(thinkPHP5框架)基于bootstrap实现的单图上传插件用法示例
2019/05/29 PHP
jquery分页对象使用示例
2014/04/01 Javascript
jQuery实现Twitter的自动文字补齐特效
2014/11/28 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
JS实现动态增加和删除li标签行的实例代码
2016/10/16 Javascript
基于JavaScript实现前端文件的断点续传
2016/10/17 Javascript
JQuery Ajax WebService传递参数的简单实例
2016/11/02 Javascript
JS双击变input框批量修改内容
2016/12/12 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
JS数组返回去重后数据的方法解析
2017/01/03 Javascript
深入浅析Vue.js计算属性和侦听器
2018/05/05 Javascript
深入理解Vue Computed计算属性原理
2018/05/29 Javascript
Vue-router 切换组件页面时进入进出动画方法
2018/09/01 Javascript
vue项目动态设置页面title及是否缓存页面的问题
2018/11/08 Javascript
微信小程序实现弹出菜单动画
2019/06/21 Javascript
layui之数据表格--与后台交互获取数据的方法
2019/09/29 Javascript
浅析vue中的nextTick
2020/12/28 Vue.js
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
详解python中递归函数
2019/04/16 Python
python实现倒计时小工具
2019/07/29 Python
Python中 Global和Nonlocal的用法详解
2020/01/20 Python
多重CSS背景动画实现方法示例
2014/04/04 HTML / CSS
ghd法国官方网站:英国最受欢迎的美发工具品牌
2019/04/18 全球购物
个人简历的自荐信
2013/10/23 职场文书
统计系教授推荐信
2014/02/28 职场文书
项目负责人岗位职责
2015/02/15 职场文书
辞职书格式样本
2015/02/26 职场文书
基于python制作简易版学生信息管理系统
2021/04/20 Python
python文件名批量重命名脚本实例代码
2021/04/22 Python