随手记-不定期更新

求数组元素最大值及其下标

var arr = [3,6,-7,6,4,1];
console.log(Math.max.apply(null,arr));// 最大值
console.log(arr.indexOf(Math.max.apply(null,arr)));// 最大值的下标

vue监听当前URL变化

mounted() {
      const _this = this;
      // 监听URL变化
      window.addEventListener('hashchange', function(){
      	// 根据需求... 
        let obj = {
          stuuids: _this.$route.query.stuuids,// 获取URL中的新值
          accessno: _this.$route.query.accessno,
          areacode: _this.$route.query.areacode,
        };
        _this.getStudyDetails(obj);// 调用接口
      })
    },

vue监听窗口变化

data(){
	return {
		// 定义高度并设置初始值
		tableHeight: document.documentElement.clientHeight - 10
	}
},
 mounted() {
      const that = this;
      // 监听窗口变化
      window.onresize = function temp() {
      	// 重新赋值
        that.tableHeight = document.documentElement.clientHeight - 10;
      }
    },

新标签页跳转路由

	const {href} = this.$router.resolve({
            path: '/new',
            query: {
              a: 0,
              b: 1,
              c: 2
            }
          });
          window.open(href, 'windows');

position: fixed 定位可水平滚动

// header 水平滚动 absolute效果
window.onscroll=function(){
    var sl=-Math.max(document.body.scrollLeft,document.documentElement.scrollLeft);
    document.getElementById('fixed').style.left=sl+'px';
}

中文A-Z排序（限仅存在中文）

// localeCompare
	var str="红红,曹操,张三,阿里,女孩,酒肆";
    str=str.split(",");
    str.sort(function(a,b){
        return a.localeCompare(b);
    })
    console.log(str);// ["阿里", "曹操", "红红", "酒肆", "女孩", "张三"]

页面滚动条css样式修改

  ::-webkit-scrollbar {
    /*滚动条整体样式*/
    width: 4px;
    /*高宽分别对应横竖滚动条的尺寸*/
    height: 4px;
  }

  ::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    -webkit-box-shadow: #ffffff;
    background: #ffffff;
  }

  :hover::-webkit-scrollbar-thumb {
    /*滚动条里面小方块*/
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: hsla(220, 4%, 80%, .5);
  }

  ::-webkit-scrollbar-track {
    /*滚动条里面轨道*/
    /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
    border-radius: 0;
    background: rgba(0, 0, 0, 0);
  }

替换页面url不刷新页面

	// 例：http://localhost:8080/#/work/radiation?id=159116
	// 注：
    let url= window.location.href;
    let id = url.split('=')[1];
    if (url.indexOf("id") != -1) {
    	// 替换url中id不刷新页面
       history.replaceState(null, null, url.replace(id , '111111'));
    }

详见HTML5 history.pushState()和history.replaceState()新增、修改历史记录用法介绍

控制div内的滚动条的位置

	// 注：vue中使用时需要在mounted生命周期中设置
	document.getElementById('id').scrollTop = 100; // scrollTop控制垂直滚动条位置
	document.getElementById('id').scrollLeft=100; // scrollLeft控制水平滚动条位置

特殊字符正则验证

// 空格等特殊符号
let regEn = /[`~!@#$%^&*()_+<>?:"{},.\/;'[\]]/im,
          regCn = /[·！#￥（——）：；“”‘、，|《。》？、【】[\] 	]/im;

随手记-不定期更新

猜你喜欢