js 版 简易计算器, 第一次写,有好的建议虚心接受

效果 : 

代码 :

var calculator = function(obj){
    this.obj = obj;
    this.maxValue = obj.maxValue;
    this.minValue = obj.minValue;
    this.operationSymbol = obj.operationSymbol;
    this.increasing = obj.increasing;
    this.init(); //Initialization function
};
calculator.prototype = {
    constructor : this,
    init : function(){
        var _this = this;
        if(_this.obj.obj.val() > _this.maxValue || isNaN(_this.obj.obj.val()) != false){
            _this.obj.obj.val(_this.maxValue);
            return;
        }
        switch(_this.operationSymbol){
            case ‘plus‘:
                _this.plus(_this.obj, _this.increasing);
                break;
            case ‘minus‘:
                _this.minus(_this.obj, _this.increasing);
                break;
            case ‘times‘:
                _this.times(_this.obj, _this.increasing);
                break;
            case ‘divide‘:
                _this.divide(_this.obj, _this.increasing);
                break;
            defaults :
                break;
        }
    },
    plus : function(obj,increasing){
        var puls_this = this;
        puls_this.initValue = parseInt(obj.obj.val());
        if(puls_this.initValue >= puls_this.minValue && puls_this.initValue != puls_this.maxValue && isNaN(puls_this.initValue)==false){
            obj.obj.val(parseInt(puls_this.initValue + puls_this.increasing));
        }
    },
    minus : function(obj,increasing){
        var minus_this = this;
        minus_this.initValue = obj.obj.val();
        if(minus_this.initValue != minus_this.minValue && isNaN(minus_this.initValue)==false)
            obj.obj.val(parseInt(minus_this.initValue - minus_this.increasing));
    },
    times : function(obj,increasing){
        var times_this = this;
        times_this.initValue = obj.obj.val();
        if(isNaN(times_this.initValue)==false)
            obj.obj.val(parseInt(times_this.initValue * times_this.increasing));
    },
    divide : function(obj,increasing){
        var divide_this = this;
        divide_this.initValue = obj.obj.val();
        if(isNaN(divide_this.initValue) == false)
            obj.obj.val(parseInt(divide_this.initValue / divide_this.increasing));
    }
};
window.calculator = calculator; 

调用:

<a href="javascript:void(0);" onClick="counter(‘defaultValue‘,‘minus‘)">-</a>
<input name="" type="text" value="1" id="defaultValue" />
<a href="javascript:void(0);" onClick="counter(‘defaultValue‘,‘plus‘)">+</a></div>

<script type="text/javascript">
    function counter(obje,symbol){
        new calculator({
            obj:$(‘#‘+obje),
            maxValue : 99,
            minValue : 0,
            operationSymbol : symbol,
            increasing : 1
        });
    }
</script>
时间: 2024-10-14 04:26:45

js 版 简易计算器, 第一次写,有好的建议虚心接受的相关文章

使用html+css+js实现简易计算器

使用html+css+js实现简易计算器, 效果图如下: html代码如下: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6

html、css、js实现简易计算器

学习HTML,CSS,JS一个月后,想着能自己是否能写出一个简单的东西,故编写了简易的计算器,之前也写过一个坦克大战,坦克大战的有些基本功能没有实现, 故也没有记录下来,想来,对这行初来咋到的,还是需要留下些东西供自己日后回忆,于是写下这篇随笔:因第一次写博客,不知道怎么上传源代码,也不知道怎么在博客页面实现计算效果. 下面是完成后计算器页面: 该计算器只是实现了简易的计算功能,很多其他功能没有实现,如运算的优先级功能,在后面的学习中再慢慢改进吧! 因计算器布局比较规整,故用table表格布局,

js之简易计算器

####闲来无事,写点小东西给初学者,下面是一个简易的计算器,我们来看具体的代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style> div{ height: 100px; margin: 200px 350px; } </style> &

原生JS实现简易计算器

<!doctype html> <html> <head> <meta charset="utf-8"> <title>简易计算器</title> <style> #div{ width: 300px; height: 500px; background: #ccc; margin: auto; border: 1px solid red; } table{ width: 97%; height: 48

js制作简易计算器(-)

前言:初学js,老师要求做一个简易计算器,目前只实现了能够计算,很多约束没有有做,待完善.仅作为自己的学习记录. <!doctype html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>简易计算器<

JS编写简易计算器

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head lang="en"> <meta charset="UTF-8"> <title></title> <script> function add(){ var a=parseInt(document.getElementById(&quo

js css 实现简易计算器

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-

第一次写博客,关于前端开发deMVC在js中的应用

对前端MVC MVC分别是model.view.controller的缩写,模型.视图.控制器.这些更加偏向于后台,在以前MVC是只属于后台的.当然随着技术的进步,前端的大牛们将后台的一些东西应用于前端,MVC就是其中之一.  走进MVC MVC三者关系图: 图片有点简单,请谅解,是第一次写,而且时间有点紧!!!  View视图 首先简单介绍一下它的工作原理与承担的业务.首先在这里我们先介绍View,它就是前端的视图界面,负责与用户的交互和拉取数据,如果说的简单点,它就是HTML文件: <!DO

【实践】js实现简易的四则运算计算器

最近看了一个大神推荐的某公司面试程序员的js 面试题,题目是用js 做一个计算器于是跟着大神的思想自己做了一下 ps:功能还没有完善好毕竟自己还是一只菜鸟还在不断学习中. 闲话不多说先上css代码 <style type="text/css"> *{ padding: 0px; margin: 0px; border: 0px; } .wrapper{ border: 5px solid #000; width: 300px; height: 400px; margin: