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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
textarea中的手动换行处理的jquery代码
Feb 26 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
在jQuery中处理XML数据的大致方法
Aug 14 Javascript
基于javascript实现随机颜色变化效果
Jan 14 Javascript
JQuery 的跨域方法推荐_可跨任何网站
May 18 Javascript
BootStrap 图标icon符号图标glyphicons不正常显示的快速解决办法
Dec 08 Javascript
原生javascript实现图片放大镜效果
Jan 18 Javascript
完美解决浏览器跨域的几种方法(汇总)
May 08 Javascript
js实现随机点名小功能
Aug 17 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
Oct 27 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 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中使用Oracle数据库(3)
2006/10/09 PHP
如何用C语言编写PHP扩展的详解
2013/06/13 PHP
php实现比较两个字符串日期大小的方法
2015/05/12 PHP
PHP网站自动化配置的实现方法(必看)
2017/05/27 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
jquery中each遍历对象和数组示例
2014/08/05 Javascript
javascript中createElement的两种创建方式
2015/05/14 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
2015/10/08 Javascript
js数组常见操作及数组与字符串相互转化实例详解
2015/11/10 Javascript
jQuery.parseHTML() 函数详解
2017/01/09 Javascript
js自定义QQ菜单效果
2017/01/10 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
js鼠标跟随运动效果
2017/03/11 Javascript
Vue实现active点击切换方法
2018/03/16 Javascript
jQuery实现仿京东防抖动菜单效果示例
2018/07/06 jQuery
微信小程序生成二维码的示例代码
2019/03/29 Javascript
uploadify插件实现多个图片上传并预览
2019/09/30 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
vue使用过滤器格式化日期
2021/01/20 Vue.js
Python使用metaclass实现Singleton模式的方法
2015/05/05 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
深入了解Python枚举类型的相关知识
2019/07/09 Python
布局和排版教程 纯css3实现图片三角形排列
2014/10/17 HTML / CSS
捷克电器和DJ设备网上商店:Electronic-star
2017/07/18 全球购物
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
写给老师的表扬信
2014/01/21 职场文书
艺术学院毕业生自我评价
2014/03/02 职场文书
交通安全寄语大全
2014/04/08 职场文书
工商管理专业自荐信
2014/06/03 职场文书
北京英文导游词
2015/02/12 职场文书
Nginx进程管理和重载原理详解
2021/04/22 Servers
Win11如何启用启动修复 ? Win11执行启动修复的三种方法
2022/04/08 数码科技
JDK8中String的intern()方法实例详细解读
2022/09/23 Java/Android