如何给这个计算器插件加入小数点计算功能,求教

qwe065560 2016-06-30 05:04:36
这个网上找的一个计算器插件,自己在里面做了些许修改,适应了现在所使用的情况,但是现在涉及到小数点计算,求教大神,如何修改能让其支持小数点计算,代码如下,多谢

var template =
'<span class="jcalculator">' +
'<span>7</span>' +
'<span>8</span>' +
'<span>9</span>' +
'<span class="plus operation">+</span>' +
'<span>4</span>' +
'<span>5</span>' +
'<span>6</span>' +
'<span class="minus operation">-</span>' +
'<span>1</span>' +
'<span>2</span>' +
'<span>3</span>' +
'<span class="multiplication operation">x</span>' +
'<span class="clear operation">C</span>' +
'<span>0</span>' +
'<span class="equal operation">=</span>' +
'<span class="divide operation">÷</span>' +
'</span>';


(function($) {
$.fn.calculator = function(theme) {
function Controller(el) {
var self = this;
el.wrap("<span class='jcalculator_wrap'></span>");
el.after(template);

this.display = el;
this.element = el.next();

if (theme) {
this.element.addClass(theme);
}

this.value = this.load();

this.stack = null;
this.stackOp = null;
this.clearStack = true;

$("span", this.element).on('click', function() {
var code = $(this).text().trim();
if (isNaN(code)) {
if (code == "C") {
self.digit;
} else if (code.charCodeAt(0) == 247) {
self.op = "/";
} else {
self.op = code;
}
} else {
self.digit = code;
}
});
}

Controller.prototype = {
load: function() {
return this.display.val() || this.display.text();
},
save: function() {
if (this.display.is("input")) this.display.val(this.value);
else this.display.text(this.value);
},
get v() {
return this.value;
},
set v(val) {
this.clearStack = false;
this.value = val;
this.save();
},
get op() {
return this.stackOp;
},
set op(value) {
switch (this.stackOp) {
case "+":
this.v = this.stack + this.v;
break;
case "-":
this.v = this.stack - this.v;
break;
case "x":
this.v = this.stack * this.v;
break;
case "/":
this.v = this.stack / this.v;
break;
}
this.stack = this.v;
this.stackOp = value;
this.clearStack = true;
},
set digit(d) {
d = parseInt(d);
if (this.clearStack) return this.v = d;
return this.v = this.v * 10 + d;
},
get digit() {
if (this.clearStack) return this.v = 0;
return this.v = Math.floor(this.v / 10);
}
};

var controller;
this.each(function() {
controller = new Controller($(this));
$(this).on('focus', function() {
$(".jcalculator").show();
});
$("body").click(function() {
$(".jcalculator").hide();
});
$(".jcalculator_wrap").click(function(event) {
event.stopPropagation();
});
$(document).keyup(function(e) {
if (e.keyCode == 27) {
$(".jcalculator").hide();
}
});

});

return controller;
};
})(jQuery);





.demonstration {
text-align: center;
}
.demonstration .jcalculator_wrap {
width: 100px;
margin: 0 auto;
}

.demonstration .jcalculator_wrap input:focus {
border-color: #37BE42;

}
.demonstration .jcalculator_wrap input:focus .jcalculator {
display: block;
}

.jcalculator_wrap {
position: relative;
}
.jcalculator {
background: #232323;
width: 100px;
display: none;
position: absolute;
top: 20px;
left:10px;
font-family: Helvetica, Arial, Verdana, sans-serif;
border-top: 1px solid #000;
border-left: 1px solid #000;
}
.jcalculator span {
cursor: pointer;
color: #fff;
float: left;
display: block;
width: 25px;
height: 25px;
line-height: 25px;
font-size: 12px;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
border-right: 1px solid #000;
border-bottom: 1px solid #000;
}
.jcalculator span:active {
line-height: 27px;
}
.jcalculator .operation {
background: #191919;
}
.jcalculator .operation.equal {
background: #eb0934;
}





调用要jquery依赖


$('#test').calculator();


<span class="demonstration">
<input id="test"/>
</span>
...全文
380 7 打赏 收藏 转发到动态 举报
AI 作业
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
qwe065560 2016-07-14
  • 打赏
  • 举报
回复
引用 6 楼 showbo 的回复:
[quote=引用 5 楼 qwe065560 的回复:] [quote=引用 4 楼 xuzuning 的回复:] 怪事!
s = '123.45';
document.write(parseFloat(s) + 100); //223.45
是啊这个应该是内置方法来的,但是就是报错了·~[/quote] #2的有个字母f写小写了,应该是F,直接拷贝的话肯定报错。。是parseFloat[/quote] 程序里面我用的是大写,这个我知道的
xuzuning 2016-07-01
  • 打赏
  • 举报
回复
怪事!
s = '123.45';
document.write(parseFloat(s) + 100); //223.45
qwe065560 2016-07-01
  • 打赏
  • 举报
回复
引用 2 楼 xuzuning 的回复:
parseInt 改为 parsefloat
没用。。。而且报错了~..
  • 打赏
  • 举报
回复
引用 5 楼 qwe065560 的回复:
[quote=引用 4 楼 xuzuning 的回复:] 怪事!
s = '123.45';
document.write(parseFloat(s) + 100); //223.45
是啊这个应该是内置方法来的,但是就是报错了·~[/quote] #2的有个字母f写小写了,应该是F,直接拷贝的话肯定报错。。是parseFloat
qwe065560 2016-07-01
  • 打赏
  • 举报
回复
引用 4 楼 xuzuning 的回复:
怪事!
s = '123.45';
document.write(parseFloat(s) + 100); //223.45
是啊这个应该是内置方法来的,但是就是报错了·~
xuzuning 2016-06-30
  • 打赏
  • 举报
回复
parseInt 改为 parsefloat
  • 打赏
  • 举报
回复

87,997

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧