脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js网页计算器

JavaScript实现网页计算器功能

 更新时间：2020年10月29日 14:48:05   作者：龍雅  
这篇文章主要为大家详细介绍了JavaScript实现网页计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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获取标签ID改变style属性的代码

    Javascript获取标签ID改变style属性的代码

    下面的这段代码中，我们通过select元素的name属性来设置具体要访问style的哪个属性（本例中为背景色），这样，这个函数就可以用来设置不同的CSS属性了
    2012-08-08
  • js 火狐下取本地路径实现思路

    js 火狐下取本地路径实现思路

    火狐下取本地全路径使用js代码实现，感兴趣的朋友可以参考下哈，希望可以帮助到你
    2013-04-04
  • JavaScript实现文本中间缩略的两种方案

    JavaScript实现文本中间缩略的两种方案

    项目中经常会遇到缩略展示文字的场景,即要求文字在一行不换行展示,超出自动展示...,常用的展示效果有两种,文字中间缩略以及文字末尾缩略,本文将通过代码示例给大家详细的讲一下这两种方案,需要的朋友可以参考下
    2024-06-06
  • Mozilla 表达式 __noSuchMethod__

    Mozilla 表达式 __noSuchMethod__

    这是一个很特殊的方法，但是其存在的意义很大。不过很可惜只有firefox支持了。一个简单的例子解释一下它的用处
    2009-04-04
  • JS实现数组去重,显示重复元素及个数的方法示例

    JS实现数组去重,显示重复元素及个数的方法示例

    这篇文章主要介绍了JS实现数组去重,显示重复元素及个数的方法,涉及javascript数组遍历、统计、计算等相关操作技巧,需要的朋友可以参考下
    2019-01-01
  • Bootstrap入门书籍之（零）Bootstrap简介

    Bootstrap入门书籍之（零）Bootstrap简介

    Bootstrap是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。本文给大家介绍Bootstrap入门书籍之（零）Bootstrap简介，需要的朋友参考下
    2016-02-02
  • js实现两点之间画线的方法

    js实现两点之间画线的方法

    这篇文章主要介绍了js实现两点之间画线的方法,涉及javascript图形绘制的相关技巧,需要的朋友可以参考下
    2015-05-05
  • JavaScript中创建对象的7种模式详解

    JavaScript中创建对象的7种模式详解

    本文主要介绍了JavaScript中创建对象的7种模式，具有很好的参考价值，下面跟着小编一起来看下吧
    2017-02-02
  • js求数组最大值的八种具体实现方法

    js求数组最大值的八种具体实现方法

    数组如何求最大值,想必很多的朋友都不会吧,下面这篇文章主要给大家介绍了关于使用js求数组最大值的八种方法具体实现的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
    2023-09-09
  • 分享JS表单验证源码（带错误提示及密码等级）

    分享JS表单验证源码（带错误提示及密码等级）

    这篇文章主要介绍了JS表单验证源码（带错误提示及密码等级）,代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
    2020-01-01

最新评论