欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

前端计算器功能

程序员文章站 2022-07-04 14:10:10
...

前端计算器功能
            
    
    博客分类： javaWeb jquery 
 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/context/myTag.jsp" %>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<script src="${ctx_module}/dist/js/jquery-1.8.3.min.js"></script>
<link rel="stylesheet" type="text/css" href="${ctx_module}/dist/css/table.css" />
<link rel="stylesheet" href="${ctx_module}/plugins/layui/css/layui.css" />
<link rel="stylesheet" href="${ctx_module}/dist/css/commen.css" />
<link rel="stylesheet" href="${ctx_module}/dist/css/form.css">
</head>
<style type="text/css">
.textbox {
    border: 1px solid #e6e6e6;
    border-radius: 2px;
}
.no-border {
    border:none;
}
.textbox {
    border: 1px solid #e6e6e6;
    border-radius: 2px;
}
.combo-p {
   -moz-box-shadow: none;
   -webkit-box-shadow: none;
   box-shadow: none;
   filter: none;
}
.layui-form[wid110] .layui-form-label {
    width: 110px;
}
.layui-form[wid110] .layui-input-block {
    margin-left: 140px;
}
 #itemContainer th{
	background:white;
}
.totals{
	float:left;
	width: 88%;
}
.count{
	float:right;
	text-align:center;
	line-height: 40px;
}
</style>
<body>
<div class="container ">
<div class="" style="background-color:white;">
  <div class="">
    <div class="layui-card-header"> <span>赔偿金计算器</span>
    </div>
    <div class="layui-card-header"> <span>申请人基本信息</span>
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">居民属性</div>
           <div class="layui-inline">
               <select name="jmsx" id="jmsx">
	               	<option value="0">城镇居民</option>
	               	<option value="1">农村居民</option>
               </select>
         	</div>
         <div class="layui-inline">收入类型</div>
            <div class="layui-inline">
                <select name="srlx" id="srlx">
	               	<option value="0">有固定收入</option>
	               	<option value="1">无固定收入</option>
               </select>
            </div>
        <div class="layui-inline">年龄：</div>
	          <div class="layui-inline">
	            <input type="text" name="age" id="age"  class="layui-input" />
	          </div>     
	    <div class="layui-inline">年份</div>
			   <div class="layui-inline">
			     <input type="text" class="layui-input"  name="years" id="years">
			   </div>
    </div>
    <div class="layui-card-header">
    </div>
    <div class="layui-form-item">
        <div class="layui-inline">受伤程度</div>
           <div class="layui-inline">
               <select name="sscd" id="sscd">
	               	<option value="0"></option>
	               	<option value="1">一般损害</option>
	               	<option value="2">损害致残</option>
	               	<option value="3">损害致死</option>
               </select>
         	</div>
         <div class="layui-inline cjjb">残疾级别</div>
           <div class="layui-inline cjjb">
               <select name="cjjb" id="cjjb">
               		<option value="0"></option>
	               	<option value="1">十级</option>
	               	<option value="2">九级</option>
	               	<option value="3">八级</option>
	               	<option value="4">七级</option>
	               	<option value="5">六级</option>
	               	<option value="6">五级</option>
	               	<option value="7">四级</option>
	               	<option value="8">三级</option>
	               	<option value="9">二级</option>
	               	<option value="10">一级</option>
              </select>
           </div>
         <div class="layui-inline">总计：</div>
           <div class="layui-inline">
             <input type="text" name="price" id="price" style="display: -webkit-inline-box;width:90%"  class="layui-input" readonly/><span class='count'>元</span>
           </div>  
         <div class="layui-inline">
		   <button class="default-btn btn-radius" id="btn">下载赔偿清单</button>
		 </div>
    </div>
	<div id = "layoverContainer">
	<div class="content-main-title">
    </div>
      <div class="tablelist">
       <table class="table" id="calculator">
          <thead>
            <tr>
              <th >序号</th>
	          <th >项目名称</th>
	          <th >类型</th>
	          <th >票据金额</th>
	          <th >标准</th>
	          <th >时间</th>
	          <th >系数</th>
	          <th >小计</th>
            </tr>
          </thead>
          <tbody id="itemContainer" style="background-color:white;"></tbody>
      </table>
    </div>
    </div>
    <br/>
  </div>
</div>
<br/>

</div>
<script type="text/javascript" src="${ctx_module}/plugins/layui/layui.js"></script>
<script src="${ctx_module}/dist/js/jquery.ajaxCall.js"></script>
<script src="${ctx_module}/dist/js/rule.js"></script>
<!-- ckeditor -->
<script type="text/javascript" src="${ctx_module}/plugins/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${ctx_module}/plugins/ckeditor/config.js"></script>
<!-- artTemplate 兼容 ie -->
<script src="${ctx}/static/artTemplate/lib/es5-shim.min.js"></script>
<script src="${ctx}/static/artTemplate/lib/es5-sham.min.js"></script>
<script src="${ctx}/static/artTemplate/lib/json3.min.js"></script>
<script src="${ctx}/static/artTemplate/lib/template-web.js"></script>
<script>
var dataMap = {};
$(function(){
	layui.use(['laydate'], function(){
		  var laydate = layui.laydate;
		  //执行一个laydate实例
		  laydate.render({
		    elem: '#years', //指定元素
		    type:'year',
		    done: function(value){
		    	funeral(value);
		    }
		  });
		});
	 var str="";
	 $.each(rules.rule("0"), function(i, item){
		 str+="<tr>";
		 str+="<td>"+(++i)+"</td>";
		 str+="<td>"+item.xmmc+"</td>";
		 str+="<td>"+item.lx+"</td>";
		 if("1,3,4,6,10,11,13".indexOf(i)!=-1){
			 str+="<td><input type='text'  class='layui-input number' data-type='"+i+"' placeholder='请输入金额'/></td>" ;
		 }else{
			 str+="<td>"+item.pjje+"</td>";
		 }
		 if("2".indexOf(i)!=-1){
			 str+="<td><input type='text' id='bz2' class='layui-input totals number' data-type='"+i+"' placeholder='请输入年工资额'/><span class='count'>"+item.bz+"</span></td>" ;
		 }else if("9".indexOf(i)!=-1){
			 str+="<td><input type='text' id='bz9' class='layui-input totals number' data-type='"+i+"' placeholder='被抚养人年龄'/><span class='count'>"+item.bz+"</span></td>" ;
		 }else if("5".indexOf(i)!=-1){
			 str+="<td><input type='hidden' id='bz5' class='layui-input' />"+item.bz+"</td>" ;
		 }else{
			 str+="<td>"+item.bz+"</td>";
		 }
		 if("2,5".indexOf(i)!=-1){
			 str+="<td><input type='text'  class='layui-input totals number sj' data-type='"+i+"' placeholder='请输入整数'/><span class='count'>"+item.sj+"</span></td>" ;
		 }else{
			 str+="<td>"+item.sj+"</td>";
		 }
		 if("3".indexOf(i)!=-1){
			 str+="<td>"
			 +"<select name='xs' id='xs' onchange='xs()'>"
			 +"<option value='1'>100%</option>"
			 +"<option value='0.8'>80%</option>"
			 +"<option value='0.5'>50%</option>"
			 +"</select></td>" ;
		 }else{
			 str+="<td>"+item.xs+"</td>";
		 }
		 str+="<td><input type='text'  class='layui-input totals total' readonly /><span class='count'>元</span></td>";
		 str+="</tr>";
	  });
	 $("#itemContainer").html(str);
	 damage();
	 disabled();
});
$("#sscd").change(function(){
	var str="";
	 $.each(rules.rule($("#sscd").val()), function(i, item){
		 str+="<tr>";
		 str+="<td>"+(++i)+"</td>";
		 str+="<td>"+item.xmmc+"</td>";
		 str+="<td>"+item.lx+"</td>";
		 if("1,3,4,6,10,11,13".indexOf(i)!=-1){
			 str+="<td><input type='text'  class='layui-input number' data-type='"+i+"' placeholder='请输入金额'/></td>" ;
		 }else{
			 str+="<td>"+item.pjje+"</td>";
		 }
		 if("2".indexOf(i)!=-1){
			 str+="<td><input type='text' id='bz2' class='layui-input totals number' data-type='"+i+"' placeholder='请输入年工资额'/><span class='count'>"+item.bz+"</span></td>" ;
		 }else if("9".indexOf(i)!=-1){
			 str+="<td><input type='text' id='bz9' class='layui-input totals number' data-type='"+i+"' placeholder='被抚养人年龄'/><span class='count'>"+item.bz+"</span></td>" ;
		 }else if("5".indexOf(i)!=-1){
			 str+="<td><input type='hidden' id='bz5' class='layui-input' />"+item.bz+"</td>" ;
		 }else{
			 str+="<td>"+item.bz+"</td>";
		 }
		 if("2,5".indexOf(i)!=-1){
			 str+="<td><input type='text'  class='layui-input totals number sj' data-type='"+i+"' placeholder='请输入整数'/><span class='count'>"+item.sj+"</span></td>" ;
		 }else{
			 str+="<td>"+item.sj+"</td>";
		 }
		 if("3".indexOf(i)!=-1){
			 str+="<td>"
			 +"<select name='xs' id='xs' onchange='xs()'>"
			 +"<option value='1'>100%</option>"
			 +"<option value='0.8'>80%</option>"
			 +"<option value='0.5'>50%</option>"
			 +"</select></td>" ;
		 }else{
			 str+="<td>"+item.xs+"</td>";
		 }
		 str+="<td><input type='text'  class='layui-input totals total' readonly /><span class='count'>元</span></td>";
		 str+="</tr>";
	  });
	 $("#itemContainer").html(str);
});
//触发键盘输入票据金额
$("#itemContainer").on("keyup",".number",function(){
	//事件委托
	var total=$(this).closest("tr").find(".total");
	var sj=$(this).closest("tr").find(".sj");//该行的属性
	var pjje=this.value;//票据金额
	var type=this.getAttribute("data-type");//序号
	var xs=1;
	var types = ["1","4","6","10","11","13"];
	if(types.indexOf(type)> -1){
		type="1";
	}else if(type=="2"){
		pjje=Number($("#bz2").val());
		xs=Number(sj.val());
	}else if(type=="3"){
		xs=Number($("#xs").val());
	}else if(type=="5"){
		xs=50;
	}
	//小计
	total.val(rules.price(type,pjje,xs));
});
//触发键盘输入，下拉框改变事件
$(".container").on({
	keyup: function(){
		disabled();
		price();
  },
   change: function(){
	   funeral($("#years").val())
	   disabled();
	    damage();
	    price();
  }
});
//系数
function xs(){
	var price=0;
	var trList = $("#itemContainer").children("tr")
	var tdArr = trList.eq(2).find("td");
	price+=Number(tdArr.find(".total").val());
	//小计
	tdArr.find(".total").val(rules.price("3",price,$("#xs").val()));
}
//总计
function price(){
	//遍历tbody
	var price=0;
	var trList = $("#itemContainer").children("tr")
	for(var i=0;i<trList.length;i++){
		var tdArr = trList.eq(i).find("td");
		price+=Number(tdArr.find(".total").val());
	}
	$("#price").val(price);
};
//受伤程度
$("#sscd").change(function(){
	if(this.value=="2"){
		$(".cjjb").hide();
	}else{
		$(".cjjb").show();
	}
});
//丧葬费
function funeral(years){
	var trList = $("#itemContainer").children("tr")
	var tdArr = trList.eq(7).find("td");
	tdArr.find(".total").val(rules.funeral(years));
	price();
}
//残疾赔偿金
function disabled(){
	var jmsx=$("#jmsx").val();
	var age=$("#age").val();
	var years=$("#years").val();
	var sscd=$("#sscd").val();
	var cjjb=$("#cjjb").val();
	var trList = $("#itemContainer").children("tr")
	var tdArr = trList.eq(6).find("td");
	tdArr.find(".total").val(rules.disabled(jmsx,Number(age),years,sscd,cjjb));
	price();
}
//精神损害抚慰金
function damage(){
	var sscd=$("#sscd").val();
	var cjjb=$("#cjjb").val();
	var trList = $("#itemContainer").children("tr")
	var tdArr = trList.eq(11).find("td");
	tdArr.find(".total").val(rules.damage(sscd,cjjb));
	price();
}
//下载
var columnDelimiter = "\t"; //列分割符
var lineDelimiter = "\n";  //行分割符
$("#btn").click(function(){
  var scoreTable = document.getElementById('calculator');
  var head = scoreTable.tHead;
  var ths = head.getElementsByTagName('th');//获取th列信息
  var trs = scoreTable.tBodies[0].getElementsByTagName('tr');
  var trList = $("#itemContainer").children("tr")//获取tbody tr信息
  var result = '';
  result += ths[1].innerHTML + columnDelimiter;//项目名称
  result += ths[7].innerHTML + columnDelimiter;//小计
  result += lineDelimiter;

  for(let i=0, l=trs.length; i<l; i++){
	 let tds = trs[i].getElementsByTagName('td');
    for(let j=0, l2=tds.length; j<l2; j++){
    	if(j==1){
    		result += tds[j].innerHTML + columnDelimiter;//项目名称 th值
    	}else if(j==7){//小计输入框的值
      		result += trList.eq(i).find("td").eq(j).find("input").val() + columnDelimiter;
    	}
    }
    result += lineDelimiter;
  }
  
  var blob = new Blob([new Uint8Array(_toUtf16LE(result))], {type: "text/csv;charset=UTF-16;"});
  var downloadLink = document.createElement("a");
  if ('download' in downloadLink) { // feature detection, Browsers that support HTML5 download attribute
    var url = URL.createObjectURL(blob);
    downloadLink.href = url;
    downloadLink.download = '赔偿清单.csv';
    downloadLink.hidden = true;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  }else{
    if(navigator.msSaveBlob){ //IE10+
      navigator.msSaveBlob(blob, '赔偿清单.csv');
    }
  }	
});
	
function _toUtf16LE(str) {
  var charCode, byteArray = [],
      len = str.length;
  byteArray.push(255, 254); // LE BOM
  for (var i = 0; i < len; ++i) {
    charCode = str.charCodeAt(i);
    // LE Bytes
    byteArray.push(charCode & 0xff);
    byteArray.push(charCode / 256 >>> 0);
  }
  return byteArray;
}
</script>
</body>
</html>


var rules = rules || {};
(function ($) {
rules.rule = function (x) {
	var jsonStr = "[{'xmmc':'医疗费','lx':'依票据计算','pjje':'','bz':'','sj':'','xs':'','xj':''},"
				+"{'xmmc':'误工费','lx':'依标准计算','pjje':'','bz':'元','sj':'天','xs':'','xj':''},"
				+"{'xmmc':'护理费','lx':'依票据计算','pjje':'','bz':'','sj':'','xs':'','xj':''},"
				+"{'xmmc':'交通费','lx':'依票据计算','pjje':'','bz':'','sj':'','xs':'','xj':''},"
				+"{'xmmc':'住院伙食补助费','lx':'依标准计算','pjje':'','bz':'50元/天','sj':'天','xs':'','xj':''},"
				+"{'xmmc':'必要的营养费','lx':'依票据计算','pjje':'','bz':'','sj':'','xs':'','xj':''},"
				+"{'xmmc':'残疾赔偿金','lx':'依标准计算','pjje':'','bz':'','sj':'','xs':'','xj':''},"
				+"{'xmmc':'丧葬费','lx':'依标准计算','pjje':'','bz':'','sj':'','xs':'','xj':''},"
				+"{'xmmc':'被抚养人生活费','lx':'依标准计算','pjje':'','bz':'岁','sj':'','xs':'','xj':''},"
				+"{'xmmc':'残疾辅助器具费','lx':'依票据计算','pjje':'','bz':'','sj':'','xs':'','xj':''},"
				+"{'xmmc':'后续治疗费','lx':'自填','pjje':'','bz':'','sj':'','xs':'','xj':''},"
				+"{'xmmc':'精神损害抚慰金','lx':'依标准计算','pjje':'','bz':'','sj':'','xs':'','xj':''},"
				+"{'xmmc':'住宿费','lx':'依票据计算','pjje':'','bz':'','sj':'','xs':'','xj':''}]"
	var json = eval('(' + jsonStr + ')'); 
	switch(x)
	{	
			//case "0":return json ; break;
			default:return json ;break;
	}
};
//含有输入框的通用方法
rules.price = function (type,pjje,xs) {
	switch(type)
	{	
	case "1":return Math.round(pjje*100)/100 ; break;
	case "2":return Math.round(pjje*xs/365*100)/100 ; break;
	case "3":case "5":return Math.round(pjje*xs*100)/100 ; break;
	default:return "";break;
	}
};
//残疾赔偿金
rules.disabled  = function (jmsx,age,years,sscd,cjjb) {
	if(sscd=="0" || sscd=="3"){
		return;
	}
	if(jmsx=="0"){
		switch(years,cjjb)
		{	
		case "2018","1":return agedis(10000,age); break;
		case "2018","2":return agedis(12000,age); break;
		default:return "";break;
		}
	}else{
		switch(years,cjjb)
		{	
		case "2018","1":return agedis(8000,age); break;
		default:return "";break;
		}
	}
};
//根据年龄计算赔偿金
function agedis(income,age){
	var sum=0;
	if(age==0){
		return "";
	}else if(age>0 && age<=60){
		sum=income*20
	}else if(age>60 && age<=75){
		sum=income*(20-age+60);
	}else{
		sum=income*5;
	}
	return sum;
};
//丧葬费
rules.funeral  = function (years) {
	switch(years)
	{	
	case "2018":return Math.round(40087/2*100)/100 ; break;

	default:return "";break;
	}
};
//被抚养人生活费
rules.live  = function (jmsx,age,years,cjjb) {
	
};
//精神损害抚慰金
rules.damage  = function (sscd,cjjb) {
	if(sscd!="3"){
		cjjb=5000*cjjb;
	}
	switch(sscd)
	{	
	case "0":return "" ; break;
	case "3":return 50000 ; break;
	default:return cjjb;break;
	}
};
})(jQuery);



 


 




  
  

    
      
        
    

  • 前端计算器功能
            
    
    博客分类： javaWeb jquery 
    • 
          
          
  • 大小: 36.9 KB
    • 
        



					

															

						相关标签：												
							jquery						
											

															

						

							上一篇：							
								东风头大，西风尾大							
						

						

							下一篇：							
								日、月周围有黄圈，下雨就在一天半							
						

					

															

						

							推荐阅读