CSS

让a标签失效的css写法

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

css毛玻璃问题

前端CSS要实现毛玻璃效果，可以使用filter和backdrop-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网页变灰

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站界面简化项目中去除广告图片替换自定义图片。

<style>
    .test img {
  		  content:url(https://test.png);
   		 }
</style>

CSS content 属性 | 菜鸟教程 (runoob.com)

https://www.runoob.com/cssref/pr-gen-content.html

JS

js控制video播放开始时间

<!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版本

<!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>

更多控制

<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控制当前页面视频播放速度

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

// 获取当前页面上的所有视频元素
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

<script>

x=document.getElementById("somewords");

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

</script>

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

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

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

或者

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

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

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

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在控制台多次下载文件

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();