截图 :

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. Codeforces Round #286 (Div. 1) D. Mr. Kitayuta's Colorful Graph

    D - Mr. Kitayuta's Colorful Graph 思路:我是暴力搞过去没有将答案离线,感觉将答案的离线的方法很巧妙.. 对于一个不大于sqrt(n) 的块,我们n^2暴力枚举, 对于 ...

  2. java.lang.ClassCastException: android.widget.ImageButton异常处理

    在调程序时总是出现异常关闭的现象,log显示: 03-26 07:58:09.528: E/AndroidRuntime(398): Caused by: java.lang.ClassCastExc ...

  3. 【ASP.NET MVC】Ajax提交表单

    下面这段代码主要有几个特点: 1.Ajax提交表单 2.表单中有一个<input type="file"/> 3.当选择完图片后,利用AJAX提交表单,并在执行成功后返 ...

  4. fastadmin iframe 表单提交之后跳转

    controller 对应的那个js文件中添加: define(['jquery', 'bootstrap', 'backend', 'table', 'form'], function($, und ...

  5. GETATTR,DELATTR,SETATTR与GETITEM,SETITEM,DELITEM区别

    通过对象.属性的方式触发的是__getattr__,__delattr__,__setattr__ 通过对象['属性']触发__getitem__,__setitem__,__delitem__ cl ...

  6. scrapy实现多级页面的抓取时使用meta传递item数据的问题（转）

    name = 'doubanzufang'start_urls = ['https://www.douban.com/group/tianhezufang/discussion?start=50'] ...

  7. django celery(QQ蓝鲸)

    官方:http://www.celeryproject.org 文档:http://docs.jinkan.org/docs/celery/index.html FAQ:http://docs.cel ...

  8. WPF常用控件样式( 内含一简单插件式开发示例)

    最近离职,离职前面的一份外派然后又外包的工作,总觉得不妥,之后外派的办个入职手续都一再失约,干脆推了.恰逢清明时节,暴雨纷纷,于是打算先休息休息调整下状态,工作的事情还是谨慎点的好,免得影响心情.话说 ...

  9. [BZOJ4009][HNOI2015]接水果(整体二分)

    [HNOI2015]接水果 时间限制:60s      空间限制:512MB 题目描述 风见幽香非常喜欢玩一个叫做 osu!的游戏,其中她最喜欢玩的模式就是接水果. 由于她已经DT FC 了The b ...

  10. 【BZOJ】2131: 免费的馅饼

    2131: 免费的馅饼 Time Limit: 10 Sec  Memory Limit: 259 MBSubmit: 508  Solved: 310[Submit][Status][Discuss ...