前端开发技术难点汇总（三）

1. 每隔数位添加字符 每隔三位数加 ‘,’

FormatNum(str) {
       var num = "" + str
       var newNum = ""
       var count = 0
       if (num.indexOf(".") == -1) {
           for (var i = num.length - 1; i >= 0; i--) {
               if (count % 3 == 0 && count != 0) {
                   newNum = num.charAt(i) + "," + newNum
               } else {
                   newNum = num.charAt(i) + newNum
               }
               count++
           }
           num = newNum
       } else {
           for (var i = num.indexOf(".") - 1; i >= 0; i--) {
               if (count % 3 == 0 && count != 0) {
                   newNum = num.charAt(i) + "," + newNum
               } else {
                   newNum = num.charAt(i) + newNum
               }
               count++
           }
           num = newNum + (num + "00").substr((num + "00").indexOf("."), 3)
       }
       return num
   }

2. toFixed 4舍5入 5不入的bug

     let a = 1.265;
	 console.log(a.toFixed(2));// 1.26
	 if(!Number.prototype._toFixed){
	 	   Number.prototype._toFixed = Number.prototype.toFixed
	 }
	 Number.prototype.toFixed = function(n) {
	 	return (this + 1e-14)._toFixed(n)
	 } 
	 let b = 1.265;
	 console.log(b.toFixed(2));// 1.27

3. 金额转换为大写汉字

// 2342424.2424
// 贰佰叁拾肆万贰仟肆佰贰拾肆元贰角肆分贰毫肆厘
 convertCurrency(money) {
	        money = String(money)
	        if (money.indexOf('.') > -1) {
	            money = money.replace(/[,]/g, "")
	        }
	        //汉字的数字
	        var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
	        //基本单位
	        var cnIntRadice = new Array('', '拾', '佰', '仟');
	        //对应整数部分扩展单位
	        var cnIntUnits = new Array('', '万', '亿', '兆');
	        //对应小数部分单位
	        var cnDecUnits = new Array('角', '分', '毫', '厘');
	        //整数金额时后面跟的字符
	        var cnInteger = '整';
	        //整型完以后的单位
	        var cnIntLast = '元';
	        //最大处理的数字
	        var maxNum = 999999999999999.9999;
	        //金额整数部分
	        var integerNum;
	        //金额小数部分
	        var decimalNum;
	        //输出的中文金额字符串
	        var chineseStr = '';
	        //分离金额后用的数组，预定义
	        var parts;
	        if (money == '') {
	            return '';
	        }
	        money = parseFloat(money);
	        if (money >= maxNum) {
	            //超出最大处理数字
	            return '';
	        }
	        if (money == 0) {
	            chineseStr = cnNums[0] + cnIntLast + cnInteger;
	            return chineseStr;
	        }
	        //转换为字符串
	        money = money.toString();
	        if (money.indexOf('.') == -1) {
	            integerNum = money;
	            decimalNum = '';
	        } else {
	            parts = money.split('.');
	            integerNum = parts[0];
	            decimalNum = parts[1].substr(0, 4);
	        }
	        //获取整型部分转换
	        if (parseInt(integerNum, 10) > 0) {
	            var zeroCount = 0;
	            var IntLen = integerNum.length;
	            for (var i = 0; i < IntLen; i++) {
	                var n = integerNum.substr(i, 1);
	                var p = IntLen - i - 1;
	                var q = p / 4;
	                var m = p % 4;
	                if (n == '0') {
	                    zeroCount++;
	                } else {
	                    if (zeroCount > 0) {
	                        chineseStr += cnNums[0];
	                    }
	                    //归零
	                    zeroCount = 0;
	                    chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
	                }
	                if (m == 0 && zeroCount < 4) {
	                    chineseStr += cnIntUnits[q];
	                }
	            }
	            chineseStr += cnIntLast;
	        }

	        //小数部分
	        if (decimalNum != '') {
	            var decLen = decimalNum.length;
	            for (var i = 0; i < decLen; i++) {
	                var n = decimalNum.substr(i, 1);
	                if (n != '0') {
	                    chineseStr += cnNums[Number(n)] + cnDecUnits[i];
	                }
	            }
	        }

	        if (chineseStr == '') {
	            chineseStr += cnNums[0] + cnIntLast + cnInteger;
	        } else if (decimalNum == '') {
	            chineseStr += cnInteger;
	        }
	        return chineseStr;
	    }

4. vue 轮播广告的点击事件失效

<swiper :options="swiperOption" ref="mySwiper" class="banner" v-if='listShow'>
            <swiper-slide class="swiper-slide" v-for="(item,index) in bannerList" :key="index">
              <img :src="item.picurl">
            </swiper-slide>
            <div class="swiper-pagination pagination" slot="pagination"></div>
</swiper>
swiperOption: {
        autoplay: {
          disableOnInteraction: false,
          delay: 3000
        },
        speed: 2000,
        loop:true,
        on:{
          click: function(){
            const realIndex = this.realIndex;
            vm.handleClickSlide(realIndex);  // 方法
          }
        },
        grabCursor: true,
        autoHeight: true,
        scrollbar: '.swiper-scrollbar',
        mousewheelControl: true,
        observeParents: true,
        pagination: {
          el: '.swiper-pagination',
          clickable :false,
        },
      }

5. 获取URL的参数

getUrlParms(name){
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)
       return unescape(r[2]);
     return null;
   }

6. 图片转base64

imgToBase64(){
	// 将图片url转为base64
	    function getBase64Image(img) {
	      var canvas = document.createElement("canvas");
	      canvas.width = img.width;
	      canvas.height = img.height;
	      var ctx = canvas.getContext("2d");
	      ctx.drawImage(img, 0, 0, img.width, img.height);
	      var ext = img.src.substring(img.src.lastIndexOf(".")+1).toLowerCase();
	      var dataURL = canvas.toDataURL("image/"+ext);
	      return dataURL;
	    }
	     var imgLink = 'http://128.128.98.65:8081/book/mini/img/nav01.png';
	    var tempImage = new Image();
	    tempImage.src = imgLink;
	    tempImage.setAttribute("crossOrigin",'Anonymous');
	    console.log("tempImage",tempImage)
	    tempImage.onload = () => {
	      var base64 = getBase64Image(tempImage);
	      // this.setData({
	      //   testImgBase: base64
	      // })
	      console.log('base64', base64.slice(0, 50) + '......');
	      let fixedBase64 = base64.slice(base64.indexOf('base64,') + 7)
	      console.log('fixedBase64', fixedBase64.slice(0, 50) + '......') 
	    }
   }