常见js知识点

1.当一个图片与一行文字需要水平垂直居中时，给图片img设置属性vertical-align:middle;

2.ToFixed()四舍五入为指定小数 

   （parseInt(this.num)*this.pric).toFixed(2).将金额保留两位小数

3.对象字符串之间的转换

    对象转字符串   JSON.stringify(obj)

  字符串转对象   JSON.parse(str)

4.字符串拼接

   （var).join(",")

5.input框只能输入数字的控制

  pc   οnkeyup=“this.value=this.value.replace(/^(0+)|[^\d]+/g,")"    onafterpaste="this.value=this.value.replace(/^(0+)[^\d]+/g,")"

 手机端   οninput="this.value=this.value.replace(/\D/g,")"

6.js实现每四位用“：”隔开

 var  num1="4262079669"

var num2=num1.replace(/(.{4})/g,"$1:")

7.删除数组中指定的某个元素

arr.splice(1,2)表示从第二个开始，删除长度为2

arr.splice(0,1)表示删除第一个元素

8.获取当前年与日的时间

let date=new Date();

let Y=date.getFullYear()+'-';

let M=(date.getMonth()+1<10?'0'+(date.getMonth()+1:date.getMonth()+1)+'-';

let D=(date.getDate()<10?'0'+date.getDate():date.getDate())+'-';

let datedata=Y+M+D;

9.js获取前一个月的时间

let dayMonths=[0,31,28,31,30,31,30,31,31,30,31,30,31]

let Y=date.getFullYear();

let M=date.getMonth()+1;

let D=date.getDate();

if(((Y%4)===0)&&((Y%100)!==0)||((Y%400)===0)){

dayMonths[2]=29;

}

if(M-1===0){

Y-=1;

M=12;

}else{
M-=1;

}

D=Math.min(D.dayMonths[M]);

if(M<10){
M='0'+M;

}
if(D<10){
D='0'+D}
this.datastr=Y+'-'+M+'-'+D;

10.vue页面之间传参数

  1>参数在url中显示

2>this.$route.params.参数名

3>this.$route.query.参数名

传值段：this.$router.push({path:"/url",query:{res:JSON.stringify(res)}})

接收端   this.data=JSON.parse(this.$router.query.res);

11.判断输入框是否为空

valueEmpty(){

let isEmpty=true

if(this.data.userName==" "||this.data.userName==null){

isEmpty=false

Toast('姓名不能为空')

}else if(this.data.idNo==" "||this.data.idNo==null){

isEmpty=false

Toast('证件号码不能为空')

}else if(this.data.mobilPahone==" "||this.data.mobilPahone==null){

isEmpty=false

Toast(手机号码不能为空')

}

return isEmpty;

}

在方法中判断

函数名(){

if(this.valueEmpty()){
//执行输入不为空的代码

}
}

 

{

　　path:'/paramsUrl/:name/:age/:sex',
　　component:paramsUrl
}

 

12.substr的用法(   加密手机号或卡号)
     let data=6217908500001625652
     let data2= (data).substr(0,4)+'****'+'****'+(data).substr(12)
     data2=6217********5652
截取卡后四位
     let data=6217908500001625652
      let data2=(data).substr((data).length-4)
     data2=5652
13.vuejs 60s后获取验证码
 页面
  <label>短信验证码</label>
  <input type="text" style="width:130px;" placeholder="请输入短信验证码"v-model="data.identcode" />
   <mt-button type="danger" :disabled="disabled" @click="send">  {{content}}   </mt-button>

  script
  data(){
    rurn{  
            disabled:false,
            content:'获取验证码',
            totaltime:60,
            clickCancle:true,
        }
     }
方法
//验证手机号码部分
      send(){
        if(!this.clickCancle) return;
        this.clickCancle=false;
        this.content=this.totaltime+'s后重新发送';
        let m=setInterval(()=>{
          this.totaltime--;
          this.content=this.totaltime+'s后重新发送';
          if(this.totaltime==0){
            clearInterval(m);
            this.content='发送验证码';
            this.totaltime=60;
            this.clickCancle=true;
          }
        },1000)
      },
   14.在给一个列表中的li设置底边线,除了最后一个li
    .list li:not(:last-child){
    border-bottom: 1px solid #eee;
    }

  15.date=20150908   转换为2015-09-08
 this.date=this.date.substr(0,4)+"-"+this.date.substr(4,2)+"-"+this.date.substr(6,2);
16.var a="2018-09"   输出  a=201809
var b=a.replace(/-/g,"")
17.当input框聚焦时清空input中的value值
 id="search" @focus="foucksclick" 
方法
 foucksclick(){
        let search=document.getElementById("search");
        search.value=" ";
    },

18.金额分割符号

    //金额分割符
           moneysplit(value){
            //    value=100.00;
               if(!value) return '0.00';
               1.let intpart=Number(value).toFixed(0);

             2.  let intpart=Number(value);
                intpart=Math.floor(intpart);

               let intpartFormat=intpart.toString().replace(/(\d)(?=(?:\d{3})+$)/g,'$1,');
               let float='.00';
               let value2=value.split('.');
               if(value2.length==2){
                   float=value2[1].toString();
                   if(float.length==1){
                       return intpartFormat+'.'+float+'0';
                   }else{
                       return intpartFormat+'.'+float;
                   }
               }else{
                   return intpartFormat+float;
               }
           },

19.身份证的校验
 let cardright=/^[1-9]\d{5}(18|19|20)d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)d{3}[0-9Xx]$/;

20.标题超出规定长度 ,用省略号
style="width:60px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis"
21.oried属性打不上时用此

 style="text-align:center;line-height:middle"

22.在vue项目中,给一个div设置背景的方式 有两种,鼠标点上时给此div设置一个背景颜色
    1>以类的方式
 页面 
 <div style=" v-for="item in list1" :key="item.id" :class="choosedata == item.year_month?'active':''"   @click="chooseMonth(item)">
  </div>
   . small-img{display: block;width: 0.25rem;height: 0.25rem;position: absolute;top: 0.07rem;left:     0.2rem;background: url('~@/assets/icon/s_s_part_icon.png');background-size: 100%;}
   .active{background: #C9161E;color: #fff;border-radius: 0.1rem;}
    .active div{color: #fff;}
     .active .small-img{background: url('~@/assets/icon/s_s_part_icon.png');background-size: 100%;}
  2>在data中设置   
       data(){
        return{
         note:{
            backgroundImage:"url("+require("@/assets/icon/nocard.png")+")",
            backgroundRepeat:'no-repeat',
            backgroundPosition:"center",   
            backgroundSize:'7.02rem 2.81rem',
          },}}
23.判断一个字符串中是否存在一个字符串
string  st1="ab";
string st2="abcd";
 if(str.indexOf(st1)>=0){
     syso("字符串str中包含st1）；
}

if(str.indexOf(st2)==-1){
  syso("字符串中不包含st2")}
24..flex-orient属性不管用时，在package.json中添加
 "iOS>=6",
    "Android>4.1",
    "Firefox>20"
25.当一条记录与后面的记录的时间不能重复时，需要删除后面添加的那条记录
1》先写第一条记录时
   //单个月份
        returnDatesingle(v){
           this.datetime2 = v;
          //单个月份的缴费时间
           this.userdate= this.datetime2 
        //多个月份中的数据
            let list=this.personList;
       //单个月已经交了的月份
            let oldDate=new Date(this.userdate);
            let oldYaer=oldDate.getFullYear(),oldMonth=oldDate.getMonth();
            let newArr=[],obj={};
            for(let i=0;i<list.length;i++){
                let newDate=new Date(list[i].favoreevaliduntil);
                let newYaer=newDate.getFullYear(),newMonth=newDate.getMonth();
                if(newYaer == oldYaer && newMonth ==oldMonth){
                    MessageBox({
                    message : "缴纳月份重复，请重新选择",   
                        confirmButtonText : "确定",
                    }).then(action =>{
                        if(action == 'confirm'){
                        this.personList.splice(i,1);
                        this.personList = [...this.personList];
                        }
                    })
                }
            }
            this.personList=[...this.personList] 
        },
2》当后写后面的记录，两者做判断
 //更多月时间
    returnDateGet1(v,index){
        this.personList[index] = {
            ...this.personList[index],
            favoreevaliduntil : v
        }
        //缴纳更多月，与已缴月份比较
        let list=this.personList;
        let oldDate=new Date(this.userdate);
        let oldYaer=oldDate.getFullYear(),oldMonth=oldDate.getMonth();
        let newArr=[],obj={};
        let oldLen=list.length;
        for(let i=0;i<list.length;i++){
            let newDate=new Date(list[i].favoreevaliduntil);
            let newYaer=newDate.getFullYear(),newMonth=newDate.getMonth();
            if(newYaer == oldYaer && newMonth ==oldMonth){
                MessageBox({
                    message : "缴纳月份重复，请重新选择",   
                        confirmButtonText : "确定",
                    }).then(action =>{
                        if(action == 'confirm'){
                        this.personList.splice(index,1);
                        this.personList = [...this.personList];
                        }
                    })
            }
            if(!obj[list[i].favoreevaliduntil]){
                newArr.push(list[i])
                obj[list[i].favoreevaliduntil] = true
            }
        }
        if(oldLen != newArr.length){
            // Toast("日期不能重复！")
            MessageBox({
                message : "缴纳月份重复，请重新选择",   
                    confirmButtonText : "确定",
                }).then(action =>{
                    if(action == 'confirm'){
                    this.personList = [...newArr]
                    this.jsMoney()
                    }
                })
        }
        this.personList = [...newArr]
    },
26.对金额的失焦补点
   //金额校验       
    addAmount(amount){ 
    let regfund = amount;
    if(/^([0-9]{1,16}[.][0-9]{2})$/.test(regfund)){ 
        return true;
    }else if(/^([0-9]{1,16}[.][0-9]{1})$/.test(regfund)){
        this.moneymem = regfund+"0";
        return true;
    }else if(/^([0-9]{1,16})$/.test(regfund)) {
        this.moneymem = regfund+".00";
        return true;
    }
    },

27.mint-ui的swipe轮播，上下数据需要统一时，
              <mt-swipe :auto="0"  ref="swpie" :showIndicators="false"  @change="handlechange" >
                <mt-swipe-item class="slide1 leftd"  v-for="(item,index) in cardNolist" :key="index"  >
                <div class="cart note" :style="note" >
                  
                 </div>  
                </mt-swipe-item>
                </mt-swipe>
  //在滑动的函数中，将index传下去，利用index绑定数据
      handlechange(index){
           this.cardNo=this.cardNolist[index].cardNo
           this.queryfive()
        },

28.vue项目的相关结构搭建
  
   访问的时候，先进入index.html ,加载页面，加载到div页面时，会自动加载app模块（vue项目中的每一个页面都是一个组件模块）
     在app中有 <template> <div id="app" class="app"><router-view /> </div></template>    而<router-view /> 会自动去找路由文件
    在router中  import Vue from 'vue'
      import Router from 'vue-router'
       Vue.use(Router)
      import {commonMenu} from "../views/menu"
     export default new Router({
       mode: 'hash',
       base: process.env.BASE_URL,
        linkActiveClass: 'actives',
      linkExactActiveClass: 'active',
             routes: [
        ...commonMenu, 
        {
                         name: 'demo',
         path: '/',
          //alias:"/",    //别名
        component: () => import(/* webpackChunkName: "v_detailHome" */'@/views/demo'),
        meta : { title : 'demo' }
        },
          ]
        })
这就是整个vue项目的访问过程
总结vue项目中重要的文件夹
  index.html (项目的入口文件）
   App.vue（项目的总模块）
  main.js（项目的公共样式，js，组件等引入的地方

29.re m px
  1rem=50px 
30.扫一扫
 <img  @click="scanCode" src="@/assets/images/business-02.png" alt="" class="fr img-size">

在方法中
  scanCode(){
            let _this = this
            //拉起微信扫一扫
            wx.ready(function(){
                wx.checkJsApi({
                    jsApiList:['scanQRCode'],
                    success:function(res){
                        if(res.checkResult.scanQRCode === true){
                            wx.scanQRCode({ //微信扫一扫接口
                                needResult:1,//默认为0，扫描结果由微信处理，1则直接返回扫描结果
                                scanType:['qrCode','barCode'],//可以指定扫描二维码还是一维码，默认二者都有
                                success:function(res){
                                    let result = res.resultStr;//当needresult为1时，扫码返回的结果
                                    if(result.indexOf("http") != -1){
                                        let CifNo = result.substring((result.indexOf("?")+1));
                                        result = CifNo;
                                    }
                                    _this.businessCode =  result;//赋值给输入框
                                }
                            })
                        }else{
                            alert('抱歉，当前客户端版本不支持扫一扫');
                        }
                    },
                    fail:function(res){ //检测getNetworkType该功能失效时处理
                        alert('fail' + res)
                    }
                });
            });
            wx.error(function(res){
                alert("出错了："+ res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可
            })
        },
30.限制四位
       imgCodeFun(e){
              this.imgCode = e.target.value.replace(/[^\d]/g,'');
             if(this.imgCode.length>4){
                this.imgCode=this.imgCode.substr(0,4)
                return ;
             }
         },
31.返回的字符串中有特殊字符时，可以根据特殊字符截取取值
     this.shop_Cate_Names='llnnbbADbvcsl/测试sw01/9999/社区养老驿站/居家养老服务/养老特惠     商户/唐柯（测试）/孙巍测试'
      let aa = []
     aa =this.shop_Cate_Names.split('/')
 截取后的aa=?["llnnbbADbvcsl", "测试sw01", "9999", "社区养老驿站", "居家养老服务", "养老特惠商              户", "唐柯（测试）", "孙巍测试"]
   aa =this.shop_Cate_Names.split('/')[0]
   aa= llnnbbADbvcsl
复制一个订单号的功能
Vue页面    orderInfo.sub_order_id为待复制的数据
 <input type="text" v-model="orderInfo.sub_order_id" id="copyInput" readonly style="height:0px;opacity:0;display:block">
方法clickCopyFun触发复制事件
<li class="flex-justify-align">
<div class="flex-start">
<label>订单编号</label>
<p class="autowrap">{{orderInfo.sub_order_id}}</p>
</div>
<div class="txt-red van-button--danger mainBack pad-lr" @click="clickCopyFun">复制</div>
</li>

Method中的复制方法
clickCopyFun(){
let copyInput = document.getElementById("copyInput")
copyInput.select()
document.execCommand("Copy")
this.$toast("已复制") 
}
 
33.vue项目刷新当前页面的几种方式
  1>go(0)和reload()
    通过location.reload()或是this.$router.go(0)两种强制刷              新方式，相当于按F5，会出项瞬间的白屏，体验差
   2>定义一个空白路由页面，路由跳转到该空白页立马跳回当前页，实现路由刷新。
34.v-if与v-show的区别
   最大差别对于dom的操作，v-if会依照条件决定是否将原件渲染至网页上，v-show则是必定会产出原件，但以条件来切换css的显示与否，若以条件改变频率，用v-show来切换更合适

35.解决跨域的六种方法
跨域由于浏览器的同源策略，协议、域名、端口其中一个不一致就会出现
1.JSONP跨域
JSONP（填充式JSON），JSON与JSONP的区别，JSON返回的是一串数据，JSONP返回的是脚本代码，JSONP只支持get请求
JSONP的应用技巧：
  在HTML标签里，一些标签比如script、img这样的获取资源的标签是没有跨域限制的
  2.CORS跨域
  后端修改请求头
  header('Access-Control-Allow-Origin:*')
  允许访问的地址
  header('Access-Control-Allow-Methods:POST,GET')允许访问的方式
 3.nginx反向代理
35.html css的一些常用写法
  css超出一行显示省略号
  给定宽度 width:100px
  超出隐藏：overflow:hidden
  强制在同一行显示：white-space：nowrap
  省略号：text-overflow:ellipsis
36.常见的字体单位
   1.em相当于倍，在父元素的基础上增加多少倍
   2.rem r是root，始终根据html根元素的大小进行缩放
   3.vh 和%单位一致  不同点：%在没有内容的时候设置height:100%不会被撑开，但是vh会撑开
   4.vw视窗宽度  1vw=视窗宽度的1% 1vw就是当前屏幕的宽度1%
所以出现50vw比50%大
37.常见的转义字符
   &gt 大于号  &lt小于号  &quot双引号  &copy 版本符号
38.常见css属性
   首行缩进  text-indent 2em/2px缩进2个字符
    font:italic(normal oblique) blod(bloder更粗) 36px "宋体"   
39.浏览器兼容前缀
   -moz-  火狐   -webkit-谷歌 safari
-o-Opera  -ms-  IE