<%@ 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);
相关推荐
【HTML静态前端计算器页面】是一种基于HTML、CSS（SCC可能是笔误，应为CSS）构建的简单网页应用，主要用于实现基本的算术运算。在这个项目中，开发者使用纯前端技术来模拟一个功能完备的计算器界面，用户可以直接在...
本文将为您揭示如何利用这三大技术，轻松实现一个实用的计算器功能，助您提升前端技能。 HTML是构建网页结构的基础。在实现计算器功能时，我们使用HTML定义了一个包含输入框和按钮的容器，这些按钮分别代表数字和...
标题“多功能计算器JS版”所指的是一款基于JavaScript编写的计算器应用。JavaScript，是一种广泛用于网页和网络应用的脚本语言，它在浏览器端运行，为用户提供交互式的体验。这款计算器不仅具备基本的四则运算功能，...
【uniapp实现计算器功能】 uniapp是一个基于Vue.js的多端开发框架，它允许开发者编写一次代码，就可以在iOS、Android、H5、小程序、快应用等多个平台运行。本教程将详细讲解如何利用uniapp来实现一个计算器的功能，...
html+css实现计算器的布局，js实现计算器的功能和交互
3. **JavaScript功能**：计算器的核心功能由JavaScript实现。每个按钮点击事件都会触发一个JavaScript函数，这些函数负责接收用户的输入，进行相应的计算，并更新显示的结果。JavaScript还可能包括错误处理，例如...
对于学习C#编程、ASP.NET Web开发以及想了解如何实现计算器功能的人来说，这是一个有价值的参考实例。通过深入研究源代码，可以了解C#语言的控制结构、类和方法的使用，以及ASP.NET中如何处理用户输入和呈现动态内容...
在本主题中，我们将探讨如何使用Dreamweaver（DW）这个前端开发工具，结合JavaScript语言，来实现一个基本的计算器功能。Dreamweaver是Adobe公司出品的一款强大的Web设计和开发工具，它支持代码编辑、可视化设计以及...
在本项目中，"Js结合CSS3技术实现漂亮的网页计算器功能.rar"，我们将探讨如何使用JavaScript和CSS3来创建一个美观且实用的网页计算器。这个计算器不仅提供了基本的数学运算功能，同时也展示了HTML5事件处理和CSS3的...
这款"最好的辐条长度计算器"不仅考虑了上述各种计算模式，而且在功能上超越了现有的国外同类产品，为中国的单车爱好者和专业技师提供了极大的便利。它简化了计算流程，降低了误差，使得即使是没有深厚理论基础的用户...
综合以上信息，这个项目是一个使用Java后端和JSF、JSP前端技术实现的Web应用，提供了一个功能丰富的在线计算器。通过需求分析报告，开发者能够了解项目的整体架构和设计思路，而HILIS可能是项目中的关键部分，具体...
然后，JavaScript文件，如"cal.js"，是实现计算器功能的核心。JavaScript代码通过事件监听器与HTML按钮交互，当用户点击按钮时触发相应的计算逻辑。例如，为按钮添加点击事件监听器： ```javascript document....
这款“Vue.js标准型+科学型计算器插件”是利用Vue.js的特性构建的一个多功能计算器应用，可以满足用户在标准计算和科学计算模式下的各种需求。 1. **Vue.js组件化开发** Vue.js的核心思想之一就是组件化，它允许...
【标题】：“具有存储记忆功能的计算器app” 这个项目是一个基于HBuilder开发的简单计算器应用程序。HBuilder是一款集成开发环境，特别适用于HTML5应用的快速构建，它提供了丰富的代码提示和快捷开发工具，大大提高...
通过以上各个方面的知识解析，我们可以了解到实现一个简易计算器功能涉及到前端开发的多个方面，包括结构布局（HTML）、视觉效果（CSS）以及逻辑处理（JavaScript）。文章中虽然没有提供完整的JavaScript代码，但是...
在每个计算器的`.files`子目录中，可能包含有样式表（CSS）、脚本（JavaScript）和其他支持文件，这些都是为了实现计算器功能的前端资源。这些HTML文件通过浏览器加载并执行，用户在网页上填写信息后，计算器会进行...
11. **可扩展性**：一个良好的计算器设计应考虑到未来可能添加更多功能，如科学计算、复数运算、对数函数等，这就需要模块化和面向对象的设计思想。 综上所述，创建一个计算器程序涉及到的IT知识点广泛，包括编程...
总的来说，这个"超简单的html5实现计算器功能"项目是一个很好的学习资源，它将HTML5的结构、CSS的样式以及JavaScript的交互性结合起来，展示了一个基本的前端开发流程。通过这个实例，开发者可以深入理解如何使用...
计算器（实现先算乘除后算加减功能+C语言源码） 编的不好，请多多包涵！
关于计算器的计算逻辑，JavaScript提供了Math对象，包含了各种数学函数和常量，如加减乘除、指数、对数、三角函数等，这些都是实现计算器功能的基础。在代码中，可能通过监听键盘事件和按钮点击事件来获取用户输入，...