截图 :

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. phpstorm+xdebug远程调试设置

    1 xdebug扩展安装 1.1 xdebug扩展安装: 2 服务器PHP配置 3 phpstorm设置 3.1 添加远程debug 3.2 phpstorm设置: 4 浏览器插件安装 4.1 chr ...

  2. elementUI 学习入门之 radio 单选框

    Radio 单选框 基础用法 选项默认可见,选项不宜过多,选项过多建议使用 select 选择器 使用 Radio 组件,需要设置 v-model 绑定变量,选中意味着变量的值为相应 Radio  l ...

  3. Java Web开发——HTML CSS JavaScript 杂记

    HTML是一种在互联网上常见的网页制作标注性语言,并不能算作一种程序设计语言.因为它相对程序设计语言来说缺少了其应所有的特征.对于网站设计人员来说,只使用HTML是不够的,需要在页面中引入CSS样式. ...

  4. keil中的memory model

    这两天仿真遇到的怪事真的是一大堆. 还是读写Flash的代码.keil编译OK,但是仿真就是莫名其妙地挂掉出现一些乱七八糟的事情. 后面发现是keil 中的memory model勾选错了,勾选的是l ...

  5. 一个安卓应用 多少个 dalvik 虚拟机

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha 一个

  6. luoguP4284 [SHOI2014]概率充电器 概率期望树形DP

    这是一道告诉我概率没有想象中那么难的题..... 首先,用期望的线性性质,那么答案为所有点有电的概率和 发现一个点的有电的概率来源形成了一个"或"关系,在概率中,这并不好计算... ...

  7. NOIP2018提高组题解

    D1T1:铺设道路 回忆NOIP2013D2T1 积木大赛,发现这两题唯一的区别就是一个是造山一个是填坑,而把填坑的操作反序就是造山,所以可以直接使用那道题的方法. 具体方法是,从左到右每次考虑新的一 ...

  8. [BZOJ4560][JLOI2016]字符串覆盖(贪心+DP)

    先用KMP求出所有可以放的位置,然后两个值分别处理. 最大值: 贪心,4!枚举放的先后位置顺序,2^3枚举相邻两个串是否有交. 若有交,则后一个的起始位置一定是离前一个的结束位置最近的位置,无交也一样 ...

  9. [bzoj3625][Codeforces 250 E]The Child and Binary Tree（生成函数＋多项式运算＋FFT）

    3625: [Codeforces Round #250]小朋友和二叉树 Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 650  Solved: 28 ...

  10. HihoCoder - 1756 打怪

    题面在这里! 拆成两个部分分别算显然比较简单. 前面一个部分排个序枚举最大值算就好啦. 后面的就相当于把每一种数值的贡献加起来,也可以在排完序之后的a[]上面直接算出来. #include<bi ...