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 相关文章推荐
学习YUI.Ext第七日-View&amp;JSONView Part Two-一个画室网站的案例
Mar 10 Javascript
JavaScript监测ActiveX控件是否已经安装过的代码
Sep 02 Javascript
根据IP的地址,区分不同的地区,查看不同的网站页面的js代码
Feb 26 Javascript
获取下拉列表框的值是数组,split,$.inArray示例
Nov 13 Javascript
javascript定义变量时有var和没有var的区别探讨
Jul 21 Javascript
实例讲解jQuery EasyUI tree中state属性慎用
Apr 01 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
解决vue打包项目后刷新404的问题
Mar 06 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
vue单元格多列合并的实现
Nov 26 Vue.js
基于javascript实现移动端轮播图效果
Dec 21 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
php_xmlhttp 乱码问题解决方法
2009/08/07 PHP
php 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
Javascript this关键字使用分析
2008/10/21 Javascript
dwr spring的集成实现代码
2009/03/22 Javascript
简单的js表单验证函数
2013/10/28 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
JavaScript类型系统之Object详解
2016/01/07 Javascript
基于vue2的canvas时钟倒计时组件步骤解析
2018/11/05 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
JavaScript实现简易计算器小功能
2020/10/22 Javascript
Python使用cookielib模块操作cookie的实例教程
2016/07/12 Python
python jieba分词并统计词频后输出结果到Excel和txt文档方法
2018/02/11 Python
python opencv之SIFT算法示例
2018/02/24 Python
python文件转为exe文件的方法及用法详解
2019/07/08 Python
python字典嵌套字典的情况下找到某个key的value详解
2019/07/10 Python
python list数据等间隔抽取并新建list存储的例子
2019/11/27 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
CSS3之多背景background使用示例
2013/10/18 HTML / CSS
用CSS3实现无限循环的无缝滚动的示例代码
2017/11/01 HTML / CSS
马来西亚在线药房:RoyalePharma
2019/12/01 全球购物
为什么要用EJB
2014/04/17 面试题
本科生学习总结的自我评价
2013/10/02 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
男人帮观后感
2015/06/18 职场文书
致短跑运动员加油稿
2015/07/21 职场文书
机关单位2016年创先争优活动总结
2016/04/05 职场文书
500字作文之难忘的同学
2019/12/20 职场文书
python Polars库的使用简介
2021/04/21 Python
python opencv检测直线 cv2.HoughLinesP的实现
2021/06/18 Python
pandas数值排序的实现实例
2021/07/25 Python
深入理解Pytorch微调torchvision模型
2021/11/11 Python
Java8利用Stream对列表进行去除重复的方法详解
2022/04/14 Java/Android