magnet单页搜索
本帖最后由 wushaominkk 于 2020-1-4 13:46 编辑<!DOCTYPE html>
<html lang="en">
<head>
<title>磁力搜索</title>
<meta charset="UTF-8">
<meta name="referrer" content="never">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" sizes="16x16" href="https://www.w3school.com.cn/ui2019/logo-16-red.png">
<link href="http://as8282530.tx115.5644.pw/magnet-search/magnet.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script src="https://cdn.bootcss.com/axios/0.19.0-beta.1/axios.min.js"></script>
</head>
<body>
<div class="container">
<h3>磁力搜索</h3>
<div class="search">
<span>
<input type="search" placeholder="热门电影" ref="getValue" @keyup.13="page=1;Search(page)">
<b title="搜一搜" @click="page=1;Search(page)">🔍</b>
</span>
</div>
<div class="content" v-if="moves.length>0">
<table class="tab">
<tr>
<th>文件名</th>
<th>大小</th>
<th>时间</th>
<th>hash</th>
</tr>
<tr v-for="v in moves">
<td style="word-wrap:break-word;word-break:break-all;">{{ v.title }}</td>
<td>{{ v.size }}</td>
<td>{{ v.time }}</td>
<td style="min-width:600px;text-align: left;font-size: 20px">
{{ v.hash }}
<button class="devent" type="button" @click="onCopy">复制</button>
<a target="_parent" class="devent" :href="'magnet:?xt=urn:btih:'+v.hash">下载</a>
<input type="text" style="width:0.1px;opacity: 0" :value="'magnet:?xt=urn:btih:'+v.hash">
</td>
</tr>
</table>
<div class="page">
<span>
<p v-show="page>1" @click="upPage">上一页</p>
<input type="number" :value="page" ref="getPage">
<p @click="goPage">跳转到</p>
<p @click="nextPage">下一页</p>
</span>
</div>
</div>
<!-- 遮罩层-->
<div class='popContainer' v-show="isShow">
<img src="http://p1.so.qhimgs1.com/t018ed31e07232c223d.jpg">
</div>
<!-- 消息层-->
<div class='popMsg' :style="style" v-text="msg"></div>
</div>
<script type="text/javascript">
async function search(name,page){
let url = `http://as8282530.tx115.5644.pw/magnet-search/search.php?name=${name}&page=${page}`;
let res = await axios.get(url);
return res.data
}
let vm = new Vue({
el:'.container',
data:{
page: 1,//显示的是哪一页
isShow:false,
moves:[],
nowPage:1,
msg:"",
style:{
opacity: 0
}
},
methods: {
sendMsg:function(message){
this.msg = message;
this.style.opacity = 0.9;
let timeout = setTimeout(() => {
this.style.opacity = 0;
clearTimeout(timeout);
},1500)
},
Search:function(_Page){
this.isShow = true;
let words = this.$refs.getValue.value;
search(words,_Page).then(res => {
let data = res.message;
this.isShow = false;
if(data.length<1){
this.sendMsg("✉ 已经是最后一页了");
this.page=this.nowPage;
return
};
this.moves= data;
//this.maxPage = res.data.totalPage
document.querySelector("div.content").scrollTop = 0
}).catch(err => {
this.isShow = false;
})
},
onCopy:function(e){
e.target.parentElement.querySelector("input").select();
document.execCommand("Copy");
this.sendMsg("✉ 已复制到剪切板!");
},
upPage:function(){
this.nowPage = this.page;
this.page--;
this.Search(this.page)
},
nextPage:function(){
this.nowPage = this.page;
this.page++;
this.Search(this.page)
},
goPage:function(){
this.nowPage = this.page;
this.page = this.$refs.getPage.value;
this.Search(this.page)
}
}
})
</script>
</body>
</html>
最近看到论坛有这方面的帖子，所以动手写了一下
js + css + html
借用了vue，可能IE不支持
方便一下需要的同学，页面布局随便弄的
美工好的同学自己美化一下
虚拟主机 php做了一个简单的接口，然后跨域
自己测试了一下，还可以。
撸码不易，动动手指给个好评！！！
https://ps.ssl.qhmsg.com/t021d945c80145091cf.jpg
补充补充 ： 记得改一下文件后缀 .html 我觉得可以找个美工来 谢谢分享。以后不用满世界找单个视频一一下载了。 优秀，码住 谢谢分享。:loveliness:
页:
[1]