web一些常用函数与笔记

。。。真实做项目中会遇到一些需求，需要一定的算法或者某些函数来解决

1.求数组交集
let arr1 =[0,2,4,5,7]
let arr2 = [0,3,5,6,8,4,9,55]
var newarr = arr1 .filter((v) => arr2 .includes(v))
//也可以用,不考虑(数组中不含NaN)
newarr = arr1.filter((v)=> arr2.indexOf(v)>-1 )
//filter方法是返回一个符合过滤条件的新数组，不改变原有的数组


2.求数组并集
arr1.concat(arr2.filter(function(v) {
return arr1.indexOf(v) === -1})) // [1,2,3,4,5]


3.求多维数组合并一维
var arr1 = [[0, 1], [2, 3], [4, 5]];
var arr2 = arr1.reduce(function (a, b) { return a.concat(b)} );
// arr2 [0, 1, 2, 3, 4, 5]


4.求字符串数组转整型
var arr2 = ["0", "1", "2", "3", "4", "5"];
var arr3 = arr2.map(Number);
console.log(arr3);//输出为：[0, 1, 2, 3, 4, 5]


5.数组去重
Array.from方法用于将两类对象转为真正的数组；
Set类似于数组，但是本身没有重复值
[...]扩展运算符 用于展开数组
1.Array.from(new Set(arr))
2.[...new Set(arr)]
3.indexOf(i) 小于0 说明不存在重复

6.二分查找法

// 给定一个有序（非降序）数组，可能含有重复元素，求最小的i使得A[i]等于target，不存在则返回-1
        // target = 7 ,return 5
        // target = 8, return -1
        function binary_search (arr , item){
            let low = 0
            height = arr.length - 1
            while(low < height){
                let mid = parseInt((height + low) / 2)
                let guess = arr[mid]
                if(guess == item){
                    return mid
                }else if(guess > item){
                    height = mid - 1
                }else{
                    low = mid + 1
                }
            }
            return -1
        }
        let myArr = [1,2,3,5,6,7,7,10]
        console.log(binary_search(myArr,7));   // 最后输出的是7对应的索引下标 5
        console.log(binary_search(myArr,8));   // 找不到8 输出的是 -1

vue.js–动态更改css

检测表单是否输入，如果有输入 进入watch，newVal获取最新值，btnActive = true，则butsubFocus 属性选择器css生效，否则使用默认的butsub;
<input type="button" value='立即注册' class='butsub' @click="submit()" :class="{ 'butsubFocus': btnActive }">

data() {
    return {
      btnActive: false,
    }
  },

watch: {
    mobile(newVal, oldVal) {
      // watch可以监听一些状态发生更改的时候，做一些处理，修改状态，或者异步操作
      newVal != '' ? this.btnActive = true : this.btnActive = false;
    }
  },


 .butsub {
      background: #E4E5E6;
      color: #959697;
    }


 .butsubFocus {
      background: #7094F0;
      color: #FFFFFF
    }

vue.js–css操作xx时间内不允许点击

<div class="audioWrap" @click="musicPlay()" ref="audioRef" v-if="show">
            <p class="audioText">{{audioNumber}}' 
              <span class="voiceBox">
                <img src="@/images/report/voice2.png" alt="" class="voiceImg" ref="iconRef">
              </span>
            </p>
        </div>

audioNumber:'14',
audioState:false,
 musicPlay(){
      let time = this.audioNumber * 1000
      if(this.audioState == false){
        this.audioState = true;
        this.musicStatus.play();
        this.$refs.audioRef.style.pointerEvents='none'
      }
      if(this.audioState == true){
        setTimeout(()=>{
          this.audioState = false
          this.$refs.audioRef.style.pointerEvents='auto'
        },time)
      }
    },

vue.js–语音聊天喇叭动态换图

 changeIconPic(){
      var imgArr = ["https://file.coralwin.cn/2205241635527682983.png","https://file.coralwin.cn/2205241636102714284.png","https://file.coralwin.cn/2205241636226383410.png"];
      //创建一个变量，用来保存当前图片的索引
      var index = 0;
      //定义一个变量，用来保存定时器的标识
      var timer;
      //在开启定时器之前，需要将当前元素上的其他定时器关闭
      clearInterval(timer);
      /*
           * 开启一个定时器，来自动切换图片
           */
          timer = setInterval(()=>{
            //使索引自增
            index++;
            //判断索引是否超过最大索引
            if(index > imgArr.length){
              //则将index设置为0
              index = 3;
              clearInterval(timer);
            }
            this.$refs.iconRef.src= imgArr[index - 1]
          },1000);
    },

audio操作相关

放到mounted里面
this.audio = new Audio()
      this.audio.src = this.src
      this.audio.addEventListener('canplaythrough', () => {
        this.duration = this.format(this.audio.duration)
      })
      this.audio.onplay = () => {
        this.animate = true
        this.timer = setInterval(() => {
          this.animate = false
          setTimeout(() => {
            this.animate = true
          }, 50)
        }, 1250);
      }
      this.audio.onpause = () => {
        this.animate = false
        this.timer && clearInterval(this.timer)
      }
      this.audio.onended = () => {
        this.animate = false
        this.timer && clearInterval(this.timer)
      }
      window.audioList.push(this.audio) //所有实例加入全局变量
      console.log(window.audioList)
    },
    methods: {
      play() {
        if (this.audio.paused) {
          this.audio.play()
        } else {
          window.audioList.forEach(audio => { //开始前先关闭所有可能正在运行的实例
            audio.pause()
          })
        }
      },
      format(s) {
        var t = '';
        if (s > -1) {
          var min = Math.floor(s / 60) % 60;
          var sec = s % 60;

          if (min < 10) {
            t += "0";
          }
          t += min + "'";
          if (sec < 10) {
            t += "0";
          }
          t += sec.toFixed(2);
        }
        // eslint-disable-next-line no-useless-escape
        t = t.replace('.', '\"')
        return t;
      },

子盒子撑开父盒子css

原则：
1.父盒子不要设置高度，默认高度height:auto;
2.子盒子要有明确的宽高，且子盒子是 块级元素(既 float: left;)
3.最后要在父盒子下，(子盒子的兄弟节点，添加标签)
<div class="clearfloat"></div>
  .clearfloat{
    clear:both;
    height:0;
  }

css padding与margin

eg:
padding: 20px;（上、下、左、右各20px。）
padding: 20px 40px;（上、下20px；左、右40px。）
padding: 20px 40px 60px;（上20px；左、右40px；下60px。）
padding: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）
在css中使用padding可以将padding-top，padding-right，padding-bottom，padding-left，缩写为一个标记，顺序为上右下左（顺时针）。

margin: 20px;（上、下、左、右各20px。）
margin: 20px 40px;（上、下20px；左、右40px。）
margin: 20px 40px 60px;（上20px；左、右40px；下60px。）
margin: 20px 40px 60px 80px;（上20px；右40px；下60px；左80px。）
在css中使用margin可以将margin-top，margin-right，margin-bottom，margin-left，缩写为一个标记，顺序为上右下左（顺时针）。