截图 :

cal.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. }

测试 :

  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. <BODY>
  18. 操作数1 : <input type="text" id="n1" /></br></br>
  19. 操作符号 : <input size="4" type="text" id="opera" /></br></br>
  20. 操作数2 : <input type="text" id="n2" /></br></br>
  21. <input type="button"  id="command" value="计算" />
  22. </BODY>
  23. </HTML>

JavaScript实现计算器功能的更多相关文章

  1. JS事件 编程练习-自制计算器 使用JS完成一个简单的计算器功能。实现2个输入框中输入整数后，点击第三个输入框能给出2个整数的加减乘除。

    编程练习 使用JS完成一个简单的计算器功能.实现2个输入框中输入整数后,点击第三个输入框能给出2个整数的加减乘除. 提示:获取元素的值设置和获取方法为:例:赋值:document.getElement ...

  2. JavaScript编写计算器的发展史

    JavaScript编写计算器的发展史: 编写一个普通的四则运算: <!DOCTYPE html> <html lang="en"> <head> ...

  3. 完成一段简单的Python程序，用于实现一个简单的加减乘除计算器功能

    #!/bin/usr/env python#coding=utf-8'''完成一段简单的Python程序,用于实现一个简单的加减乘除计算器功能'''try: a=int(raw_input(" ...

  4. javaWeb 使用 jsp 和 javaBean 实现计算器功能

    <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"% ...

  5. C#实现按键计算器功能

    C#实现按键计算器功能 (一次失败的编程) 界面: 代码如下: using System; using System.Collections.Generic; using System.Compone ...

  6. javascript 自动填充功能

    javascript 自动填充功能 javascript: (function(){ $("#zipcode").val("zip");$("#pho ...

  7. javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决

    javascript的倒计时功能中newData().getTime()在iOS下会报错问题解决 在做移动端时间转化为时间戳时,遇到了一个问题,安卓手机上访问时,能拿到时间戳,从而正确转换时间,而在i ...

  8. javascript 页面导出功能

    javascript 页面导出功能 <a class="btn" href="javascript:void(0);" onclick="win ...

  9. JavaScript ES6 核心功能一览（转）

    原文地址:Overview of JavaScript ES6 features (a.k.a ECMAScript 6 and ES2015+) 原文作者:Adrian Mejia 译文出自:掘金翻 ...

随机推荐

  1. 洛谷P3402 【模板】可持久化并查集 [主席树，并查集]

    题目传送门 可持久化并查集 n个集合 m个操作 操作: 1 a b 合并a,b所在集合 2 k 回到第k次操作之后的状态(查询算作操作) 3 a b 询问a,b是否属于同一集合,是则输出1否则输出0 ...

  2. 首次使用ideal构建maven项目web

    如附件 链接:https://pan.baidu.com/s/1oH-9VfIKnLPjVt-tOH7fZw 提取码:7s5t

  3. 小数据池，bytes

    '''python2 python3 '''#python2#print() print 'abc'#range() xrange() 生成器# raw_input() #python3#print( ...

  4. luogu P3383 【模板】线性筛素数

    题目描述 如题,给定一个范围N,你需要处理M个某数字是否为质数的询问(每个数字均在范围1-N内) 输入输出格式 输入格式: 第一行包含两个正整数N.M,分别表示查询的范围和查询的个数. 接下来M行每行 ...

  5. 2018ECfinal J. Philosophical Balance

    2018ECfinal J. Philosophical Balance 题目大意: 给出一个字符串 \(s\) ,你需要给每一个 \(i\) 一个 \([0,1]\) 之间的权值 \(k_i\) , ...

  6. 51nod部分容斥题解

    51nod1434 区间LCM 跟容斥没有关系.首先可以确定的一个结论是:对于任意正整数,有1*2*...*n | (k+1)*(k+2)*...*(k+n).因为这就是$C_{n+k}^{k}$. ...

  7. [BZOJ3676][APIO2014]回文串(Manacher+SAM)

    3676: [Apio2014]回文串 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 3097  Solved: 1408[Submit][Statu ...

  8. hdu 3949 XOR 线性基 第k小异或和

    题目链接 题意 给定\(n\)个数,对其每一个子集计算异或和,求第\(k\)小的异或和. 思路 先求得线性基. 同上题,转化为求其线性基的子集的第k小异或和. 结论 记\(n\)个数的线性基为向量组\ ...

  9. 设计模式 -- 访问者模式(Visitor)

    写在前面的话:读书破万卷,编码如有神--------------------------------------------------------------------主要内容包括: 初识访问者模 ...

  10. [原]Android Studio使用极光推送出现at cn.jpush.android.service.ServiceInterface.a(Unknown Source) 已解决