简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

怎么使用JS处理账单

php中世界最好的语言
发布： 2018-03-19 16:33:08
原创
1777 人浏览过

这次给大家带来怎么使用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 = &#39;<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 == &#39;.&#39;){
                    //             continue ;
                    //         }
                    //         arr.push(cm);
                    //     }
                    //     //money=[&#39;￥&#39;,&#39;1&#39;,&#39;0&#39;,&#39;8&#39;,&#39;9&#39;,&#39;0&#39;,&#39;0&#39;]
                    //     var mhtml = &#39;&#39; ;
                    //     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 ? &#39;欠&#39; : &#39;&#39;;
            n = Math.abs(n);            var s = &#39;&#39;;            for (var i = 0; i < fraction.length; i++) {
                s += (digit[Math.floor(n * 10 * Math.pow(10, i)) % 10] + fraction[i]).replace(/零./, &#39;&#39;);
            }
            s = s || &#39;整&#39;;
            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中文网其它相关文章！

推荐阅读：

Vue指令的使用

JavaScript之优化DOM

JS闭包的使用

以上是怎么使用JS处理账单的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
javascript 处理 账单
来源：php.cn
上一篇：如何理解JS匿名函数 下一篇：作用域和闭包详解
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript 我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}
来自于 2024-04-06 19:25:49
0
1
505
放大 d3.js 时散点图点不会保持值 这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...
来自于 2024-04-06 18:16:26
0
1
403
供应商特定伪元素上的 JavaScript 悬停事件 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
来自于 2024-04-06 15:35:24
0
1
274
使用 Javascript / Jquery 提交表单且不带按钮 我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行，而无需重新加载页面。不幸的是，它不断返回JavaScript...
来自于 2024-04-06 14:54:03
0
2
421
使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观 我想设置具有类collapseshow的面板的卡标题样式。在此示例中，它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...
来自于 2024-04-06 12:53:11
0
1
376
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！