版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/zqian1994/article/details/82863287
- 求数组元素最大值及其下标
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;