使用jq 自个编写计算器

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script language="javascript" src="jquery-1.8.4.min.js"></script>
</head>
<body>
<style>
ul,li,input,p,span,div,i,button{
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul,li{
list-style: none;
}
input[type="button"]{
width: 25px;
height: 25px;
}
.flex{
display: flex;
}
#btn input+input{
margin-left: 5px
}
#box{
width: 86%;
}
.panel{
width: 40% !important;
height: 100%;
}
.messager-title{
height: 22px;
line-height: 22px;
}
.panel-header{
height: 12.3%;
}
#p{
width:100% !important;
height: 87.7% !important;
}
.Validform_wrong {
color: red;
white-space: nowrap;
background: url(../images/error.png) no-repeat -1px center;
display: inline-block;
width: 136px !important;
text-align: right;
}
.Validform_checktip {
margin-left: 0px !important;
}
.formtable tr td:first-child{
width: 96px !important;
}
.panel-header{
width:100% !important;
}
</style>
</head>
<body>
<div class="flex" style="margin: 5px 0" id="btn">
<input type="button" name="buttons" value="+" />
<input type="button" name="buttons" value="-" />
<input type="button" name="buttons" value="*" />
<input type="button" name="buttons" value="/" />
<input type="button" name="buttons" value="(" />
<input type="button" name="buttons" value=")" />
<input type="button" name="buttons" value="→" />
<input type="button" name="buttons" value="0" />
<input type="button" name="buttons" value="1" />
<input type="button" name="buttons" value="2" />
<input type="button" name="buttons" value="3" />
<input type="button" name="buttons" value="4" />
<input type="button" name="buttons" value="5" />
<input type="button" name="buttons" value="6" />
<input type="button" name="buttons" value="7" />
<input type="button" name="buttons" value="8" />
<input type="button" name="buttons" value="9" />
<input type="button" name="buttons" value="0" />

</div>
<div id="box" class="flex">
<div id="p" class="easyui-panel" title="折旧项目">
<table>
<tbody>
<tr>
<td><input type="checkbox" id="本年计提折旧" name="names" value="yearDe" >本年计提折旧</td>
</tr>
<tr>
<td><input type="checkbox" id="本月工作量" name="names" value="monthWork">本月工作量</td>
</tr>
<tr>
<td><input type="checkbox" id="本月计提折旧额" name="names" value="monthDeMoney" >本月计提折旧额</td>
</tr>
<tr>
<td><input type="checkbox" id="工作总量" name="names" value="workTotal">工作总量</td>
</tr>
<tr>
<td><input type="checkbox" id="累计工作量" name="names" value="workSum" >累计工作量</td>
</tr>
<tr>
<td><input type="checkbox" id="录入时工作总量" name="names" value="enterWorkSum" >录入时工作总量</td>
</tr>
<tr>
<td><input type="checkbox" id="录入时净残值率" name="names" value="enterNrRate" >录入时净残值率</td>
</tr>
<tr>
<td><input type="checkbox" id="录入时可使用月份" name="names" value="enterUseMonth" >录入时可使用月份</td>
</tr>
<tr>
<td><input type="checkbox" id="录入时累计工作量" name="names" value="enterWorkedSum" >录入时累计工作量</td>
</tr>
<tr>
<td><input type="checkbox" id="录入时累计折旧" name="names" value="enterDe" >录入时累计折旧</td>
</tr>
<tr>
<td><input type="checkbox" id="录入时已计提折旧" name="names" value="enterDed">录入时已计提折旧</td>
</tr>
<tr>
<td><input type="checkbox" id="录入时原值" name="names" value="enterOriginal">录入时原值</td>
</tr>
<tr>
<td><input type="checkbox" id="年初累计折旧" name="names" value="yearBeginDe" >年初累计折旧</td>
</tr>
<tr>
<td><input type="checkbox" id="年初原值" name="names" value="yearBeginValue" >年初原值</td>
</tr>
<tr>
<td><input type="checkbox" id="使用年限" name="names" value="userYear" >使用年限</td>
</tr>
<tr>
<td><input type="checkbox" id="已计提月份" name="names" value="dedMonth" >已计提月份</td>
</tr>
<tr>
<td><input type="checkbox" id="月初净残值" name="names" value="monthBeginNet" >月初净残值</td>
</tr>
<tr>
<td><input type="checkbox" id="月初净残值率" name="names" value="monthBeginNetRate">月初净残值率</td>
</tr>
<tr>
<td><input type="checkbox" id="月初累计减值准备金额" name="names" value="monthBeginMoney" >月初累计减值准备金额</td>
</tr>
<tr>
<td><input type="checkbox" id="月初累计折旧" name="names" value="monthBeginDe">月初累计折旧</td>
</tr>
<tr>
<td><input type="checkbox" id="月初累计转回减值准备金额" name="names" value="monthBeginValue" >月初累计转回减值准备金额</td>
</tr>
<tr>
<td><input type="checkbox" id="月折旧率" name="names" value="monthDeRate" >月折旧率</td>
</tr>
</tbody>
</table>
</div>
<table style="width: 80%;" cellpadding="0" cellspacing="1" class="formtable">
<tr>
<td align="right">
<label class="Validform_label">
折旧方法编码:
</label>
</td>
<td class="value">
<input id="lineCoding" name="lineCoding" type="text" style="width: 150px" class="inputxt" datatype="*" ignore="checked" />
<span class="Validform_checktip"></span>
<label class="Validform_label" style="display: none;">折旧方法编码</label>
</td>
</tr>
<tr>
<td align="right">
<label class="Validform_label">
折旧方法名称:
</label>
</td>
<td class="value">
<input id="lineName" name="lineName" type="text" style="width: 150px" class="inputxt" datatype="*" ignore="checked" />
<span class="Validform_checktip"></span>
<label class="Validform_label" style="display: none;">折旧方法名称</label>
</td>
</tr>
<tr>
<td align="right">
<label class="Validform_label">
月折旧率公式:
</label>
</td>
<td class="value">
<textarea id="monthly" name="monthly" type="textarea" rows="11" cols="11" class="inputxt" ignore="ignore" ></textarea>
<span class="Validform_checktip"></span>
<label class="Validform_label" style="display: none;">月折旧率公式</label>
</td>
</tr>
<tr>
<td align="right">
<label class="Validform_label">
月折旧额公式:
</label>
</td>
<td class="value">
<input id="depreciation" name="depreciation" type="text" style="width: 150px" class="inputxt" ignore="ignore" />
<span class="Validform_checktip"></span>
<label class="Validform_label" style="display: none;">月折旧额公式</label>
</td>
</tr>
</table>
</div>
</div>
<br />
<div>

<div class="panel" style="display: block; width: 163px;"><div class="easyui-panel panel-body panel-body-noheader panel-body-noborder" style="padding: 0px; border: 0px; width: 161px; height: 314px;" fit="true" border="false" title="">
<ul id="efBgIctestitemdataTree" class="tree"><li><div class="tree-node" style="cursor: pointer;"><span class="tree-indent"></span><span class="tree-icon tree-file"></span><span class="tree-title">人员编制数</span></div></li><li><div class="tree-node" style="cursor: pointer;"><span class="tree-indent"></span><span class="tree-icon tree-file"></span><span class="tree-title">测算指标04</span></div></li><li><div class="tree-node" style="cursor: pointer;"><span class="tree-indent"></span><span class="tree-icon tree-file"></span><span class="tree-title">门诊人次</span></div></li></ul>
</div></div>

<div class="panel layout-panel layout-panel-center" style="left: 197px; top: 0px; width: 402px;"><div region="center" style="padding: 50px; border: 1px solid rgb(149, 184, 231); width: 400px; height: 348px;" title="" class="panel-body panel-body-noheader layout-body">
<div id="efBgIctestitemdataTreeNum" class="hide">
-1
</div>
<table>
<tbody><tr style="border:black;">
<td colspan="4">
<div id="jieguo" data-num="0" style="width: 300px;min-height: 30px;font-size: 15px;text-align: right;font-weight:bold;color: red; padding: 20px 10px 20px 0;
border: 1px solid #95B8E7;word-wrap:break-word">0</div>
</td>
</tr>
<tr style="height: 40px;">
<td></td>
<td></td>
<td>
<button id="tuiGe">&nbsp;退&nbsp;格&nbsp;</button>
</td>
<td>
<button id="qingPing">&nbsp;清&nbsp;屏&nbsp;</button>
</td>
</tr>
<tr style="height: 40px;">
<td>
<button id="seven" class="number" name="7">&nbsp;&nbsp;7&nbsp;&nbsp;</button>
</td>
<td>
<button id="eight" class="number" name="8">&nbsp;&nbsp;8&nbsp;&nbsp;</button>
</td>
<td>
<button id="nine" class="number" name="9">&nbsp;&nbsp;9&nbsp;&nbsp;</button>
</td>
<td>
<button id="chengYi" class="yunSuan" name="3">&nbsp;&nbsp;×&nbsp;&nbsp;</button>
</td>
</tr>
<tr style="height: 40px;">
<td>
<button id="four" class="number" name="4">&nbsp;&nbsp;4&nbsp;&nbsp;</button>
</td>
<td>
<button id="five" class="number" name="5">&nbsp;&nbsp;5&nbsp;&nbsp;</button>
</td>
<td>
<button id="six" class="number" name="6">&nbsp;&nbsp;6&nbsp;&nbsp;</button>
</td>
<td>
<button id="jianQu" class="yunSuan" name="2">&nbsp;&nbsp;-&nbsp;&nbsp;</button>
</td>
</tr>
<tr style="height: 40px;">
<td>
<button id="one" class="number" name="1">&nbsp;&nbsp;1&nbsp;&nbsp;</button>
</td>
<td>
<button id="two" class="number" name="2">&nbsp;&nbsp;2&nbsp;&nbsp;</button>
</td>
<td>
<button id="three" class="number" name="3">&nbsp;&nbsp;3&nbsp;&nbsp;</button>
</td>
<td>
<button id="jiaShang" class="yunSuan" name="1">&nbsp;&nbsp;+&nbsp;&nbsp;</button>
</td>
</tr>
<tr style="height: 40px;">
<td>
<button id="zero" class="number" name="0">&nbsp;&nbsp;0&nbsp;&nbsp;</button>
</td>
<td>
<button id="dian" class="number" name=".">&nbsp;&nbsp;.&nbsp;&nbsp;</button>
</td>
<td>
<button id="Chuyi" class="yunSuan" name="4">&nbsp;&nbsp;÷&nbsp;&nbsp;</button>
</td>
<td>
<button id="dengYu">校验</button>
</td>
</tr>
</tbody></table>
</div></div>

</div>
<script type="text/javascript">
window.onload=function(){
$("#p input[type='checkbox']").attr("disabled","disabled")
var obj = document.getElementsByName("names");
arr1 = [];
var btnType = true,btnInputType = true;
var btnAdd = true;
//输入框标识
var y='';
var h=true;//默认选择第一个输入框
var yunsuan=false;//运算符

function a(){
$("#p input[type='checkbox']").click(function(){
if(btnType==false){
$("#p input[type='checkbox").eq(getindex).prop("checked",false);
return false;
}
var ischecked = $(this).is(":checked");
var getindex = $("#p input[type='checkbox']").index(this);
$("#p input[type='checkbox']").each(function (j) {
if(btnType&&j == getindex) {
$(this).prop("checked",true);
arr1.push($(this).attr('id'));
var f = arr1.toString();
if(y=='inputO'){
$("#monthly").val($("#monthly").val()+f);
arr1 = [];
}else if(y=='inputT'){
$("#depreciation").val($("#depreciation").val()+f);
arr1 = [];
}
btnType = false;
btnInputType = true;
} else {
$(this).prop("checked",false);
}
});
});
$('#btn input[name="buttons"]').each(function(){
$(this).click(function(){
if(btnInputType==false){
return false;
}
if(y=='inputO'){
$("#monthly").val($("#monthly").val()+$(this).val());
}else if(y=='inputT'){
$("#depreciation").val($("#depreciation").val()+$(this).val());
}
btnType = true;
btnInputType = false;
})
})
}
$('#monthly').click(function(){
var thisVal=$(this).val();
$("#p input[type='checkbox']").removeAttr("disabled");
y='inputO';
//默认输入框为空
if($(this).val().length<1){
h=true;
btnType = true;//运算 true 可以点击 false 禁止点击
btnInputType=false;//勾选 true 可以勾选 false 禁止勾选
}else{
var strLast=thisVal.substring(thisVal.length-1);
if(strLast=='+'||strLast=='-'||strLast=='*'||strLast=='/'){//+-*/()→
btnType = true;//运算 true 可以点击 false 禁止点击
btnInputType=false;//勾选 true 可以勾选 false 禁止勾选
}else{
btnType = false;//运算 true 可以点击 false 禁止点击
btnInputType=true;//勾选 true 可以勾选 false 禁止勾选
}
}
})
$('#depreciation').click(function(){
var thisVal=$(this).val();
$("#p input[type='checkbox']").removeAttr("disabled");
y='inputT';
//默认输入框为空
if($(this).val().length<1){
h=false;
btnType = true;
btnInputType=false;
}else{
var strLast=thisVal.substring(thisVal.length-1);
if(strLast=='+'||strLast=='-'||strLast=='*'||strLast=='/'){//+-*/()→
btnType = true;//运算 true 可以点击 false 禁止点击
btnInputType=false;//勾选 true 可以勾选 false 禁止勾选
}else{
btnType = false;//运算 true 可以点击 false 禁止点击
btnInputType=true;//勾选 true 可以勾选 false 禁止勾选
}
}
})

a();
}


$(function(){
//生成计算器
var yunSuan = 0;//运算符号,0-无运算;1-加法;2-减法;3-乘法;4-除法
var change = 0;//属于运算符后需要清空上一数值
var num1 = 0;//运算第一个数据
var num2 = 0;//运算第二个数据
var cunChuValue = 0;//存储的数值
$(".number").click(function() {//点击数字触发事件
var num = $(this).attr('name');
var oldValue = $("#jieguo").html();

if(yunSuan==0&&oldValue!=="0"){
alert('请选择运算符!');
return false;
}
if (change == 1) {
oldValue = "0";
change = 0;
}
var newValue = "";
if (num == -1) {
oldValue = parseFloat(oldValue);
newValue = oldValue * -1;
} else if (num == ".") {
if (oldValue.indexOf('.') == -1)
newValue = oldValue + ".";
else
newValue = oldValue;
} else {
if (oldValue == 0 && oldValue.indexOf('.') == -1) {
newValue = num;
} else {
newValue = oldValue + num;
}
}
$("#jieguo").html(newValue);
});
$("#qingPing").click(function() {//点击清屏触发事件
$("#jieguo").html("0");
yunSuan = 0;
change = 0;
num1 = 0;
num2 = 0;
});
$("#tuiGe").click(function() {//点击退格触发事件
if (change == 1) {
yunSuan = 0;
change = 0;
}
var value = $("#jieguo").html();
var valueTree = $('#efBgIctestitemdataTreeNum').html();
if (value.length == 1) {
if(valueTree > 0 ){
$('#jieguo').html(valueTree);
}else{
$("#jieguo").html("0");
}
} else {
value = value.substr(0, value.length - 1);
$("#jieguo").html(value);
}
});
$(".yunSuan").click(function() {//点击运算符号触发事件
yunSuan = $(this).attr('name');
var value = $("#jieguo").html();
var yunSuanType;
if(yunSuan == 1 ){
yunSuanType="+"
}else if(yunSuan == 2){
yunSuanType="-"
}else if(yunSuan == 3){
yunSuanType="*"
}else if(yunSuan == 4){
yunSuanType="/"
}else if(yunSuan == 0 || num1 == 0 || num2 == 0){

}
$("#jieguo").html(value+yunSuanType);
});
$("#dengYu").click(function() {//点击等于符号触发事件
var value = $("#jieguo").html();
var dianIndex = value.indexOf(".");
if (dianIndex == value.length) {
value = value.substr(0, value.length - 1);
}
var dianIndex1 = value.substr(value.length - 1);
if (dianIndex1 >=0 ) {
alert('校验成功')
}else{
alert('校验失败');
return false;
}
var sum = 0;
sum = eval('('+value+')');
//$("#jieguo").html(sum);
change = 1;
yunSuan = 0;
num1 = 0;
num2 = 0;

});
//点击计算树节点
setTimeout(function(){
$('#efBgIctestitemdataTree li').each(function(i){
console.log(i);
var thisLi=$(this).find('.tree-title').html();
$(this).on('click',function(){
var jieguoHtml=$("#jieguo").html();
var jieguoHtmlInOf=jieguoHtml.substring(jieguoHtml.length-1)
if(jieguoHtml==0||yunSuan==0){
$('#efBgIctestitemdataTreeNum').html(thisLi)
$('#jieguo').html(thisLi).attr('data-index',i);
}else{
if(yunSuan==0){
alert('请选择运算符!');
return false;
}
if(jieguoHtmlInOf == "+"||jieguoHtmlInOf == "-"||jieguoHtmlInOf == "*"||jieguoHtmlInOf == "/"){//
$('#jieguo').html(jieguoHtml+thisLi).attr('data-index',i);
}else{
alert('请选择运算符!');
return false;
}

}
});
});
},600)
})

</script>
</body>

猜你喜欢

转载自www.cnblogs.com/xiaqixiZjj/p/8889161.html