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 相关文章推荐
JQuery选择器特辑 详细小结
May 14 Javascript
jQuery检测鼠标左键和右键点击的方法
Mar 17 Javascript
浅谈jquery中delegate()与live()
Jun 22 Javascript
JavaScript中的this到底是什么(一)
Dec 09 Javascript
AngularJS中监视Scope变量以及外部调用Scope方法
Jan 23 Javascript
jQuery 中ajax异步调用的四种方式
Jun 28 Javascript
使用OPENLAYERS3实现点选的方法
Sep 24 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
Nov 02 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
VUE+elementui面包屑实现动态路由详解
Nov 04 Javascript
Windows上node.js的多版本管理工具用法实例分析
Nov 06 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
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 文件夹删除、php清除缓存程序
2009/08/25 PHP
解析PHP处理换行符的问题 \r\n
2013/06/13 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
php自定文件保存session的方法
2014/12/10 PHP
使用PHP生成PDF方法详解
2015/01/23 PHP
php压缩和解压缩字符串的方法
2015/03/14 PHP
showModelessDialog()使用详解
2006/09/21 Javascript
jQuery实战之品牌展示列表效果
2011/04/10 Javascript
jquery的相对父元素和相对文档定位示例代码
2013/08/02 Javascript
js动态添加表格数据使用insertRow和insertCell实现
2014/05/22 Javascript
jquery.validate.js插件使用经验记录
2014/07/02 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
js实现三张图(文)片一起切换的banner焦点图
2015/08/25 Javascript
jQuery获取checkboxlist的value值的方法
2015/09/27 Javascript
AngularJs实现聊天列表实时刷新功能
2017/06/15 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
基于BootStrap的文本编辑器组件Summernote
2017/10/27 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
vue-cli在 history模式下的配置详解
2019/11/26 Javascript
OpenLayers3实现图层控件功能
2020/09/25 Javascript
[01:07:21]NAVI vs VG Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
python anaconda 安装 环境变量 升级 以及特殊库安装的方法
2017/06/21 Python
Python如何实现转换URL详解
2019/07/02 Python
Tensorflow读取并输出已保存模型的权重数值方式
2020/01/04 Python
Python参数传递机制传值和传引用原理详解
2020/05/22 Python
英国领先的珍珠首饰品牌:Orchira
2016/09/11 全球购物
法国娇韵诗官方旗舰店:Clarins是来自法国的天然护肤品牌
2018/06/30 全球购物
岗位职责范本
2013/11/23 职场文书
八一建军节感言
2014/02/28 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
离婚协议书怎么写2014
2014/09/30 职场文书
民政局副局长民主生活会个人整改措施
2014/10/04 职场文书
高中数学教学反思范文
2016/02/18 职场文书