美文网首页
常用的方法

常用的方法

作者: 余音绕梁_0809 | 来源:发表于2019-05-16 14:24 被阅读0次

    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的项目

    • 检查电脑是否有node 和 npm
      node -v /npm -v
    • 安装node.js
      官网下载安装即可
      https://nodejs.org/en/download/
    • 安装淘宝镜像
      npm install -g cnpm --registry=https://registry.npm.taobao.org
      mac安装失败的解决方法:
      sudo npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose
    • 安装配置项
      cnpm install
    • 运行vue项目
      npm run dev

    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就行

    相关文章

      网友评论

          本文标题:常用的方法

          本文链接:https://www.haomeiwen.com/subject/lpbmjqtx.html