CSS 让a标签失效的css写法 1 2 3 4 5 .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网页变灰 1 2 3 4 5 6 7 8 9 10 11 html { filter : gray; -webkit-filter : grayscale (95% ); filter : grayscale (95% ); } #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" ); 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" ); } } </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]" );var current = location.href ;if (timeout > 0 ){ setTimeout ('reload()' , 1000 * timeout); } else { location.replace (current); } function reload ( ){ setTimeout ('reload()' , 1000 * timeout); var fr4me = '<frameset cols=\'*\'>\n<frame src=\'' + current + '\' />' ; fr4me += '</frameset>' ; with (document ) { 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