CSS

让a标签失效的css写法

1
2
3
4
5
.disableCss{ /* 假设某个a标签的属性是disableCss */
pointer-events:none; /* 主要是这个的作用 */
color:#afafaf;
cursor:default; /* 默认鼠标样式 */
}

css毛玻璃问题

前端CSS要实现毛玻璃效果,可以使用filterbackdrop-filter属性,backdrop-filter兼容性更好。
但是更针对cpu的计算性能,对于一些低性能的手机或电脑,访问时则会卡顿。

阮一峰大佬的文章https://www.ruanyifeng.com/blog/2012/11/gaussian_blur.html

陈华大佬的文章http://www.ichenhua.cn/read/226

解决方法就是不要用这个属性
这个效果要用到算法,GPU的计算能力比CPU要强,有没有什么办法调GPU来渲染页面呢?
CSS会启用GPU加速的属性有这几个:translate3d、translateZ、rotate、scale,在用到 backdrop-filter:blur 的div上,加上了一个不疼不痒的属性:

1
transform: translateZ(0);

奇迹出现了,页面加载流畅了不少,而且animation的动画,也流畅了不少。虽然卡顿的问题有所缓解,但肯定还是没有自然的丝滑。

css网页变灰

1
2
3
4
5
6
7
8
9
10
11
html {
filter: gray;
-webkit-filter: grayscale(95%);
filter: grayscale(95%);
}
/* 👇 hexo butterfly博客进入首页变灰 */
#page-header {
filter: gray;
-webkit-filter: grayscale(95%);
filter: grayscale(95%);
}

css定义img的src

用于B站界面简化项目中去除广告图片替换自定义图片。

1
2
3
4
5
<style>
.test img {
content:url(https://test.png);
}
</style>

JS

js控制video播放开始时间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html> 
<html>
<body>
<button onclick="getCurTime()" type="button">获得当前时间的位置</button>
<button onclick="setCurTime()" type="button">把时间位置设置为 5 秒</button>
<video id="video1" controls="controls">
<source src="/example/html5/mov_bbb.mp4" type="video/mp4">
<source src="/example/html5/mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<script>
myVid=document.getElementById("video1");
function getCurTime()
{
alert(myVid.currentTime);
}
function setCurTime()
{
myVid.currentTime=5;
}
</script>
</body>
</html>

chatgpt版本

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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Control Video Start Time</title>
</head>
<body>
<video id="myVideo" controls>
<source src="your_video_source.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<script>
document.addEventListener("DOMContentLoaded", function() {
// 获取视频元素
const video = document.getElementById("myVideo");

// 设置视频的初始播放时间(以秒为单位)
video.currentTime = 10; // 这将从视频的第10秒开始播放
});
</script>
</body>
</html>

更多控制

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
<audio id="bgmusic" src="bgm.mp3" autoplay="autoplay" style="display: block; width: 3%; height: 3%" currentTime="20s"></audio>
<script type="text/javascript">
function toggleSound() {
var music = document.getElementById("bgmusic"); //获取ID
console.log(music);
console.log(music.paused);
if (music.paused) {
//判读是否播放
music.paused = false;
music.play(); //没有就播放
}
}
setInterval("toggleSound()", 1);
// 背景音乐开始时间
myVid = document.getElementById("bgmusic");

function setCurTime() {
myVid.currentTime = 0;
}
setCurTime();
// 背景音乐声音大小

function getVideo() {
document.getElementById("bgmusic").volume = 0.2;
}
getVideo(); //调用
</script>

控制台使用js控制当前页面视频播放速度

可以网页自定义倍速播放视频

1
2
3
4
5
6
7
8
9
10
11
// 获取当前页面上的所有视频元素
const videos = document.querySelectorAll("video");

// 设置要改变的播放速度,例如 1.5 表示 1.5 倍速度
const playbackSpeed = 1.5;

// 遍历所有视频元素并设置播放速度
videos.forEach(video => {
video.playbackRate = playbackSpeed;
});

元素div 有class属性,但这个class并非唯一 (可查看)

控制台输入

1
document.getElementsByClassName('class类名称')

获取html中的id

1
2
3
4
5
6
7
<script>

x=document.getElementById("somewords");

document.write('<p>id="somewords" 的段落中的文本是:' + x.innerHTML + '</p>');

</script>

在页面加载完毕最后再执行某js方法

遇到一个的项目,需要在页面加载数据生成节点完后执行一个方法,记录一下

1
2
3
4
5
6
7
8
9
<script>
document.onreadystatechange = function () {
if (document.readyState == "complete") {
$("#XXX").hide(); //换成自己当,比如下面的一行
var mychar = document.getElementById("SOHUCS").setAttribute("sid", "about");
//比如我这个获取已知id为SOHUCS的div,然后给它添加sid属性和值,需要放到最后,因为这个代码我是放到文章内的所以会先读取,但是id是SOHUCS的div还在id是disqus_thread的下面生成,这个disqus_thread是评论系统,会在文章生成后才执行,所以插入文章内的这个js需要最后执行
}
}
</script>

或者

1
2
3
4
5
<script>
$(window).bind("load", function () {
$("#XXX").hide();
})
</script>

让浏览器中的网页自动刷新

按键盘上F12,或者鼠标右键检查打开开发者模式,在console控制台中输入以下内容:

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
var timeout = prompt("设置刷新时间间隔[S]");
// 获取当前的URL
var current = location.href;

if(timeout > 0)
{
// 时间间隔大于0,timeout秒之后执行reload函数
setTimeout('reload()', 1000 * timeout);
}
else
{
// 时间间隔不大于0,仅刷新一次
location.replace(current);
}

function reload()
{
// timeout秒后执行reload函数,实现无限循环刷新
setTimeout('reload()', 1000 * timeout);
// 下面两行代码的格式化后的内容为:
// <frameset cols='*'>
// <frame src='当前地址栏的URL' />
// </frameset>
var fr4me = '<frameset cols=\'*\'>\n<frame src=\'' + current + '\' />';
fr4me += '</frameset>';

with(document)
{
// 引用document对象,调用write方法写入框架,打开新窗口
write(fr4me);
// 关闭上面的窗口
void(close());
};
}

还可以修改var current = location.href中的location.href,实现刷新指定页面,
eg:> var current = “https://baidu.com“

在弹出的窗口中,输入具体时间(秒),即可实现自动刷新网页

使用js在控制台多次下载文件

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
const downloadCount = 50;  // 设置下载次数
const batchSize = 5; // 每批下载数量
const fileName = '下载'; // 设置文件名
const fileUrl = '下载文件地址';

async function downloadBatch(url, filename, batchIndex) {
for (let i = 0; i < batchSize; i++) {
const response = await fetch(url);
const blob = await response.blob();
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = `${filename}_${batchIndex * batchSize + i}`;
a.click();
}
}

async function downloadFiles() {
const totalBatches = Math.ceil(downloadCount / batchSize);
for (let batchIndex = 0; batchIndex < totalBatches; batchIndex++) {
await downloadBatch(fileUrl, fileName, batchIndex);
await new Promise(resolve => setTimeout(resolve, 1000)); // 等待一段时间
}
}

downloadFiles();

不背单词发音

https://audio.beingfine.cn/speeches/US/US-speech/`+ word + `.mp3