前端工作总结

1. 关于Vue框架移动端rem布局适配问题:

现在app.vue中定义方法,代码如下:

<script>
const htmlElement = document.documentElement;
export default {
  name:'app',
  date(){
    return {
      screenWidth: 750,
    }
  },
  mounted(){
    this.remjs(htmlElement.offsetWidth);
    window.onresize = () => {
      this.screenWidth = htmlElement.offsetWidth;
    };
  },
  methods:{
    remjs( v = 750 ){ //动态改变html字体的大小
      htmlElement.style.fontSize = `${ v / 750 * 100 }px`
      // console.log( htmlElement.style.fontSize = `${ v / 750 * 100 }px` )
    }
  },
  watch:{
    screenWidth:"remjs",
  },
  
}
</script>

***注意这里要在body下面重新给页面的字体设置大小,代码中的750是根据UI设计稿件中的尺寸来计算的!

2. 将数字转换为中文的大写文字:

第一种方法:

  var units = '个十百千万@#%亿^&~', chars = '零一二三四五六七八九';
  var a = (number + '').split(''), s = []
  if (a.length > 12) {
    throw new Error('too big');
  } else {
    for (var i = 0, j = a.length - 1; i <= j; i++) {
      if (j == 1 || j == 5 || j == 9) {//两位数 处理特殊的 1*
        if (i == 0) {
          if (a[i] != '1') s.push(chars.charAt(a[i]));
        } else {
          s.push(chars.charAt(a[i]));
        }
      } else {
        s.push(chars.charAt(a[i]));
      }
      if (i != j) {
        s.push(units.charAt(j - i));
      }
    }
  }
  //return s;
  return s.join('').replace(/零([十百千万亿@#%^&~])/g, function (m, d, b) {//优先处理 零百 零千 等
    b = units.indexOf(d);
    if (b != -1) {
      if (d == '亿') return d;
      if (d == '万') return d;
      if (a[j - b] == '0') return '零'
    }
    return '';
  }).replace(/零+/g, '零').replace(/零([万亿])/g, function (m, b) {// 零百 零千处理后 可能出现 零零相连的 再处理结尾为零的
    return b;
  }).replace(/亿[万千百]/g, '亿').replace(/[零]$/, '').replace(/[@#%^&~]/g, function (m) {
    return { '@': '十', '#': '百', '%': '千', '^': '十', '&': '百', '~': '千' }[m];
  }).replace(/([亿万])([一-九])/g, function (m, d, b, c) {
    c = units.indexOf(d);
    if (c != -1) {
      if (a[j - c] == '0') return d + '零' + b
    }
    return m;
  });
}

console.log( numberChinese(123) );

第二种方法:

(123456789).toLocaleString('zh-hans-CN-u-nu-hanidec',{useGrouping:false}) //"一二三四五六七八九"

(123456789).toLocaleString('zh-hans-CN-u-nu-hanidec',{useGrouping:true}) //"一二三,四五六,七八九"

4. 将中文文字转为数字:

    const strNumber = number.toString();
    const len = strNumber.length;
    let numberCh = "";
    for(let i=0;i<len;i++){
     let currentNum = strNumber.substr(i,1);
     switch (currentNum) {
        case '0':
          numberCh += '零';
          break;
        case '1':
          numberCh += '一';
          break;
        case '2':
          numberCh += '二';
          break;
        case '3':
          numberCh += '三';
          break;
        case '4':
          numberCh += '四';
          break;
        case '5':
          numberCh += '五';
          break;
        case '6':
          numberCh += '六';
          break;
        case '7':
          numberCh += '七';
          break;
        case '8':
          numberCh += '八';
          break;
        case '9':
          numberCh += '九';
          break;
        default:
          numberCh += '*';
      }
    }
    return numberCh;
  } ```