截图 :

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. SpringBoot项目在IntelliJ IDEA中实现热部署（简单方式）

    ------   开启idea自动make/build功能   ----- 1.CTRL + SHIFT + A --> 查找make project automatically --> ...

  2. Python函数-闭包的概念

    一个函数和它的环境变量合在一起,就构成了一个闭包(closure).在Python中,所谓的闭包是一个包含有环境变量取值的函数对象.环境变量取值被保存在函数对象的__closure__属性中.比如下面 ...

  3. Docker运行oracle12c注意事项

    title: docker运行oracle12c注意事项 date: 2019-03-27 13:42:34 categories: 数据库 author: mrzhou tags: docker 数 ...

  4. Jquery操作select标签的常用方法

    <select id="search"> <option value='1'>baidu</option> <option value=' ...

  5. Java synchronized的原理解析

    开始 类有一个特性叫封装,如果一个类,所有的field都是private的,而且没有任何的method,那么这个类就像是四面围墙+天罗地网,没有门.看起来就是一个封闭的箱子,外面的进不来,里面的出不去 ...

  6. HDU 6052 To my boyfriend（概率 贡献）

    To my boyfriend Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)T ...

  7. css去除chrome下select元素默认border-radius

    在mac下的chrome,对于select元素会默认有一个border-radius,当然有些情况下并不需要圆角,所以就要去掉. 比较常用的方法是: .select { -webkit-appeara ...

  8. 绘制bitmap 全屏 安卓获取 屏幕大小

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 绘制bitmap 全屏 Rectf rectF = new RectF(0, 0, w, ...

  9. 【UOJ #205】【APIO 2016】Fireworks

    http://uoj.ac/problem/205 好神的题啊. dp[i][j]表示以i为根的子树调整成长度j需要的最小代价. 首先要观察到dp值是一个下凸壳. 因为从儿子合并到父亲时要把所有儿子的 ...

  10. 「UOJ207」共价大爷游长沙

    「UOJ207」共价大爷游长沙 解题思路 : 快速判断两个集合是否完全相等可以随机点权 \(\text{xor}\) 的思路可以用到这道题上面,给每一条路径随机一个点权,维护出经过每一条边的点权的 \ ...