web 各种小方法

1.获取富文本里面的src

            item.productDesc.replace(/<img [^>]*src=['"]([^'"]+)[^>]*>/g,  (match, capture) => {   

                this.infoSrc.push(capture);

            })

 

 

 

2.所有的img 标签加上一个class

        let productDesc = rsp.data.productDesc.replace(/\<img/gi, '<img class="rich-img" ');

 

 

3.css 让一个小图标闪烁，达到提醒的效果

　　1.在标签上面绑定一个calss

　　<image class=" animImage" src="/static/common/back.png"  mode=""></image>

        2.写css 样式

　　

         .animImage{
            animation:heart 1s ease infinite;
         }

  @keyframes animImage {
             0% {opacity:0.1;}
            100%{opacity:1;}
         }

 

 

 4.CSS3动画 - 心脏跳动

HTML：

 <view class="wrap2">

         <image class="img2" src="/images/common/info-02.png" />

    </view>

css:

.img2{

    width: 370rpx;

    height: 320rpx;

    animation:breathe 1s ease infinite;

  

}

@keyframes breathe {

    0%{

       transform: scale(.99);

    }

    50%{

        transform: scale(1.03);

    }

   

    100%{

        transform: scale(.99);

    }

}

 

5.获取当前页的参数

   function getUrlData() {

        console.log('window',window)

        var url = window.location.search;

        console.log('url',url)

        // let dataObj = {id:'PI1619590983971'}

        let dataObj = {}

        if (url.indexOf("?") != -1) {

             var str = url.substr(1);

             var strs = str.split("&");

             for (var i = 0; i < strs.length; i++) {

                 dataObj[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);

             }

        }

        console.log('dataObj',dataObj)

    }

6.文字悬浮效果

 <view class="tips-text letter1rpx">

            <text style="--i:2;">请</text>

            <text style="--i:3;">点</text>

            <text style="--i:4;">击</text>

            <text style="--i:5;">翅</text>

            <text style="--i:6;">膀</text>

            <text style="--i:7;">选</text>

            <text style="--i:8;">择</text>

            <text style="--i:9;">性</text>

            <text style="--i:9;">别</text>

        </view>

.tips-text{

  font-size: 14px;

  font-weight: 400;

  color: #fff;

  position: relative;

}

.tips-text text {

  position: relative;

  color: #fff;

  display: inline-block;

  text-transform: uppercase;

  animation: animate 2s ease-in-out infinite;

  animation-delay: calc(0.1s * var(--i));

  animation-play-state: running;

}

@keyframes animate {

  0%,

  40%,

  100% {

    transform: translateY(0);

  }

  20% {

    transform: translateY(-30px);

  }

}

7. 获取年月日，时分秒，周几

 

　在data 里面定义  　

   data(){

   　return{

　　　　　　

 　　　　timer: null,

      　　  nowWeek: '',

               nowDate: '',

               nowTime: '',

            }

 

　}

　在methods里写入以下方法

    setNowTimes () {

      let myDate = new Date()

      // console.log(myDate)

      let wk = myDate.getDay()

      let yy = String(myDate.getFullYear())

      let mm = myDate.getMonth() + 1

      let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate())

      let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours())

      let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes())

      let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds())

      let weeks = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']

      let week = weeks[wk]

      this.nowDate = yy + '-' + mm + '-' + dd  //年月日

      this.nowTime = hou + ':' + min + ':' + sec   //时分秒

      this.nowWeek = week  //星期几

      console.log('this.nowDate',this.nowDate, 'this.nowTime',this.nowTime, 'this.nowWeek',this.nowWeek)

    },

 　　

   mounted 钩子里面调用

　　

  mounted(){

    // window.addEventListener('scroll',this.handleScrollx,true)

　　如果需要时分秒 就可以放开时间函数，否则注释就行

    // this.timer = setInterval(() => {

      this.setNowTimes()

    // }, 1000)

  },

8.vue 获取滚动条的高度

  mounted 钩子里面调用　　　

  mounted(){

     window.addEventListener('scroll',this.handleScrollx,true)

  },

在methods里写入以下方法

   handleScrollx() {

      if (window.pageYOffset >= 108){

        // console.log('滚动高度',window.pageYOffset)

        this.fixed = true //需求

      }

      if (window.pageYOffset < 108){

        // console.log('滚动高度',window.pageYOffset)

        this.fixed = false //需求

      }

    },

 

如何把数组中多级对象的某一个属性统一改变名称

       

menu: [
{
id: 1,
title: "菜单一",
},
{
id: 2,
title: "菜单二",
},
{
id: 3,
title: "菜单三",
children: [
{
id: 4,
title: "菜单四",
},
],
},
],

我们想把所有的title属性改为text
思路：替换，需要用到字符串的replaceAll方法：replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。 所有我们需要先将对象转化成JSON字符串，用完replaceAll方法之后再转成对象
let a =  JSON.parse(JSON.stringify(this.menu).replaceAll(/title/g,'text'))

 

// 电话号码脱敏
function phoneCode(tel) {
if(!tel) return tel;
// replace() 方法用于在字符串中用一些字符替换另一些字符，或替换一个与正则表达式匹配的子串。
const phone = tel.replace(tel.substring(3,7),'****')
return phone
}
console.log(phoneCode('13586263345')) //135****3345

// 姓名脱敏
function namePrivate(name) {
if(null != name && name != undefined) {
if(name.length == 2) {
return name.substring(0,1) + '*' // 截取name的第一个字符，第二个字符变成*
} else if(name.length == 3) {
return name.substring(0,1) + '*' + name.substring(2,3) // 截取name的第一个和第三个字符，第二个字符变成*
} else if(name.length > 3) {
return name.substring(0,1) + '*' + '*' + name.substring(3,name.length) 截取第一个和大于第4个字符
}
} else {
return ''
}
}
console.log(namePrivate('王麻子')) //王*子