JavaScript实现网页计算器功能


Posted in Javascript onOctober 29, 2020

本文实例为大家分享了JavaScript实现网页计算器的具体代码,供大家参考,具体内容如下

要求:在网页上实现简单的计算器功能和界面

CSS样式代码:

<style>
 * {
 margin: 0;
 padding: 0;
 }
 #panel {
 width: 202px;
 height: 252px;
 margin: 30px auto;
 border: 3px solid #ccc;
 }
 #screen {
 width: 134px;
 height: 40px;
 margin: 5px;
 display: inline-block;
 border: 1px solid #ddd;
 line-height: 40px;
 padding-left: 3px;
 padding-right: 3px;
 text-align: right;
 }
 input[type="button"] {
 width: 40px;
 height: 40px;
 border: 1px solid #ddd;
 margin: 5px;
 font-family: "微软雅黑";
 font-size: 18px;
 font-weight: bold;
 }
 #panel div, p, input {
 float: left;
 }
</style>

JavaScript代码:

<script>
 window.onload = function(){
  //获取计算器面板
  var panel = document.getElementById("panel");
  //为计算面板动态添加单击事件
  panel.onclick = function(e) {
   //参数e用来接收event对象
   //获取所有input元素
   var inputs = e.toElement;
   //获取P元素
   var screen = document.getElementById("screen");
   if(inputs.type == "button") {
    //如果获取到的是input元素,则开始执行运算逻辑
    if (inputs.value == "C") {
     screen.innerHTML = "";
    } else if (inputs.value == "=") {
     try {
      screen.innerHTML = eval(screen.innerHTML);
     } catch (ex) {
      screen.innerHTML = "Error";
     }
    } else {
     screen.innerHTML += inputs.value;
    }
   } else {
    //如果单击的地方不是input元素,则程序不回应
    return;
   }
  }
 }
</script>

HTML代码:

<body>
 <div id="panel">
  <div>
   <p id="screen"></p>
   <input type="button" value="C" />
  </div>
  <div>
   <input type="button" value="7" />
   <input type="button" value="8" />
   <input type="button" value="9" />
   <input type="button" value="/" />
   <input type="button" value="4" />
   <input type="button" value="5" />
   <input type="button" value="6" />
   <input type="button" value="*" />
   <input type="button" value="1" />
   <input type="button" value="2" />
   <input type="button" value="3" />
   <input type="button" value="+" />
   <input type="button" value="." />
   <input type="button" value="0" />
   <input type="button" value="-" />
   <input type="button" value="=" />
  </div>
 </div>
</body>

效果图:

JavaScript实现网页计算器功能

更多计算器功能实现,请点击专题: 计算器功能汇总 进行学习

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
如何在标题栏显示框架内页面的标题
Feb 03 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 Javascript
jquery异步调用页面后台方法&amp;#8207;(asp.net)
Mar 01 Javascript
jQuery 写的简单打字游戏可以提示正确和错误的次数
Jul 01 Javascript
JS实现获取当前URL和来源URL的方法
Aug 24 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
Jan 23 Javascript
详解webpack es6 to es5支持配置
May 04 Javascript
vue组件之间的数据传递方法详解
Apr 19 Javascript
js实现web调用摄像头 js截取视频画面
Apr 21 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
vue监听滚动事件的方法
Dec 21 Vue.js
vue+elementui 实现新增和修改共用一个弹框的完整代码
Jun 08 Vue.js
Javascript数组及类数组相关原理详解
Oct 29 #Javascript
antd Form组件方法getFieldsValue获取自定义组件的值操作
Oct 29 #Javascript
node.js如何操作MySQL数据库
Oct 29 #Javascript
TypeScript魔法堂之枚举的超实用手册
Oct 29 #Javascript
解决antd的Form组件setFieldsValue的警告问题
Oct 29 #Javascript
vue 函数调用加括号与不加括号的区别
Oct 29 #Javascript
JavaScript实现随机点名小程序
Oct 29 #Javascript
You might like
php 分页函数multi() discuz
2009/06/21 PHP
PHP 获取目录下的图片并随机显示的代码
2009/12/28 PHP
php数据库连接时容易出错的特殊符号问题
2010/09/01 PHP
php中自定义函数dump查看数组信息类似var_dump
2014/01/27 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
WordPress中用于检索模版的相关PHP函数使用解析
2015/12/15 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
详解PHP防止直接访问.php 文件的实现方法
2017/07/28 PHP
yii2.0整合阿里云oss删除单个文件的方法
2017/09/19 PHP
javascript 写类方式之九
2009/07/05 Javascript
javascript showModalDialog 多层模态窗口实现页面提交及刷新的代码
2009/11/28 Javascript
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
Asp.net下利用Jquery Ajax实现用户注册检测(验证用户名是否存)
2010/09/12 Javascript
JavaScript类型转换方法及需要注意的问题小结(挺全面)
2010/11/11 Javascript
三级下拉菜单的js实现代码
2011/05/23 Javascript
jquery实现用户打分评分特效
2015/05/28 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
javascript代码优化的8点总结
2018/01/29 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
layui 中select下拉change事件失效的解决方法
2019/09/20 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
Python中逗号的三种作用实例分析
2015/06/08 Python
Python六大开源框架对比
2015/10/19 Python
python字符串替换第一个字符串的方法
2019/06/26 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
windows下python 3.9 Numpy scipy和matlabplot的安装教程详解
2020/11/28 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
体育比赛口号
2014/06/09 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
交通运输局四风问题对照检查材料思想汇报
2014/10/09 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
2019学校请假条格式及范文
2019/06/25 职场文书
聊聊Python String型列表求最值的问题
2022/01/18 Python