常见js知识点

缺乏、安全感 2021-12-09 22:09 697阅读 0赞

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);

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