常用的方法

2019-05-16  本文已影响0人  余音绕梁_0809

1、解决iOS视频默认全屏播放

//video添加属性:
x5-playsinline="true" webkit-playsinline="true" playsinline="true"

2、在每个字符后面,添加一个字符‘/’

      function getString(str) {
            arr = str.split('');
            for (let i = 0; i arr[i] = arr[i] + "/"
            };
            arr2 = arr.join('').split('');
            if (arr2.length > 0) {
                arr2 = arr2.join('').substr(0, arr2.length - 1);
            }
            return arr2
        }
        var str = '美食计是傻子';
        getString(str)
        console.log(getString(str))

3、超出用省略号显示

//spanText这个是文本内容 如果一开始就是一个字符串,就不用将值赋给字符串了
hideText(spanText,num){
var str = spanText;
var len=str.length
if(len>num){
var str2="";
str2=str.substring(0,num)+"..."; 
}else{
str2 = str;
}
return str2 
}

4、 获取地址栏参数

//name  地址栏的参数名
  GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg); //search,查询?后面的参数,并匹配正则
      if (r != null) return r[2];
            return null;
  }

5、Vue中设置时间倒计时(日期格式)

//isEnd: false, //倒计时是否结束
// endTime: '', //应为接口获取到的结束时间
// time: {
//     D: '',
//     h: '',
//     m: '',
//     s: ''
// },
//以上三个变量,在vue的data中设置
        //设置倒计时
        setEndTime() {
            var that = this;
            // 先调用一次,保证页面在初始化的时候,倒计时就显示
            that.timestampToTime();
            that.interval = setInterval(that.timestampToTime, 1000);
        },
        // 格式化日期
        timestampToTime() {
            var that = this;
            //兼容ios的日期格式
            that.endTime = that.endTime.replace(/-/g,'/');
            var date = (new Date(that.endTime)) - (new Date()); //计算剩余的毫秒数
            if (date <= 0) {
                that.isEnd = true;
                clearInterval(that.interval)
            } else {
                that.time.D = parseInt(date / 1000 / 60 / 60 / 24, 10);
                that.time.h = parseInt(date / 1000 / 60 / 60 % 24, 10);
                if (that.time.h < 10) {
                    that.time.h = "0" + that.time.h
                }
                that.time.m = parseInt(date / 1000 / 60 % 60, 10); //计算剩余的分钟
                if (that.time.m < 10) {
                    that.time.m = "0" + that.time.m
                }
                that.time.s = parseInt(date / 1000 % 60, 10); //计算剩余的秒数 
                if (that.time.s < 10) {
                    that.time.s = "0" + that.time.s
                }
            }
        }

6、设置html文件title标签中的值

//GetQueryString('title')获取地址栏的参数值
document.title = decodeURIComponent(GetQueryString('title'))

7、日期格式转换为 距离当前时间 多久了

        getTimeData(dataTime) {
             var currentTime = new Date().getTime();
             let forwardTime;
             var seconds = parseInt((currentTime - dataTime * 1000) / 60000);
             if (seconds < 1) {
                 forwardTime = '1分钟前'
             } else if (seconds < 60 && seconds > 1) {
                 forwardTime = seconds + '分钟前'
             } else if (seconds > 60 && seconds < 1440) {
                 forwardTime = parseInt(seconds / 60) + '小时前'
             } else if (seconds > 1440) {
                 forwardTime = parseInt(seconds / 1440) + '天以前'
             }
             return forwardTime
         }

8、上拉加载

//获取滚动条当前的位置 
  getScrollTop() {
      var scrollTop = 0;
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
      } else if (document.body) {
        scrollTop = document.body.scrollTop;
      }
      return scrollTop;
    },

    //获取当前可视范围的高度 
    getClientHeight() {
      var clientHeight = 0;
      if (document.body.clientHeight && document.documentElement.clientHeight) {
        clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
      } else {
        clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
      }
      return clientHeight;
    },

    //获取文档完整的高度 
    getScrollHeight() {
      return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    },

 //滚动事件触发
  window.addEventListener('scroll', () => {
    if (this.getScrollTop() + this.getClientHeight() == this.getScrollHeight()) {
        //上拉之后的js代码,写在这
       。。。。
    }
  })

9、运行vue-cli的项目

10、vue_cli项目

1、去除路由跳转url后面默认的

image.png
在index.js文件中实例化路由时,添加mode属性 mode: 'history',
image.png

2、解决页面跳转之后当前页面依旧保持原页面的可视区域,不能从当前页面的顶部开始预览

在index.js文件中实例化路由时,添加方法 scrollBehavior 图片如上图,代码如下:

scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 }
    }
  }

11、怎么让position:fixed相对于父元素定位

position:fixed 正常来说是相对于浏览器窗口定位的,如何让position:fixed 相对于父元素定位?
给父元素加上 transform: scale(1,1)或者是别的,只要transform 的属性不是none就行

上一篇下一篇

猜你喜欢

热点阅读