0%

需求

css 隐藏滚动条

实现

1
2
3
::-webkit-scrollbar {
display:none
}

写了一个意想不到的 bug,输出结果是[[0, 11], ......]

1
2
3
4
5
6
7
8
9
10
11
let array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
let test = [0, 1];
let list = [];

for (let index = 0; index < array.length; index++) {
const element = array[index];
test[1] = element;
list.push(test);
}

console.log(list);

修复方法,简单的拷贝一下

1
list.push([...test]);

这个方法非常巧妙,把滚动条上下滚动改为了左右移动

https://dev.to/juanbelieni/how-to-create-horizontal-scroll-with-mouse-wheel-using-javascript-4cm5
https://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/
https://stackoverflow.com/questions/11700927/horizontal-scrolling-with-mouse-wheel-in-a-div
https://stackoverflow.com/questions/12916289/how-to-trigger-javascript-mouse-scroll-wheel-on-a-divs-horizontal-scrollbar

1
2
3
4
5
6
7
8
9
let element = document.querySelector('.recommendation-content');

element.addEventListener('wheel', (event) => {
event.preventDefault();

element.scrollBy({
left: event.deltaY < 0 ? -30 : 30,
});
});
阅读全文 »

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
let father = document.querySelector('.recommendation-content');
// 判断鼠标是否按下
let isMouseDown = false;
// 记录Y轴滚动距离
let scrollTop = 0;
// 记录X轴滚动距离
let scrollLeft = 0;
// 记录鼠标落点X坐标
let startX = 0;
// 记录鼠标落点Y坐标
let startY = 0;

father.addEventListener('mousedown', e => {
// 修改按下状态
isMouseDown = true;
// 记录按下鼠标的位置, 用于计算鼠标的移动距离
startX = e.offsetX;
startY = e.offsetY;
});
father.addEventListener('mousemove', e => {
// 判断鼠标移动时是否处于按下状态
if (isMouseDown) {
// 获取鼠标按下后移动的距离
let offsetX = e.offsetX - startX;
let offsetY = e.offsetY - startY;

// 横向可移动的最大距离
let limitX = father.scrollWidth - father.offsetWidth;
// 纵向可移动的最大距离
let limitY = father.scrollHeight - father.offsetHeight;
// PS: 需要注意的是当鼠标向上移动时, 滚动条应该向下移动, 所以这里都是减去的移动距离
scrollTop = scrollTop - offsetY;
scrollLeft = scrollLeft - offsetX;
// 将计算后的距离赋值给滚动条
father.scrollTop = scrollTop;
father.scrollLeft = scrollLeft;

if (scrollTop >= limitY) {
// 当滑块移动到底端时
scrollTop = limitY;
} else if (scrollTop <= 0) {
// 当滑块移动到顶端时
scrollTop = 0;
}

if (scrollLeft >= limitX) {
// 当滑块移动到左侧时
scrollLeft = limitX;
} else if (scrollLeft <= 0) {
// 当滑块移动到右侧时
scrollLeft = 0;
}
}
})

father.addEventListener('mouseup', () => {
isMouseDown = false;
})
阅读全文 »

用笨办法正则移除常见的中文标点符号

1
2
3
4
str.replace(
/[\u3002|\uff1f|\uff01|\uff0c|\u3001|\uff1b|\uff1a|\u201c|\u201d|\u2018|\u2019|\uff08|\uff09|\u300a|\u300b|\u3008|\u3009|\u3010|\u3011|\u300e|\u300f|\u300c|\u300d|\ufe43|\ufe44|\u3014|\u3015|\u2026|\u2014|\uff5e|\ufe4f|\uffe5]/g,
''
);

时间转换函数,挺好使的

简单实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
function GetTime (time) {
// di作为一个变量传进来
// 如果时间格式是正确的,那下面这一步转化时间格式就可以不用了
var dateBegin = new Date(time.replace(/-/g, '/')) // 将-转化为/,使用new Date
var dateEnd = new Date() // 获取当前时间
var dateDiff = dateEnd.getTime() - dateBegin.getTime() // 时间差的毫秒数
var dayDiff = Math.floor(dateDiff / (24 * 3600 * 1000)) // 计算出相差天数
var leave1 = dateDiff % (24 * 3600 * 1000) // 计算天数后剩余的毫秒数
var hours = Math.floor(leave1 / (3600 * 1000)) // 计算出小时数
// 计算相差分钟数
var leave2 = leave1 % (3600 * 1000) // 计算小时数后剩余的毫秒数
var minutes = Math.floor(leave2 / (60 * 1000)) // 计算相差分钟数
// 计算相差秒数
// var leave3 = leave2 % (60 * 1000) // 计算分钟数后剩余的毫秒数
// var seconds = Math.round(leave3 / 1000)
if (dayDiff >= 7) {
return time.replace(/-/g, '/')
}
if (dayDiff > 0) {
return dayDiff + '天前'
}
if (hours > 0) {
return hours + '小时前'
}
if (minutes > 0) {
return minutes + '分钟前'
}
return '刚刚'
// return seconds + '秒前'
// console.log(" 相差 " + dayDiff + "天 " + hours + "小时 " + minutes + " 分钟" + seconds + " 秒")
// console.log(dateDiff + "时间差的毫秒数", dayDiff + "计算出相差天数", leave1 + "计算天数后剩余的毫秒数", hours + "计算出小时数", minutes + "计算相差分钟数", seconds + "计算相差秒数");
}

来源

网上抄的 - https://www.cnblogs.com/yu-shang/p/11730295.html

这是建立在同源的前提下的

1
<iframe v-if="$attrs.visible" ref="iframe" :src="iframeUrl" width="100%" height="100%" frameborder="0" :class="$style.iframe" @load="iframeLoaded" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
// The real load method
iframeLoaded () {
this.iframeReady = false

const document = this.$refs.iframe.contentWindow.document
if (!document) return
console.log(`document`, document)
const styleElem = document.createElement('style')

styleElem.innerHTML = `
::-webkit-scrollbar {
width: 7px;
height: 5px;
border-radius:15px;
-webkit-border-radius: 15px;
}
::-webkit-scrollbar-track-piece {
background-color: #ffff;
border-radius:15px;
-webkit-border-radius: 15px;
}
::-webkit-scrollbar-thumb:vertical {
height: 5px;
background-color: rgba(144, 147, 153, 0.5);
border-radius: 15px;
-webkit-border-radius: 15px;
}
::-webkit-scrollbar-thumb:horizontal {
width: 7px;
background-color: rgba(144, 147, 153, 0.5);
border-radius: 15px;
-webkit-border-radius: 15px;
}
`
document.head.appendChild(styleElem)

console.log('iframe loaded')
}
1
2
3
4
5
6
7
8
9
10
11
12
13
<style module lang="scss">
.iframe {
border:none;
body {
::-webkit-scrollbar-thumb {
background-color: #EFEFF0;
border: 1px solid transparent;
background-clip: padding-box;
border-radius: 5px;
}
}
}
</style>

记一下格式化时间算法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
function srtTimestamp(params) {
let milliseconds = params;
let seconds = Math.floor(milliseconds / 1000);
let minutes = Math.floor(seconds / 60);
let hours = Math.floor(minutes / 60);
milliseconds = milliseconds % 1000;
seconds = seconds % 60;
minutes = minutes % 60;
return (
(hours < 10 ? '0' : '') +
hours +
':' +
(minutes < 10 ? '0' : '') +
minutes +
':' +
(seconds < 10 ? '0' : '') +
seconds +
',' +
(milliseconds < 100 ? '0' : '') +
(milliseconds < 10 ? '0' : '') +
milliseconds
);
}

function inputToSRT(params, index) {
return (
index +
1 +
'\r\n' +
srtTimestamp(params.startTime) +
' --> ' +
srtTimestamp(params.endTime) +
'\r\n' +
params.text +
'\r\n\r\n'
);
}

记一下异常数据提取算法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
const outlierDetector = (collection) => {
const size = collection.length;

let q1, q3;

if (size < 2) {
return collection;
}

const sortedCollection = collection.slice().sort((a, b) => a - b);

if (((size - 1) / 4) % 1 === 0 || (size / 4) % 1 === 0) {
q1 =
(1 / 2) *
(sortedCollection[Math.floor(size / 4) - 1] +
sortedCollection[Math.floor(size / 4)]);
q3 =
(1 / 2) *
(sortedCollection[Math.ceil((size * 3) / 4) - 1] +
sortedCollection[Math.ceil((size * 3) / 4)]);
} else {
q1 = sortedCollection[Math.floor(size / 4)];
q3 = sortedCollection[Math.floor((size * 3) / 4)];
}

const iqr = q3 - q1;
const maxValue = q3 + iqr * 1.5;

return sortedCollection.filter((value) => value >= maxValue);
};

同一个浏览器打开多个页面,页面之间通信方法

Broadcast_Channel_API

1
2
3
4
5
6
7
8
// 连接到广播频道
var bc = new BroadcastChannel('test_channel');
// 发送简单消息的示例
bc.postMessage('This is a test message.');
// 简单示例,用于将事件打印到控制台
bc.onmessage = function (ev) { console.log(ev); }
// 断开频道连接
bc.close()

还有其他方法 https://juejin.cn/post/6844903811232825357