js实用函数
1.批量设置元素属性，代码将所有视频音频图片设置属性，添加控制按钮，设定宽度不超过屏幕 setAttr
点击查看代码
let medias = [];
let tagAttr = {
'video': { 'width': '100%', 'controls': 'true' },
'audio': { 'controls': 'true' },
'img': { 'width': '100%' }
}
for (let tag of Object.entries(tagAttr)){
console.log(tag )
tags=document.querySelectorAll(tag[0])
medias=medias.concat(tags)
setAttr(tags,tag[1])
}
function setAttr(nodes, attr) {
nodes.forEach ((node,index)=>
Array.from( Object.entries(attr)).forEach((key,index)=>node.setAttribute(key[0], key[1]))
)
}
let x=medias[0][0].width
2.获取链接 含有特定字符串 filter
点击查看代码
let links_page = Array.from(document.querySelectorAll('a')).filter((node) => { return node.href.includes('pn') })
x = links_page[0]
3.浏览器存储本地数据 用于站内传递数据（如详情页下一个播放） 获取preview类标签，个数多需要存储，少读取。localStorage
点击查看代码
let previews = document.querySelectorAll('.preview')
let previewsList, previewsDict;
if (previews.length > 5) {
// id api 字典
previewsDict = {};
previewsList = new Array();
[].forEach.call(previews, (node) => {
let src = node.src;
let id = node.dataset.id;
let url;
url = '/detail?id=' + id
previewsDict[id] = url
previewsList.push(id)
})
previewsDict['index'] = previewsList
localStorage.setItem('preLink', JSON.stringify(previewsDict))
}
else {
previewsDict = JSON.parse(localStorage.getItem('preLink'));
previewsList = previewsDict['index']
}
4.点击元素网页跳转 承接3自由变量
点击查看代码
previews.forEach((node)=> {
node.addEventListener('click', (e) => {
let id = e.target.dataset.id;
window.location.href = `/detail?id=${id}`
})
})
5.表单搜索 拼英输入结束自动跳转到搜索页 argsGet
点击查看代码
let prefixSearch='&search='
let idSearch="#search"
let rePrefixSearch=/&search=[^&]*/
// let idSearch="#sb_form_q"
// let prefixSearch='search?q='
let formInput = document.querySelector(idSearch);
// 表单内容搜索
function toUrlSearch() {
// ele.preventDefault()
let base = location.href.replace(rePrefixSearch, '')
base = base.replace(/pn=\d+/, '')
let s = prefixSearch + formInput.value
if (s)
window.location.href = base + s
}
function argsGet(url){
if(!url)
url=location.search
if (url.includes('?'))
url = url.split('?')[1]
const urlSearchParams = new URLSearchParams(url)
const result = Object.fromEntries(urlSearchParams.entries())
return result
}
if (formInput) {
// 请求参数写入表单
document.addEventListener('DOMContentLoaded', ()=>{
let r=argsGet()
if (r.search) {
formInput.value = r.search
}
})
// 打字结束自动搜索
formInput.addEventListener("compositionend", toUrlSearch);
}
点击查看代码
let buttnons = document.querySelectorAll("button.send_href");
buttnons.forEach((node) => {
node.addEventListener('click', (e) => {
e.preventDefault()
let tag=e.target
let id = tag.dataset.id
tag.style.backgroundColor = 'blue'
if (!id)
return
let url = '/api/like?id=' + id
fetch(url)
.then(response => response.json())
.then(result => {
// 返回值处理 变色链接
let rtext = JSON.stringify(result);
if (rtext.includes('删除'))
tag.style.backgroundColor = 'white'
else
tag.style.backgroundColor = 'red'
})
})
})
点击查看代码
nclickEvent(3, document, (e)=> {
let id = GetRequest(location.search).id
if (id && location.href.includes('detail')) {
let clickY = e.clientY
let mediaY;
for (let i = 0; i < medias.length; i++) {
try {
mediaY = medias[i][0].getBoundingClientRect().y
break
}
catch {
}
}
let plus = 1
if (clickY < mediaY)
plus = -1
let index = previewsList.indexOf(id)
if (index === previewsList.length)
index = 0
let url = previewsDict[previewsList[index + plus]]
window.location.href = url
}
})
// 对象绑定 多击事件
function nclickEvent(n, dom, fn) {
dom.removeEventListener('dblclick', null);
var n = parseInt(n) < 1 ? 1 : parseInt(n),
count = 0,
lastTime = 0;//用于记录上次结束的时间
var handler = function (event) {
var currentTime = new Date().getTime();//获取本次点击的时间
count = (currentTime - lastTime) < 300 ? count + 1 : 0;//如果本次点击的时间和上次结束时间相比大于300毫秒就把count置0
lastTime = new Date().getTime();
if (count >= n - 1) {
fn(event);
count = 0;
}
};
dom.addEventListener('click', handler);
}
8.音乐播放控制
play,pause,click
节点node属性 data-desc='desc' 获取方法node.dataset.desc
f2=f1.bind(1) 参数覆盖this 使用f2时this=2
HTML定义
点击查看代码
<a href="" id="tip" s>
<h1>now play </h1>
</a>
<div style="min-height:100px"> </div>
<button id="next"> 下一首</button>
<button id="acc" style="width:100px"> 跳跃</button>
<button id="pre"> 上一首</button>
<button id="stop"> 暂停</button>
点击查看代码
let audios = document.querySelectorAll('audio')
// 检测到音频触发
if (document.querySelectorAll('audio')[0]) {
let btnNext = document.querySelector('#next')
let btnPreview = document.querySelector('#pre')
let btnAcc = document.querySelector('#acc')
let musicTipJunmp = document.querySelector('#tip')
let btnStop = document.querySelector('#stop')
let lastPlay;
// 播放停止其他 显示当前播放
audios.forEach( (i)=> {
i.addEventListener("play", pauseAllOther );
i.addEventListener('play', showTips);
i.addEventListener('pause', (e)=>lastPlay=e.target);
})
// 功能按钮
btnNext.addEventListener('click', nextPlay.bind(1))
btnPreview.addEventListener('click', nextPlay.bind(2))
btnAcc.addEventListener('click', nextPlay.bind(3))
btnStop.addEventListener('click', pauseAll )
// 将audios中其他的audio全部暂停
function pauseAllOther( ) {
var self = this;
audios.forEach( (i)=> i !== self && i.pause() )
}
// 全部暂停 记录当前播放对象备播放
function pauseAll( ) {
var flag =true;
audios.forEach( (i)=> {
if (!i.paused){
lastPlay=i
i.pause()
flag=false}
})
if (flag)
lastPlay.play()
}
// 提示当前播放信息
function showTips() {
var self = this;
audios.forEach( (i)=>{
// 将audios中其他的audio全部暂停
if (!i.paused) {
musicTipJunmp.querySelector('h1').textContent = i.dataset.desc
musicTipJunmp.href = '#' + i.id
}
})
}
// 顺序播放 前后
function nextPlay( ) {
let choice = this.valueOf()
let flag = 1
for (let i = 0; i < audios.length; i++) {
if (!audios[i].paused) {
let nextIndex = i
if (choice === 3) {
audios[i].currentTime = audios[i].currentTime + 3
break
}
else if (choice === 1) {
nextIndex++
}
else
nextIndex--
if (nextIndex === audios.length)
nextIndex = 0
else if (nextIndex === -1)
nextIndex = audios.length - 1
audios[nextIndex].play()
flag = 0
break
}
}
if (flag && choice === 2)
audios[audios.length - 1].play()
else if (flag && choice === 1)
audios[0].play()
}
}
9.获取网页中的磁力链接
匹配所有数字字母组成的40字符串拼接前缀,加入集合去重
点击查看代码
function magGet(){
let reg=/[0-9a-fA-F]{40}/g
let content=document.querySelector('body').innerText;
let mags='';
let r=content.match(reg)
let rset=new Set(r)
rset.forEach(mag=> mags+='magnet:?xt=urn:btih:'+mag+'\n' )
return mags
}
10.下载页面所有音乐
监听按钮
遍历所有audio元素，获取元素的链接src 与文件名进行下载
下载时fetch请求数据 blob获取二进制数据，将数据转化为下载链接 js模拟点击下载
点击查看代码
$(btn2).click(()=>{
audios.forEach((node) => {
var name = node.dataset.desc
var src = window.location.origin + node.getAttribute('src')
downloadMp3(src, name)
})
})
function downloadfile(url, name) {
fetch(url).then(res => res.blob()).then(blob => {
const a = document.createElement('a');
document.body.appendChild(a)
a.style.display = 'none'
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = name;
a.click();
document.body.removeChild(a)
window.URL.revokeObjectURL(url);
});
}
11.鼠标停顿隐藏
使用场景：播放视频时 鼠标影响观感
定位节点，监听鼠标移动，1.移动时显示鼠标 2.设置定时器5s后隐藏鼠标
使用jquery 获取对象，额外提供了实用的方法。
设置css属性控制鼠标显示 1.cursor: '' 2.cursor: 'none'
点击查看代码
var timer;
var tagObj=$('.file')
tagObj.mousemove(function () {
tagObj.css({
cursor: ''
});
timer = setTimeout(function () {
tagObj.css({
cursor: 'none'
});
}, 5000)
12 高亮当前页链接
使用场景：导航栏多个链接 进入相应页链接后，链接高亮
定位多个链接 运行js 当前页的pathname与链接的相同添加active属性，否则查看是否有active属性 有则去除
细节：
$('a.nav-link') 返回获取的节点和统一方法，使用方法可以批量设置。也可遍历，提供索引与节点信息
a节点可以直接获取href链接的各部分如node.pathname
点击查看代码
let pname=location.pathname
$('a.nav-link').each((index,node)=>
{ if (pname===node.pathname )
node.classList.add('active')
else if(node.classList.contains('active'))
node.classList.remove("active");
})
