怎么使用JS处理账单
javascript
处理
账单
这次给大家带来怎么使用JS处理账单，使用JS处理账单的注意事项有哪些，下面就是实战案例，一起来看一下。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@include file="/webpage/inc/inc.jsp"%>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>账单打印</title>
</head>
<body style="margin: 0;padding: 0;" ng-app="myApp" ng-controller="myCtrl">
<p style="width: 950px;margin: 5px auto;padding: 10px 0px;border-bottom: 1px solid #eee;" id="headBox">
<span style="color:#32c5d2">Ι </span>收据打印
<a onclick="_back()" style="color: #FFF;background-color: #32c5d2;border-color: #32c5d2;border: none;cursor: pointer;margin:0 10px;padding: 5px 10px;font-size: 12px;line-height: 1.5;float: right;">返回账单列表</a>
<a href="javascript:printData()" target="_self" style="color: #FFF;background-color: #32c5d2;border-color: #32c5d2;border: none;;cursor: pointer;text-decoration: none;padding: 5px 10px;font-size: 12px;line-height: 1.5;margin-left: 20px;">打印</a>
</p>
<p id="pPrint" style="width: 960px;margin:0 auto;">
<p id="p1"></p>
<p id="p2">
<table width="100%" border="" cellspacing="0">
<thead>
<tr style="height: 40px;text-align: center;font-size: 30px;">
<td colspan="14">收 据</td>
</tr>
<tr>
<td style="text-align: center;width: 300px;"><span class="time_year">2017</span>年<span class="time_month">12</span>月<span class="time_day">11</span>日</td>
<td colspan="12" style="padding-left: 10px;">交款单位<span class="customer" style="padding: 0 12px;"></span></td>
<td style="padding-left: 10px;">NO:<span class="code"></td>
</tr>
<tr>
<td rowspan="2" style="text-align: center;">名称</td>
<td rowspan="2" style="text-align: center;width:50px;">单位</td>
<td rowspan="2" style="text-align: center;width:50px;">数量</td>
<td rowspan="2" style="text-align: center;width:50px;">单价</td>
<td colspan="9" style="text-align: center;">金额</td>
<td rowspan="2" style="text-align: center;">备注</td>
</tr>
<tr>
<td style="width: 30px;text-align: center;">佰</td>
<td style="width: 30px;text-align: center;">拾</td>
<td style="width: 30px;text-align: center;">万</td>
<td style="width: 30px;text-align: center;">千</td>
<td style="width: 30px;text-align: center;">百</td>
<td style="width: 30px;text-align: center;">十</td>
<td style="width: 30px;text-align: center;">元</td>
<td style="width: 30px;text-align: center;">角</td>
<td style="width: 30px;text-align: center;">分</td>
</tr>
</thead>
<tbody id="tbodyList">
<!-- <tr class="t_money_tr_0">
<td class="td_name_0" style="text-align: center;">{{items.name}}</td>
<td style="text-align: center;"> </td>
<td style="text-align: center;"> </td>
<td style="text-align: center;"> </td>
<td class="hunbit_0" style="text-align: center;"> </td>
<td class="debit_0" style="text-align: center;"> </td>
<td class="myriabit_0" style="text-align: center;"> </td>
<td class="kilbit_0" style="text-align: center;"> </td>
<td class="hunders_0" style="text-align: center;"> </td>
<td class="decade_0" style="text-align: center;"> </td>
<td class="unit_0" style="text-align: center;"> </td>
<td class="unitone_0" style="text-align: center;"> </td>
<td class="unittwo_0" style="text-align: center;"> </td>
<td class="td_remark_0" style="text-align: center;"> </td>
</tr> -->
</tbody>
<tfoot>
<tr>
<td>合计人民币(大写)</td>
<td colspan="13"><span class="money_num_text">
<i class="num_text_hunbit" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>佰<i class="num_text_debit" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>拾<i class="num_text_myriabit" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>万<i class="num_text_kilbit" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>仟<i class="num_text_hunders" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>佰<i class="num_text_decade" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>拾<i class="num_text_unit" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">X</i>元<i class="num_text_unitone" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">零</i>角<i class="num_text_unittwo" style="font-style: normal;margin: 0 12px;display: inline-block;width: 12px;">零</i>分<b>￥</b><b class="total"></b>
</span></td>
</tr>
<tr>
<td>主管</td>
<td colspan="6">会计</td>
<td colspan="7">收款人</td>
</tr>
<tr>
<td colspan="12" style="text-align: center;"><span> 白1 (存根) 黄 (收据) 绿 (记账) 蓝 (提货) 红 (核对) 白2 (确认) </span></td>
<td colspan="2">
<span tdata="pageNO" format="#" >
第<font color="#0000FF">#</font>张</span>
<span tdata="pageCount" format="#">
共<font color="#0000FF">##</font>张</span>
</td>
</tr>
</tfoot>
</table>
</p>
</p>
</body>
<script src="<%=staticServPath%>/static/assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="<%=staticServPath%>/static/js/public.js" type="text/javascript"></script>
<script src="<%=staticServPath%>/static/plug-in/ng/angular.min.js" type="text/javascript"></script>
<script src="<%=staticServPath%>/static/plug-in/lodop/LodopFuncs.js" type="text/javascript"></script>
<script> var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) { // var $scope = $scope;
inputId = window.location.href.split('?')[1].split('&')[0].split('=')[1]; //请求接口
ajaxJson('GET', webroot + '/bill/printList?ids=' + inputId, '', function(err, rsp) { if (rsp.code == 200) {
console.log('rsp',rsp.result);
$scope.aa = rsp.result;
$scope.data = rsp.result[0];
$scope.paymentDate = $scope.data.paymentDate.split('-');
$scope.customer = $scope.data.customer;
$scope.code = $scope.data.code; // $scope.total = $scope.data.total;
$scope.total = 10000.99; // $scope.items = $scope.data.items;
$scope.items = [{
money: 10.01,
remark: '备注1',
name: '01'
}, {
money: 1000000.99,
remark: '备注2',
name: '02'
}, {
money: 1000.00,
remark: '备注3',
name: '03'
}];
$scope.$apply();
$('.time_year').text($scope.paymentDate[0]);
$('.time_month').text($scope.paymentDate[1]);
$('.time_day').text($scope.paymentDate[2]);
$('.customer').text($scope.customer);
$('.code').text($scope.code);
$('.total').text($scope.total);
//数据行数
var itemLen = $scope.items.length; //迭代行数
var rowNum = itemLen + (4-itemLen%4) ; //console.log(rowNum);
for(var i = 0; i < rowNum; i++){ if(i<=itemLen){
_addBzRow($scope.items[i]);
}else{
_addBzRow(null);
}
} function _addBzRow(obj){ var innerHtml ; if(null==obj){
innerHtml = '<tr class="t_money_tr_">'+
'<td class="td_name_0" style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td class="td_remark_0" style="text-align: center;"> </td>'+
'</tr>';
}else{ var mhtml = getMoneyHtml(obj.money) ;
innerHtml = '<tr class="t_money_tr_">'+
'<td class="td_name_0" style="text-align: center;">'+obj.name+'</td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
'<td style="text-align: center;"> </td>'+
//---------------
mhtml +
//-------------------------
'<td class="td_remark_0" style="text-align: center;"> </td>'+
'</tr>';
}
$('#tbodyList').append(innerHtml);
}
// function getMoneyHtml(m){
// // 1089.00-->￥1089.00
// var money = m.toString();
// if(money.indexOf(".")==-1){//整数
// money+".00";
// }
// money = "￥" + money ;
// var arr = new Array();
// for(var i = 0;i<money.length;i++){
// var cm = money.charAt(i) ;
// if(cm == '.'){
// continue ;
// }
// arr.push(cm);
// }
// //money=['￥','1','0','8','9','0','0']
// var mhtml = '' ;
// var temp = arr.length , j = 0 ;
// for(var i = 9 ; i>0; i--){
// if(temp<i){
// mhtml = mhtml + '<td class="hunbit_0" style="text-align: center;"> </td>' ;
// }else{
// mhtml = mhtml + '<td class="hunbit_0" style="text-align: center;">' + arr[j] + '</td>' ;
// j++;
// }
// }
// return mhtml ;
// }
/*小写金额填入处理*/
function getMoneyHtml(m){ var m = m.toString(); if(m.indexOf(".") == -1){//整数补齐小数位数为00
m = m + ".00";
} var money = m.split('.'); var money_1 = '￥'+money[0];//整数部分
if(Number(money[0]) >= 1000000){ //大于一百万不显示￥
var money_1 = money[0];
} var money1_arr = money_1.split('')//转换成数组
var mhtml = '' ; var temp = money1_arr.length , j = 0 ; // 整数部分
for(var i = 7;i>0;i--){ if(temp < i){
mhtml = mhtml + '<td class="hunbit_0" style="text-align: center;"> </td>' ;
}else{
mhtml = mhtml + '<td class="hunbit_0" style="text-align: center;">' + money1_arr[j] + '</td>' ;
j++;
}
} //小数部分
if(m.toString().indexOf(".") != -1){ var money_2 = money[1]; var money2_arr = money_2.split(''); var temp2 = money2_arr.length ; for(var i = 0;i < 2; i++){
mhtml = mhtml + '<td class="hunbit_0" style="text-align: center;">' + money2_arr[i] + '</td>' ;
}
} return mhtml;
}
//处理大写金额
var DNum = { '1': '壹', '2': '贰', '3': '叁', '4': '肆', '5': '伍', '6': '陆', '7': '柒', '8': '捌', '9': '玖', '0': '零'
} //取出各个位数的值
var total = $scope.total.toString(); var totalArr = total.split('.'); var totalArr1 = totalArr[0]; var text_unit = totalArr1[totalArr1.length - 1]; var text_decade = totalArr1[totalArr1.length - 2]; var text_hunders = totalArr1[totalArr1.length - 3]; var text_kilbit = totalArr1[totalArr1.length - 4]; var text_myriabit = totalArr1[totalArr1.length - 5]; var text_debit = totalArr1[totalArr1.length - 6]; var text_hunbit = totalArr1[totalArr1.length - 7]; //赋值
$('.num_text_hunbit').text(DNum[text_hunbit]);
$('.num_text_debit').text(DNum[text_debit]);
$('.num_text_myriabit').text(DNum[text_myriabit]);
$('.num_text_kilbit').text(DNum[text_kilbit]);
$('.num_text_hunders').text(DNum[text_hunders]);
$('.num_text_decade').text(DNum[text_decade]);
$('.num_text_unit').text(DNum[text_unit]); if(total.indexOf(".") != -1){ var totalArr2 = totalArr[1].split(''); var text_unitone = totalArr2[0]; var text_unittwo = totalArr2[1];
$('.num_text_unitone').text(DNum[text_unitone]);
$('.num_text_unittwo').text(DNum[text_unittwo]);
}
} else {
console.log(rsp.message);
}
});
}); //大写金额转换
function smalltoBIG(n) { var fraction = ['角', '分']; var digit = ['零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖']; var unit = [
['元', '万', '亿'],
['', '拾', '佰', '仟']
]; var head = n < 0 ? '欠' : '';
n = Math.abs(n); var s = ''; for (var i = 0; i < fraction.length; i++) {
s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, '');
}
s = s || '整';
n = Math.floor(n); for (var i = 0; i < unit[0].length && n > 0; i++) { var p = ''; for (var j = 0; j < unit[1].length && n > 0; j++) {
p = digit[n % 10] + unit[1][j] + p;
n = Math.floor(n / 10);
}
s = p.replace(/(零.)*零$/, '').replace(/^$/, '零') + unit[0][i] + s;
} return head + s.replace(/(零.)*零元/, '元').replace(/(零.)+/g, '零').replace(/^整$/, '零元整');
} // 打印
var global_Html = ""; // function printme() {
// global_Html = document.body.innerHTML;
// //调用打印接口，记录打印操作
// ajaxJson('GET', webroot + '/bill/printLog?ids=' + inputId, '', function(err, rsp){
// if (rsp.code == 200) {
// document.body.innerHTML = document.getElementById('pPrint').innerHTML;
// window.print();
// } else {
// console.log(rsp.message);
// }
// });
// window.setTimeout(function() {
// document.body.innerHTML = global_Html;
// }, 30);
// }
// 不请求接口
function printme() {
global_Html = document.body.innerHTML;
document.body.innerHTML = document.getElementById('pPrint').innerHTML;
window.print();
window.setTimeout(function() {
document.body.innerHTML = global_Html;
}, 30);
} //返回账单列表
function _back() { var url = webroot + '/bill/index';
window.location.href = url;
}
//打印
function printData(){ var LODOP=getLodop();
LODOP.PRINT_INIT("打印账单收据");
LODOP.SET_PRINT_PAGESIZE(1,"25cm","15cm","LodopCustomPage") var strStyle="<style> table,td,th {border-width: 1px;border-style: solid;border-collapse: collapse}</style>"
LODOP.ADD_PRINT_TABLE(128,"2%","90%","2.5cm", strStyle + document.getElementById("p2").innerHTML);
LODOP.SET_PRINT_STYLEA(0,"Vorient",1);
LODOP.ADD_PRINT_HTM(26,"2%","90%","1cm",document.getElementById("p1").innerHTML);
LODOP.SET_PRINT_STYLEA(0,"ItemType",1);
LODOP.SET_PRINT_STYLEA(0,"LinkedItem",1);
LODOP.PREVIEW();
};
</script>
</html>登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是怎么使用JS处理账单的详细内容。更多信息请关注PHP中文网其他相关文章！
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
刺客信条阴影：贝壳谜语解决方案
4 周前
By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
3 周前
By DDD
在哪里可以找到原子中的起重机控制钥匙卡
4 周前
By DDD
<🎜>：死铁路 - 如何完成所有挑战
1 个月前
By DDD
如何修复KB5055523无法在Windows 11中安装？
2 周前
By DDD
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
WIN10服务主机太占cpu的处理操作过程
Mar 27, 2024 pm 02:41 PM
1、首先我们右击任务栏空白处，选择【任务管理器】选项，或者右击开始徽标，然后再选择【任务管理器】选项。2、在打开的任务管理器界面，我们点击最右端的【服务】选项卡。3、在打开的【服务】选项卡，点击下方的【打开服务】选项。4、在打开的【服务】窗口，右击【InternetConnectionSharing(ICS)】服务，然后选择【属性】选项。5、在打开的属性窗口，将【打开方式】修改为【禁用】，点击【应用】后点击【确定】。6、点击开始徽标，然后点击关机按钮，选择【重启】，完成电脑重启就行了。
WebSocket与JavaScript：实现实时监控系统的关键技术
Dec 17, 2023 pm 05:30 PM
WebSocket与JavaScript：实现实时监控系统的关键技术引言：随着互联网技术的快速发展，实时监控系统在各个领域中得到了广泛的应用。而实现实时监控的关键技术之一就是WebSocket与JavaScript的结合使用。本文将介绍WebSocket与JavaScript在实时监控系统中的应用，并给出代码示例，详细解释其实现原理。一、WebSocket技
CSV文件操作速成指南
Dec 26, 2023 pm 02:23 PM
快速学会打开和处理CSV格式文件的方法指南随着数据分析和处理的不断发展，CSV格式成为了广泛使用的文件格式之一。CSV文件是一种简单且易于阅读的文本文件，其以逗号分隔不同的数据字段。无论是在学术研究、商业分析还是数据处理方面，都经常会遇到需要打开和处理CSV文件的情况。下面的指南将向您介绍如何快速学会打开和处理CSV格式文件。步骤一：了解CSV文件格式首先，
学习PHP中如何处理特殊字符转换单引号
Mar 27, 2024 pm 12:39 PM
在PHP开发过程中，处理特殊字符是一个常见的问题，尤其是在字符串处理中经常会遇到特殊字符转义的情况。其中，将特殊字符转换单引号是一个比较常见的需求，因为在PHP中，单引号是一种常用的字符串包裹方式。在本文中，我们将介绍如何在PHP中处理特殊字符转换单引号，并提供具体的代码示例。在PHP中，特殊字符包括但不限于单引号（'）、双引号（"）、反斜杠（）等。在字符串
美团月账单明细怎么删除
Feb 23, 2024 pm 01:28 PM
美团月账单明细怎么删除?美团APP中是可以删除订单月账单明细，但是多数的用户不知道月账单明细怎么删除，接下来就是小编为用户带来的美团月账单明细删除方法图文教程，感兴趣的用户快来一起看看吧！美团使用教程美团月账单明细怎么删除1、首先打开美团APP，进入到主页面点击右下角【我的】专区选择【我的钱包】;2、之后在我的钱包页面，点击【我的账单】功能;3、然后进入到订单详情的页面，选择【快速筛选】字样;4、再然后在展开筛选菜单，点击【月付】【确定】;5、最后长按订单即可出现小窗口点击【确认】即可。
win7升级至win10失败后，如何解决？
Dec 26, 2023 pm 07:49 PM
如果我们使用的操作系统是win7的话，对于在升级的时候有的小伙伴们可能就会出现win7升win10失败的情况。小编觉得我们可以尝试重新升级看下能不能解决。详细内容就来看下小编是怎么做的吧~win7升win10失败怎么办方法一：1.建议下载个驱动人生先评估下你电脑是否可以升级到Win10，2.然后升级后用驱动人生检测下有没有驱动异常这些，然后一键修复。方法二：1.删除C:\Windows\SoftwareDistribution\Download下的所有文件。2.win+R运行“wuauclt.e
简易JavaScript教程：获取HTTP状态码的方法
Jan 05, 2024 pm 06:08 PM
JavaScript教程：如何获取HTTP状态码，需要具体代码示例前言：在Web开发中，经常会涉及到与服务器进行数据交互的场景。在与服务器进行通信时，我们经常需要获取返回的HTTP状态码来判断操作是否成功，根据不同的状态码来进行相应的处理。本篇文章将教你如何使用JavaScript获取HTTP状态码，并提供一些实用的代码示例。使用XMLHttpRequest
如何在JavaScript中获取HTTP状态码的简单方法
Jan 05, 2024 pm 01:37 PM
JavaScript中的HTTP状态码获取方法简介：在进行前端开发中，我们常常需要处理与后端接口的交互，而HTTP状态码就是其中非常重要的一部分。了解和获取HTTP状态码有助于我们更好地处理接口返回的数据。本文将介绍使用JavaScript获取HTTP状态码的方法，并提供具体代码示例。一、什么是HTTP状态码HTTP状态码是指当浏览器向服务器发起请求时，服务
