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 相关文章推荐
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
May 16 Javascript
通过正则格式化url查询字符串实现代码
Dec 28 Javascript
理解javascript回调函数
Dec 28 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
原生js编写焦点图效果
Dec 08 Javascript
js+html5实现页面可刷新的倒计时效果
Jul 15 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
Sep 04 Javascript
解决JQuery全选/反选第二次失效的问题
Oct 11 jQuery
jQuery实现的响应鼠标移动方向插件用法示例【附源码下载】
Aug 28 jQuery
分享5个好用的javascript文件上传插件
Sep 16 Javascript
微信小程序 wx:for遍历循环使用实例解析
Sep 09 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中删除、清空session的方式总结
2015/10/09 PHP
一波PHP中cURL库的常见用法代码示例
2016/05/06 PHP
PHP发送邮件确认验证注册功能示例【修改别人邮件类】
2019/11/09 PHP
弹出广告特效(一个IP只弹出一次)的代码
2007/07/27 Javascript
javascript 学习之旅 (2)
2009/02/05 Javascript
写js时遇到的一些小问题
2010/12/06 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
jQuery在线选座位插件seat-charts特效代码分享
2015/08/27 Javascript
jQuery实用技巧必备(中)
2015/11/03 Javascript
利用Vue.js指令实现全选功能
2016/09/08 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
npm 下载指定版本的组件方法
2018/05/17 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
vue store之状态管理模式的详细介绍
2019/06/13 Javascript
vue实现文件上传读取及下载功能
2020/11/17 Javascript
ES2020 已定稿,真实场景案例分析
2020/05/25 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
微信小程序中target和currentTarget的区别小结
2020/11/06 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
2021/02/05 Javascript
Python splitlines使用技巧
2008/09/06 Python
python利用hook技术破解https的实例代码
2013/03/25 Python
浅谈插入排序算法在Python程序中的实现及简单改进
2016/05/04 Python
Python设置默认编码为utf8的方法
2016/07/01 Python
Python中执行存储过程及获取存储过程返回值的方法
2017/10/07 Python
python读文件保存到字典,修改字典并写入新文件的实例
2018/04/23 Python
Empty test suite.(PyCharm程序运行错误的解决方法)
2018/11/30 Python
对Xpath 获取子标签下所有文本的方法详解
2019/01/02 Python
python实现文件的备份流程详解
2019/06/18 Python
在pycharm中为项目导入anacodna环境的操作方法
2020/02/12 Python
Python HTMLTestRunner如何下载生成报告
2020/09/04 Python
python实现文件分片上传的接口自动化
2020/11/19 Python
Glamest意大利:女性在线奢侈品零售店
2019/04/28 全球购物
eBay荷兰购物网站:eBay.nl
2020/06/26 全球购物
总经理助理工作职责
2014/02/06 职场文书
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android