JS实现b站动态转发抽奖(小人数)新方案讲解

前言

B站动态转发抽奖脚本+教程 之后。
因b站数据包地址生成做了改动,猜测通过某种方式进行了加密后减去某一数值的方式。
在这里插入图片描述
原抽奖脚本难以获取全部转发者信息。
ps:即使是手动翻页记录,也无法获取所有转发者信息。即:前面的信息已不被动态页面记录。
再次提供另一种方案,可以极大程度的提高抽奖的准确性和真实性(小人数)。
为了方便我已经对代码做了整理,传送门:码云 GitHub

教程

1、访问页面

PC端打开浏览器,访问你的动态抽奖页面
在这里插入图片描述

2、打开“检查”

鼠标右键,打开“检查”,一般的快捷键都是F12
在这里插入图片描述
长这样,我们需要在console(控制台)下输入代码。
在这里插入图片描述

3、手动加载所有可加载数据

点击“转发”图标,并一直滚动到没有新数据刷新为止!
在这里插入图片描述
在这里插入图片描述

4、执行代码

获取可加载转发者的人数

在“检查”的控制台下输入以下命令,获取所有可加载转发者的人数

document.getElementsByClassName("user-name c-pointer").length

在这里插入图片描述
可以看到,2k多的转发,但是实际加载到570的时候就不能加载新数据了。

将转发者信息存入集合(集合自带去重)

在“检查”的控制台下输入以下命令,定义一个集合,叫my_set。记得按回车啊!!!

let my_set = new Set();

在这里插入图片描述
循环将数据存入集合

for(var i=0; i<document.getElementsByClassName("user-name c-pointer").length; i++)
{
	my_set.add(document.getElementsByClassName("user-name c-pointer")[i].innerText);
}

在这里插入图片描述
可以看到得到的Set在下面已经打印了,我们点击Set左侧的小三角,展开。
可以看到,我们一共获取到 249条数据,已经去重后的转发者的昵称。可以继续展开查看。
在这里插入图片描述
可以看到已经成功去重了。
在这里插入图片描述

5、抽取幸运儿

直接生成随机数并打印幸运儿

在“检查”的控制台输入以下代码,my_set.size就是 Set的长度。可以改成数字,例如:249。
这个代码会生成 0到my_set.size-1 的整数。将这个整数做为Set转Array后的下标,打印结果。

Array.from(my_set)[parseInt(Math.random()*(my_set.size),10)]

在这里插入图片描述

其他程序生成随机数进行抽取

将Set的长度记录下来,即 249名用户。
在这里插入图片描述
抽奖方式很简单,随便百度个随机数生成程序。例子:http://www.99cankao.com/numbers/random-number-generator.php
在这里插入图片描述
注意是从 0开始,到Set长度减1。
生成结果 203 后,我们继续在“检查”下的控制台下执行代码,转Set为Array,打印其值。

Array.from(my_set)[203]

在这里插入图片描述
或是直接翻开来找。
在这里插入图片描述

6、一步到位 单人中奖

console.log("程序开始运行");
console.log("定义集合存储数据");
let my_set = new Set();
var offset = document.getElementsByClassName("text-bar selected")[0].getElementsByClassName("text-offset")[0].innerText;
if(offset/20 > 25)
{
	offset = 500;
}
console.log("开始载入数据");
var my_loop;
function r()
{
	window.scroll(0, 1920*100);
}
function stop_r()
{
	clearInterval(my_loop);
}
function draw()
{
	for(var i=0; i<document.getElementsByClassName("user-name c-pointer").length; i++)
	{
		my_set.add(document.getElementsByClassName("user-name c-pointer")[i].innerText);
	}
	console.log("全部数据加载完毕");
	console.log("总共"+my_set.size+"名用户");
	console.log("中奖用户为:"+Array.from(my_set)[parseInt(Math.random()*(my_set.size),10)]);
	
}
my_loop = setInterval(r, 3000);
setTimeout(stop_r, 3000 * (parseInt(offset)/10 + 5));
setTimeout(draw, 3000 * (parseInt(offset)/10 + 6));


7、一步到位 多人中奖

在这里插入图片描述

console.log("程序开始运行");
console.log("定义集合存储数据");
let my_set = new Set();
var offset = document.getElementsByClassName("text-bar selected")[0].getElementsByClassName("text-offset")[0].innerText;
if(offset/20 > 25)
{
	offset = 500;
}
console.log("开始载入数据");
var my_loop;
function r()
{
	window.scroll(0, 1920*100);
}
function stop_r()
{
	clearInterval(my_loop);
}
function draw()
{
	// 修改num为你需要抽奖的人数
	var num = 3;
	
	for(var i=0; i<document.getElementsByClassName("user-name c-pointer").length; i++)
	{
		my_set.add(document.getElementsByClassName("user-name c-pointer")[i].innerText);
	}
	
	let num_set = new Set();
	
	while(1)
	{
		if(num_set.size >= num)
			break;
		var lucky_num = parseInt(Math.random()*(my_set.size),10);
		num_set.add(lucky_num);
	}
	
	for(var i=0; i<num; i++)
	{
		console.log("中奖用户为:"+Array.from(my_set)[i]);
	}
	
}
my_loop = setInterval(r, 3000);
setTimeout(stop_r, 3000 * (parseInt(offset)/10 + 5));
setTimeout(draw, 3000 * (parseInt(offset)/10 + 6));


8、多人数二步到位脚本

自动翻页到底部时,再输入 draw(中奖数) 回车即可

console.log("程序开始运行");
console.log("定义集合存储数据");
let my_set = new Set();

console.log("开始载入数据");
var my_loop;
function r()
{
	window.scroll(0, 1920*100);
}

function draw(num)
{
	clearInterval(my_loop);
	for(var i=0; i<document.getElementsByClassName("user-name c-pointer").length; i++)
	{
		my_set.add(document.getElementsByClassName("user-name c-pointer")[i].innerText);
	}
	console.log("全部数据加载完毕");
	console.log("总共"+my_set.size+"名用户");
	
	let num_set = new Set();
	
	while(1)
	{
		if(num_set.size >= num)
			break;
		var lucky_num = parseInt(Math.random()*(my_set.size),10);
		num_set.add(lucky_num);
	}
	
	for(var i=0; i<num; i++)
	{
		console.log("中奖用户为:"+Array.from(my_set)[i]);
	}
}
my_loop = setInterval(r, 3000);
// 当页面到底时, 输入 draw(你要抽的人的数量) 即可



  • 5
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 8
    评论
好的,下面是一个基于HTML、CSS、JS实现带有转盘的抽奖小程序的示例代码。 首先,我们需要在HTML中创建一个canvas元素,作为转盘的容器。 ```html <canvas id="canvas" width="400" height="400"></canvas> ``` 接下来,我们需要先在JS中定义一些转盘相关的变量和常量。 ```javascript var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 转盘的中心点坐标 var x = canvas.width / 2; var y = canvas.height / 2; // 转盘半径 var r = x; // 转盘的扇形数量 var sectorCount = 6; // 每个扇形的角度 var sectorAngle = Math.PI * 2 / sectorCount; // 转盘的旋转角度 var rotateAngle = 0; // 奖品名称数组 var prizeTexts = ["奖品1", "奖品2", "奖品3", "奖品4", "奖品5", "奖品6"]; ``` 然后,我们可以编写一个函数来绘制转盘的扇形和文本。 ```javascript function drawSector(startAngle, endAngle, color, text) { // 绘制扇形 ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, r, startAngle, endAngle); ctx.closePath(); ctx.fillStyle = color; ctx.fill(); // 绘制文本 ctx.save(); ctx.translate(x, y); ctx.rotate(startAngle + (endAngle - startAngle) / 2); ctx.fillStyle = "#fff"; ctx.font = "bold 20px Arial"; ctx.fillText(text, r / 2, 0); ctx.restore(); } ``` 接下来,我们可以使用该函数来绘制转盘的扇形和文本。 ```javascript for (var i = 0; i < sectorCount; i++) { var startAngle = i * sectorAngle - rotateAngle; var endAngle = (i + 1) * sectorAngle - rotateAngle; var color = i % 2 == 0 ? "#f00" : "#0f0"; var text = prizeTexts[i]; drawSector(startAngle, endAngle, color, text); } ``` 现在,我们可以编写一个函数来旋转转盘。 ```javascript function rotate() { // 每次旋转增加的角度 var deltaAngle = Math.random() * 30 + 10; // 旋转角度增加 rotateAngle += deltaAngle; // 旋转到最近的扇形中心 var sectorIndex = Math.floor(rotateAngle / sectorAngle); rotateAngle = sectorIndex * sectorAngle; // 绘制转盘 ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < sectorCount; i++) { var startAngle = i * sectorAngle - rotateAngle; var endAngle = (i + 1) * sectorAngle - rotateAngle; var color = i % 2 == 0 ? "#f00" : "#0f0"; var text = prizeTexts[i]; drawSector(startAngle, endAngle, color, text); } } ``` 最后,我们可以在HTML中添加一个按钮,当用户点击该按钮时,调用rotate()函数来旋转转盘。 ```html <button onclick="rotate()">开始抽奖</button> ``` 完整的代码如下: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>抽奖小程序</title> </head> <body> <canvas id="canvas" width="400" height="400"></canvas> <button onclick="rotate()">开始抽奖</button> <script> var canvas = document.getElementById("canvas"); var ctx = canvas.getContext("2d"); // 转盘的中心点坐标 var x = canvas.width / 2; var y = canvas.height / 2; // 转盘半径 var r = x; // 转盘的扇形数量 var sectorCount = 6; // 每个扇形的角度 var sectorAngle = Math.PI * 2 / sectorCount; // 转盘的旋转角度 var rotateAngle = 0; // 奖品名称数组 var prizeTexts = ["奖品1", "奖品2", "奖品3", "奖品4", "奖品5", "奖品6"]; function drawSector(startAngle, endAngle, color, text) { // 绘制扇形 ctx.beginPath(); ctx.moveTo(x, y); ctx.arc(x, y, r, startAngle, endAngle); ctx.closePath(); ctx.fillStyle = color; ctx.fill(); // 绘制文本 ctx.save(); ctx.translate(x, y); ctx.rotate(startAngle + (endAngle - startAngle) / 2); ctx.fillStyle = "#fff"; ctx.font = "bold 20px Arial"; ctx.fillText(text, r / 2, 0); ctx.restore(); } function rotate() { // 每次旋转增加的角度 var deltaAngle = Math.random() * 30 + 10; // 旋转角度增加 rotateAngle += deltaAngle; // 旋转到最近的扇形中心 var sectorIndex = Math.floor(rotateAngle / sectorAngle); rotateAngle = sectorIndex * sectorAngle; // 绘制转盘 ctx.clearRect(0, 0, canvas.width, canvas.height); for (var i = 0; i < sectorCount; i++) { var startAngle = i * sectorAngle - rotateAngle; var endAngle = (i + 1) * sectorAngle - rotateAngle; var color = i % 2 == 0 ? "#f00" : "#0f0"; var text = prizeTexts[i]; drawSector(startAngle, endAngle, color, text); } } </script> </body> </html> ``` 这样,我们就实现了一个简单的带有转盘的抽奖小程序。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Love丶伊卡洛斯

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值