前言
由于過去的模擬人工下拉加載資料的形式在大資料的情況下會導致頁面的卡頓和資源的大量占用，所以這期新版本提上了開發，
本次實作方式使用的b站api，構建get請求呼叫api獲取評論資訊，決議json資料存入集合，最后從集合獲取中獎者資訊，
相關API為
// 用于獲取oid
"https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/get_dynamic_detail?dynamic_id=" + dynamic_id;
/*
獲取評論資訊
jquery就是請求后面跟隨的數字（并不固定）
first_time是請求的時間戳（毫秒級）
i是頁碼（從0開始）ps:next后的i為0時不需要加1，詳細見原始碼
type是頁碼型別 自己發的動態是11，轉發的動態是17，視頻是1
oid就是頁碼的oid，為固定值
time就是實時的時間戳（毫秒級）
*/
"https://api.bilibili.com/x/v2/reply/main?callback=jQuery" + jquery + "_" + (first_time + i) + "&jsonp=jsonp&next=" + (i + 1)+ "&type=" + type + "&oid=" + oid + "&mode=3&plat=1&_=" + time;
另外請求之間有500毫秒的延時，請求過快可能會被封IP，所以不建議調的太短，
下面就開始實際使用教程，
<iframe id="Iaa1sIKZ-1628329328153" src="https://player.bilibili.com/player.html?aid=589709536" allowfullscreen="true" data-mediaembed="bilibili"></iframe>
b站動態/視頻評論區抽獎二合一 JS版本使用和講解
視頻使用講解傳送門
使用說明
動圖版
動態和視頻評論的原理類似，都是查jQuery后的數字，請仔細閱讀
1、打開動態頁面，并開啟開發者工具（F12）
選擇“Network”，檢索“JS”，然后F5或者Ctrl+R 重繪頁面
2、重繪頁面后我們下滑至評論區處，加載的JS
就是這個main打頭的，我們滑鼠左鍵點擊它
3、復制請求中的jQuery后_前的一串數字（約21位）
4、復制代碼至console（控制臺）回車
5、使用get(剛才復制的jQuery后的數字)函式，獲取評論資料等
然后回車
6、使用go(中獎人數)函式進行抽獎即可
代碼
1.0版本
console.log("定義集合存盤資料");
let name_set = new Set();
let id_set = new Set();
var oid = "";
var comment = "";
// 獲取動態的oid
function get_oid(dynamic_id)
{
var url = "https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/get_dynamic_detail?dynamic_id=" + dynamic_id;
var xmlhttp;
if(window.XMLHttpRequest)
{
//code for IE7+,Firefox,Chrome,Opera,Safari
xmlhttp = new XMLHttpRequest();
}
else
{
//code for IE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
//將接收到的字串存入str
var str = xmlhttp.responseText;
if(str.length == 0)
{
return "";
}
//console.log(str);
// 轉為JSON物件
var json = JSON.parse(str);
console.log(json);
// 決議json物件獲取對應值
oid = json["data"]["card"]["desc"]["rid"];
console.log("oid=" + oid);
}
else
{
//alert(xmlhttp.status);
}
}
else
{
//alert(xmlhttp.readyState);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
// 提前獲取oid
function oid_init()
{
var referer = window.location.href;
// 動態頁
if("t" == referer.slice(8, 9))
{
var referer2 = referer.substr(0, referer.length - 2);
var dynamic_id = referer2.replace(/[^0-9]/ig,"");
// console.log(dynamic_id);
oid = get_oid(dynamic_id);
var temp = document.getElementsByClassName("text-offset")[1].innerText;
if(temp.indexOf("萬") != -1)
{
comment = 10000 * (parseFloat(temp.slice(1, temp.length - 2)) + 0.1);
}
else
{
comment = parseInt(temp);
}
}
// 視頻頁
else
{
oid = window.aid;
console.log("oid=" + oid);
comment = parseInt(document.getElementsByClassName("b-head")[0].getElementsByClassName("results")[0].innerText);
}
console.log("comment=" + comment);
}
oid_init();
// 睡眠多少毫秒
function sleep(ms)
{
return new Promise(resolve => setTimeout(resolve, ms));
}
// 抽獎函式 例如：get(331030722370851298386)
async function get(jquery)
{
var referer = window.location.href;
var type = 11;
if("t" == referer.slice(8, 9)) type = 11;
else type = 1;
if(0 == referer.length || 0 == jquery.length || 0 == comment.length)
{
alert("請填寫完整資訊！");
return;
}
await sleep(1000);
var first_time = Math.round(new Date());
var time = 0;
var url = "";
for(var i = 0; i <= (comment-1)/20; i++)
{
if(0 == i)
{
url = "https://api.bilibili.com/x/v2/reply/main?callback=jQuery" + jquery + "_" +
(first_time + i) + "&jsonp=jsonp&next=0&type=" + type + "&oid=" + oid + "&mode=3&plat=1&_=" + (first_time + 1);
}
else
{
time = Math.round(new Date());
url = "https://api.bilibili.com/x/v2/reply/main?callback=jQuery" + jquery + "_" +
(first_time + i) + "&jsonp=jsonp&next=" + (i + 1) + "&type=" + type + "&oid=" + oid + "&mode=3&plat=1&_=" + time;
}
// 結束標志位
var end = 0;
if(i == (comment-1)/20) end = 1;
else end = 0;
get_data(url, end);
// 睡眠500毫秒 0.5秒
await sleep(500);
}
console.log("資料獲取完畢！可以呼叫go(中獎人數)進行抽獎，");
}
// 資料獲取
function get_data(url, end)
{
var xmlhttp;
if(window.XMLHttpRequest)
{
//code for IE7+,Firefox,Chrome,Opera,Safari
xmlhttp = new XMLHttpRequest();
}
else
{
//code for IE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
//將接收到的字串存入str
var str = xmlhttp.responseText;
if(str.length == 0)
{
return;
}
// console.log(str);
var len = str.length;
var str2 = str.slice(str.indexOf('(') + 1, len - 1);
// console.log(str2);
// 轉為JSON物件
var json = JSON.parse(str2);
console.log(json);
// 一組20個資料
for(var i = 0; i < 20; i++)
{
// 決議json物件獲取對應值
var mid = json["data"].replies[i]["member"]["mid"];
var uname = json["data"].replies[i]["member"]["uname"];
// 插入集合
name_set.add(uname);
id_set.add(mid);
}
if(1 == end)
{
console.log("資料獲取完畢！可以呼叫go(中獎人數)進行抽獎，");
}
}
else
{
//alert(xmlhttp.status);
}
}
else
{
//alert(xmlhttp.readyState);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
// 獲取幸運兒
function go(num)
{
for(var i = 0; i < num; i++)
{
// 生成亂數，直接列印中獎者資訊
var lucky_num = parseInt(Math.random()*(name_set.size), 10);
var id = Array.from(id_set)[lucky_num];
var name = Array.from(name_set)[lucky_num];
console.log(" ");
console.log("中獎用戶ID為:" + id);
console.log("中獎用戶名為:" + name);
console.log(" ");
id_set.delete(id);
name_set.delete(name);
}
}
console.log("貼入代碼后，使用get(jQuery后到_前的約21位字符)函式，生成URL，發送GET請求獲取資料");
console.log("資料獲取完畢后，使用go(中獎人數)即可");
1.1版本 列印資料的組號和下標，方便其余資訊查看
位置不一定剛好對上，不對就往后翻（因為重復資料被剔除了 導致資料錯位）
console.log("定義集合存盤資料");
let name_set = new Set();
let id_set = new Set();
var oid = "";
var comment = "";
// 獲取動態的oid
function get_oid(dynamic_id)
{
var url = "https://api.vc.bilibili.com/dynamic_svr/v1/dynamic_svr/get_dynamic_detail?dynamic_id=" + dynamic_id;
var xmlhttp;
if(window.XMLHttpRequest)
{
//code for IE7+,Firefox,Chrome,Opera,Safari
xmlhttp = new XMLHttpRequest();
}
else
{
//code for IE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
//將接收到的字串存入str
var str = xmlhttp.responseText;
if(str.length == 0)
{
return "";
}
//console.log(str);
// 轉為JSON物件
var json = JSON.parse(str);
console.log(json);
// 決議json物件獲取對應值
oid = json["data"]["card"]["desc"]["rid"];
console.log("oid=" + oid);
}
else
{
//alert(xmlhttp.status);
}
}
else
{
//alert(xmlhttp.readyState);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
// 提前獲取oid
function oid_init()
{
var referer = window.location.href;
// 動態頁
if("t" == referer.slice(8, 9))
{
var referer2 = referer.substr(0, referer.length - 2);
var dynamic_id = referer2.replace(/[^0-9]/ig,"");
// console.log(dynamic_id);
oid = get_oid(dynamic_id);
var temp = document.getElementsByClassName("text-offset")[1].innerText;
if(temp.indexOf("萬") != -1)
{
comment = 10000 * (parseFloat(temp.slice(1, temp.length - 2)) + 0.1);
}
else
{
comment = parseInt(temp);
}
}
// 視頻頁
else
{
oid = window.aid;
console.log("oid=" + oid);
comment = parseInt(document.getElementsByClassName("b-head")[0].getElementsByClassName("results")[0].innerText);
}
console.log("comment=" + comment);
}
oid_init();
// 睡眠多少毫秒
function sleep(ms)
{
return new Promise(resolve => setTimeout(resolve, ms));
}
// 抽獎函式 例如：get(331030722370851298386)
async function get(jquery)
{
var referer = window.location.href;
var type = 11;
if("t" == referer.slice(8, 9)) type = 11;
else type = 1;
if(0 == referer.length || 0 == jquery.length || 0 == comment.length)
{
alert("請填寫完整資訊！");
return;
}
await sleep(1000);
var first_time = Math.round(new Date());
var time = 0;
var url = "";
for(var i = 0; i <= (comment-1)/20; i++)
{
if(0 == i)
{
url = "https://api.bilibili.com/x/v2/reply/main?callback=jQuery" + jquery + "_" +
(first_time + i) + "&jsonp=jsonp&next=0&type=" + type + "&oid=" + oid + "&mode=3&plat=1&_=" + (first_time + 1);
}
else
{
time = Math.round(new Date());
url = "https://api.bilibili.com/x/v2/reply/main?callback=jQuery" + jquery + "_" +
(first_time + i) + "&jsonp=jsonp&next=" + (i + 1) + "&type=" + type + "&oid=" + oid + "&mode=3&plat=1&_=" + time;
}
// 結束標志位
var end = 0;
if(i == (comment-1)/20) end = 1;
else end = 0;
console.log("資料組" + i + "，【" + (i*20) + "-" + ((i+1)*20-1) + "】");
get_data(url, end);
// 睡眠500毫秒 0.5秒
await sleep(500);
}
console.log("資料獲取完畢！可以呼叫go(中獎人數)進行抽獎，");
}
// 資料獲取
function get_data(url, end)
{
var xmlhttp;
if(window.XMLHttpRequest)
{
//code for IE7+,Firefox,Chrome,Opera,Safari
xmlhttp = new XMLHttpRequest();
}
else
{
//code for IE6,IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function()
{
if(xmlhttp.readyState == 4)
{
if(xmlhttp.status == 200)
{
//將接收到的字串存入str
var str = xmlhttp.responseText;
if(str.length == 0)
{
return;
}
// console.log(str);
var len = str.length;
var str2 = str.slice(str.indexOf('(') + 1, len - 1);
// console.log(str2);
// 轉為JSON物件
var json = JSON.parse(str2);
console.log(json);
// 一組20個資料
for(var i = 0; i < 20; i++)
{
// 決議json物件獲取對應值
var mid = json["data"].replies[i]["member"]["mid"];
var uname = json["data"].replies[i]["member"]["uname"];
// 插入集合
name_set.add(uname);
id_set.add(mid);
}
if(1 == end)
{
console.log("資料獲取完畢！可以呼叫go(中獎人數)進行抽獎，");
}
}
else
{
//alert(xmlhttp.status);
}
}
else
{
//alert(xmlhttp.readyState);
}
}
xmlhttp.open("GET", url, true);
xmlhttp.send();
}
// 獲取幸運兒
function go(num)
{
for(var i = 0; i < num; i++)
{
// 生成亂數，直接列印中獎者資訊
var lucky_num = parseInt(Math.random()*(name_set.size), 10);
var id = Array.from(id_set)[lucky_num];
var name = Array.from(name_set)[lucky_num];
console.log(" ");
console.log("中獎下標為:" + lucky_num + "，位于第" + parseInt(lucky_num/20) + "資料組");
console.log("中獎用戶ID為:" + id);
console.log("中獎用戶名為:" + name);
console.log(" ");
// 不要去重可以注釋掉下面2行
id_set.delete(id);
name_set.delete(name);
}
}
console.log("貼入代碼后，使用get(jQuery后到_前的約21位字符)函式，生成URL，發送GET請求獲取資料");
console.log("資料獲取完畢后，使用go(中獎人數)即可");
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/292513.html
標籤：其他
上一篇：webpack學習整理（基礎）