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 分栏效果实现代码
Aug 29 Javascript
prettify 代码高亮着色器google出品
Dec 28 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
生成二维码方法汇总
Dec 26 Javascript
js实现点击获取验证码倒计时效果
Jan 28 Javascript
分分钟玩转Vue.js组件
Oct 25 Javascript
js数字舍入误差以及解决方法(必看篇)
Feb 28 Javascript
Vue2.0 多 Tab切换组件的封装实例
Jul 28 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
qrcode生成二维码微信长按无法识别问题的解决
Apr 04 Javascript
Webpack设置环境变量的一些误区详解
Dec 19 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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
javascript中的void运算符语法及使用介绍
2013/03/10 Javascript
在javascript中关于节点内容加强
2013/04/11 Javascript
JavaScript中读取和保存文件实例
2014/05/08 Javascript
微信小程序 MD5加密登录密码详解及实例代码
2017/01/12 Javascript
Angular2学习教程之组件中的DOM操作详解
2017/05/28 Javascript
JScript实现地址选择功能
2017/08/15 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
Angular angular-file-upload文件上传的示例代码
2018/08/23 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
[15:20]DOTA2亚洲邀请赛总决赛开幕式表演:羽泉献唱
2017/04/05 DOTA
[00:43]拉比克至宝魔导师密钥展示
2018/12/20 DOTA
用Python的SimPy库简化复杂的编程模型的介绍
2015/04/13 Python
python统计日志ip访问数的方法
2015/07/06 Python
python抖音表白程序源代码
2019/04/07 Python
详解python3安装pillow后报错没有pillow模块以及没有PIL模块问题解决
2019/04/17 Python
Python如何实现小程序 无限求和平均
2020/02/18 Python
Python使用configparser库读取配置文件
2020/02/22 Python
Django models文件模型变更错误解决
2020/05/11 Python
python 写一个性能测试工具(一)
2020/10/24 Python
利用Python实现学生信息管理系统的完整实例
2020/12/30 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
利用css3画个同心圆示例代码
2017/07/03 HTML / CSS
使用html5 canvas创建太空游戏的示例
2014/05/08 HTML / CSS
西班牙创意礼品和小工具网上商店:Curiosite
2016/07/26 全球购物
美国美妆网站:B-Glowing
2016/10/12 全球购物
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
高三历史教学反思
2014/01/09 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
竞选班干部演讲稿600字
2014/08/20 职场文书
先进党员事迹材料
2014/12/24 职场文书
《风不能把阳光打败》读后感3篇
2020/01/06 职场文书
python数字转对应中文的方法总结
2021/08/02 Python
php去除deprecated的实例方法
2021/11/17 PHP
MySQL高级进阶sql语句总结大全
2022/03/16 MySQL
nginx刷新页面出现404解决方案(亲测有效)
2022/03/18 Servers