JavaScript实现计算器功能

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量285 收藏 1
点赞数
文章标签： javascript ViewUI

截图 :

 

 

 

cal.js

 

Js代码   收藏代码
  1. var Class = {} ;  
  2. Class.calculation = function(){  
  3.     var calculation = {} ;  
  4.     calculation.result = 0 ;  
  5.     calculation.calculate = function(num1,num2){} ;  
  6.     calculation.getResult = function(){  
  7.         return this.result ;  
  8.     } ;  
  9.     return calculation ;  
  10. } ;  
  11. Class.add = function(){  
  12.     var add = Class.calculation() ;  
  13.     add.calculate = function(num1,num2){  
  14.         this.result = num1 + num2 ;  
  15.     } ;  
  16.     return add ;  
  17. }  
  18. Class.subtraction = function(){  
  19.     var subtraction = Class.calculation() ;  
  20.     subtraction.calculate = function(num1,num2){  
  21.         this.result = num1 - num2 ;  
  22.     } ;  
  23.     return subtraction ;  
  24. }  
  25. Class.multiply = function(){  
  26.     var multiply = Class.calculation() ;  
  27.     multiply.calculate = function(num1,num2){  
  28.         this.result = num1 * num2 ;  
  29.     } ;  
  30.     return multiply ;  
  31. }  
  32. Class.divide = function(){  
  33.     var divide = Class.calculation() ;  
  34.     divide.calculate = function(num1,num2){  
  35.         this.result = num1 / num2 ;  
  36.     } ;  
  37.     return divide ;  
  38. }  
  39. Class.calculator = function(num1,num2,op){  
  40.     var obj = null ;  
  41.     var num1 = parseInt(num1) || 0 ;  
  42.     var num2 = parseInt(num2) || 0 ;  
  43.     if("+" == op){  
  44.         obj = Class.add() ;  
  45.     }  
  46.     else if("-" == op){  
  47.         obj = Class.subtraction() ;  
  48.     }  
  49.     else if("*" == op){  
  50.         obj = Class.multiply() ;  
  51.     }  
  52.     else if("/" == op){  
  53.         if(0 == num2){  
  54.             alert("除数不能为零!") ;  
  55.             return ;  
  56.         }  
  57.         obj = Class.divide() ;  
  58.     }  
  59.     else{  
  60.         alert("无效的" + op + "操作符!") ;  
  61.         return ;  
  62.     }  
  63.     obj.calculate(num1,num2) ;  
  64.     alert("计算结果:" + obj.getResult()) ;  
  65. }  

  

测试 :

 

Html代码   收藏代码
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3.  <HEAD>  
  4.   <TITLE>JavaScript面向对象</TITLE>  
  5.     <script type="text/javascript" src="js-lib/cal.js"></script>  
  6.     <script type="text/javascript">  
  7.         window.onload = function(){  
  8.             document.getElementById("command").onclick = function(){  
  9.                 var n1 = document.getElementById("n1").value ;  
  10.                 var opera = document.getElementById("opera").value ;  
  11.                 var n2 = document.getElementById("n2").value ;  
  12.                 Class.calculator(n1,n2,opera) ;  
  13.             }  
  14.     } ;  
  15. </script>  
  16.  </HEAD>  
  17.   
  18.  <BODY>  
  19.   
  20.     操作数1 : <input type="text" id="n1" /></br></br>  
  21.     操作符号 : <input size="4" type="text" id="opera" /></br></br>  
  22.     操作数2 : <input type="text" id="n2" /></br></br>  
  23.     <input type="button"  id="command" value="计算" />  
  24. </BODY>  
  25. </HTML>  
weixin_34343689
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
javascript完成简易计算器的功能
sinat_29398599的博客
03-26 1823
这个功能主要是为了实现简单的加减乘除运算，所以又帮我简单的回顾了一下html与css的最基础的知识，界面如下：          在输入数1 和数2 时需要用正则运算检验是否是数字；需要将输入的字符转换成数字（整形或浮点），计算用到了switch分支语句。document.getElementsByName("")[0].value是我暂时未学到的。          在做这个项目
PHP简单的计算器实现（判断除数不能为零）
young_var的博客
03-15 3839
&lt;!----&gt; &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;PHP实现简单的计算器&lt;/title&gt; &lt;/head&gt; &lt;body&amp
JS实现计算器功能
是阿超
10-23 1487
代码： <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <!-- 样式 --> <style> tr,td{ text-align: center; } a{ /* 去除下划线 */ text-decoration: none; colo
js实现计算器功能
what_happen_to_you的博客
05-26 570
简易计算器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style> * { margin: 0; padding: 0; } table { width
原生JavaScript实现轻量级计算器
afmbujrj51967的博客
04-11 176
　　想尝试做一个网页版计算器后，参考了很多博客大神的代码，综合归纳、总结修改，整理如下文。 　　附：Demo 源码 一、HTML+CSS 　　具体结构样式如下图，基本参照手机计算器界面。按钮功能可以查看demo，都可以实现。 　　 　　这部分布局不是重点，只附上代码以便理解JS行为。 　　HTML/结构： <!DOCTYPE html> ...
JS+CSS制作简单计算器
WantBeLion的博客
06-21 275
<!DOCTYPE html>                                &nbs...
javascript实现计算器功能
10-15
主要为大家详细介绍了javascript实现计算器功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
javascript实现简易计算器功能
10-14
接下来是JavaScript部分，这是实现计算器功能的核心。我们可以通过为这些按钮绑定点击事件来响应用户的操作。例如，当用户点击数字按钮时，可以更新输入框（`<input type="text">`）的值。对于操作符按钮，我们需要...
JavaScript实现简单计算器功能
11-27
在本实例中，我们讨论如何使用JavaScript来实现一个简单的计算器功能。这个计算器的基本操作包括数字输入、运算符选择以及计算结果的显示。以下是对代码的详细解析： 首先，HTML部分创建了一个基本的用户界面，包括...
计算器网页版
07-15
计算器网页版
使用JavaScript编写的简单计算器
06-16
简单计算器：初学JavaScript，编写了一个简单的计算器，用于平常的计算什么的还是可以的
JavaScript实现的网页计算器功能
Mind_programmonkey的博客
08-21 1626
事件 function count(){ var Txt1=document.getElementById("txt1").value; var Txt2=document.getElementById("txt2").value; var SEL=document.getElementById("select").value;
用JavaScript实现简单的计算器
sinat_37503265的博客
05-30 7902
基于JavaScript实现计算器中的加减乘除等基本功能
JavaScript - 编写四则运算函数
三人行，必有我师焉。
04-29 7101
四则运算函数             //var num1=prompt("请输入第一个整数：","");         //alert(typeof(num1));         //num1=parseInt(num1);         //alert(typeof(num1));         //var num2=prompt("请输入第二个小数：","");
移动开发——计算器
qq_50582468的博客
10-31 2493
计算器功能介绍： 可以实现数据的加(+)，减(-)，乘(*)，除(/)，取余运算(%)，以及实现数据的删除(Del)和清空功能(C)。 计算器页面设计 数据部分 data:{ // data中只放置初始数据 num:"1", op:" "//记录运算符号 } index.wxml页面 <view class="result"> <view class="result-num">{{num}}</view> <view
输入计算需要的两个操作数和运算符，输出计算结果，要求，除数为0就提示。...
weixin_34390105的博客
10-11 3561
function c(a,b,c){return b==0?"除数为0":c==1?a/b:a%b;} 转载于:https://www.cnblogs.com/ecmasea/p/5949828.html
JAVASCRIPT实现简单计算器
weixin_33881753的博客
11-22 636
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;计算器&lt;/title&gt; &lt;style&gt; /*Basic reset*/ *
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
使用DispatchAction实现计算器功能
"这篇内容主要介绍了如何在Structs1框架中使用DispatchAction进行高级应用，特别是在构建计算器功能时的应用。DispatchAction是Struts框架提供的一种处理多业务操作的机制，可以减少Action的数量并规范代码结构。" ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值