🌈据说，看我文章时 关注、点赞、收藏 的 帅哥美女们 心情都会不自觉的好起来。
前言：
🧡作者简介：大家好我是 user_from_future ，意思是 “ 来自未来的用户 ” ，寓意着未来的自己一定很棒~
✨个人主页：点我直达，在这里肯定能找到你想要的~
👍专栏介绍：猿人学WEB题目专解 ，提供猿人学WEB题目总计20题的解题思路与方法，如有讲述错误，请不吝赐教。
想看往期历史文章，可以浏览此博文： 历史文章目录，后续所有文章发布都会同步更新此博文~
题目网址
题目详情
让我们计算所有数字的 加和。
题目思路
第一步仍然打开开发者工具并刷新，让网页完整的加载出来，发现这里是用一堆 base64 编码的图片进行数字显示的：
然后我们去看下网页元素：
好嘛，一个4个数字组成的单元格，出现了10个 img 标签，当然里面有6个是 display:none 修饰的，其他位置的排放或多或少还要看 left 的心情了。
我们在看看这题中 api 的请求结果：
发现他直接返回了单元格的源代码，我们需要对里面的每个 td 标签单独分析。
好，首先我们先写一个获取到第一页数据的代码：
import requests
headers = {
'cookie': 'sessionid=mcec97dnwqd02lvfrlsk7m2l0hk4x9w0',
'User-Agent': 'yuanrenxue.project'
}
for index in range(1, 6):
url = f"https://match.yuanrenxue.com/api/match/4?page={index}"
res = requests.get(url, headers=headers).json()
print(res)
break
执行后得到：{'status': '1', 'state': 'success', 'key': '1adWKmstpw', 'value': 'kmIn2f3y8I', 'iv': 'jgwsn', 'info': '<td>...</td> * 10'}
由于 info 里的数据太多，所以我这省略了。
然后我们从网页上加载的图片入手，把每个数字保存在一个字典里，做好对应的映射关系：
{'data:image/png;base64,XXX': '0', 'data:image/png;base64,XXX': '1', 'data:image/png;base64,XXX': '2', 'data:image/png;base64,XXX': '3', 'data:image/png;base64,XXX': '4', 'data:image/png;base64,XXX': '5', 'data:image/png;base64,XXX': '6', 'data:image/png;base64,XXX': '7', 'data:image/png;base64,XXX': '8', 'data:image/png;base64,XXX': '9'}
接着我们用 BeautifulSoup 解析我们的 infro 字符串：
import requests
from bs4 import BeautifulSoup
headers = {
'cookie': 'sessionid=mcec97dnwqd02lvfrlsk7m2l0hk4x9w0',
'User-Agent': 'yuanrenxue.project'
}
css_dict = {'data:image/png;base64,XXX': '0', 'data:image/png;base64,XXX': '1', 'data:image/png;base64,XXX': '2', 'data:image/png;base64,XXX': '3', 'data:image/png;base64,XXX': '4', 'data:image/png;base64,XXX': '5', 'data:image/png;base64,XXX': '6', 'data:image/png;base64,XXX': '7', 'data:image/png;base64,XXX': '8', 'data:image/png;base64,XXX': '9'}
for index in range(1, 6):
url = f"https://match.yuanrenxue.com/api/match/4?page={index}"
res = requests.get(url, headers=headers).json()
for td in BeautifulSoup(res['info'], 'lxml').find_all('td'):
for img in td.find_all('img'):
print(img)
break
看看他返回了什么：
乍一看，所有值我们都获取到了，我们打印一下所有数字，发现数字都可以正常的出来，但是这也包含了那些 display:none 修饰的图片，再往上一步的图片一看，好家伙，class 里有两个值，其中一个是混乱的值，应该就是他控制着 display:none 样式，我们回到浏览器开发者工具，发现他用 key 和 'value 处理了 display:none 的设置：
在他的上方有 md5 的加密函数，直接看也看不出有没有魔改：
var hexcase = 0;
var b64pad ="";
var chrsz = 8;
function hex_md5(s) {
return binl2hex(core_md5(str2binl(s), s.length * chrsz))
}
function b64_md5(s) {
return binl2b64(core_md5(str2binl(s), s.length * chrsz))
}
function str_md5(s) {
return binl2str(core_md5(str2binl(s), s.length * chrsz))
}
function hex_hmac_md5(key, data) {
return binl2hex(core_hmac_md5(key, data))
}
function b64_hmac_md5(key, data) {
return binl2b64(core_hmac_md5(key, data))
}
function str_hmac_md5(key, data) {
return binl2str(core_hmac_md5(key, data))
}
function md5_vm_test() {
return hex_md5("abc") == "900150983cd24fb0d6963f7d28e17f72"
}
function core_md5(x, len) {
x[len >> 5] |= 0x80 << ((len) % 32);
x[(((len + 64) >>> 9) << 4) + 14] = len;
var a = 1732584193;
var b = -271733879;
var c = -1732584194;
var d = 271733878;
for (var i = 0; i < x.length; i += 16) {
var olda = a;
var oldb = b;
var oldc = c;
var oldd = d;
a = md5_ff(a, b, c, d, x[i + 0], 7, -680876936);
d = md5_ff(d, a, b, c, x[i + 1], 12, -389564586);
c = md5_ff(c, d, a, b, x[i + 2], 17, 606105819);
b = md5_ff(b, c, d, a, x[i + 3], 22, -1044525330);
a = md5_ff(a, b, c, d, x[i + 4], 7, -176418897);
d = md5_ff(d, a, b, c, x[i + 5], 12, 1200080426);
c = md5_ff(c, d, a, b, x[i + 6], 17, -1473231341);
b = md5_ff(b, c, d, a, x[i + 7], 22, -45705983);
a = md5_ff(a, b, c, d, x[i + 8], 7, 1770035416);
d = md5_ff(d, a, b, c, x[i + 9], 12, -1958414417);
c = md5_ff(c, d, a, b, x[i + 10], 17, -42063);
b = md5_ff(b, c, d, a, x[i + 11], 22, -1990404162);
a = md5_ff(a, b, c, d, x[i + 12], 7, 1804603682);
d = md5_ff(d, a, b, c, x[i + 13], 12, -40341101);
c = md5_ff(c, d, a, b, x[i + 14], 17, -1502002290);
b = md5_ff(b, c, d, a, x[i + 15], 22, 1236535329);
a = md5_gg(a, b, c, d, x[i + 1], 5, -165796510);
d = md5_gg(d, a, b, c, x[i + 6], 9, -1069501632);
c = md5_gg(c, d, a, b, x[i + 11], 14, 643717713);
b = md5_gg(b, c, d, a, x[i + 0], 20, -373897302);
a = md5_gg(a, b, c, d, x[i + 5], 5, -701558691);
d = md5_gg(d, a, b, c, x[i + 10], 9, 38016083);
c = md5_gg(c, d, a, b, x[i + 15], 14, -660478335);
b = md5_gg(b, c, d, a, x[i + 4], 20, -405537848);
a = md5_gg(a, b, c, d, x[i + 9], 5, 568446438);
d = md5_gg(d, a, b, c, x[i + 14], 9, -1019803690);
c = md5_gg(c, d, a, b, x[i + 3], 14, -187363961);
b = md5_gg(b, c, d, a, x[i + 8], 20, 1163531501);
a = md5_gg(a, b, c, d, x[i + 13], 5, -1444681467);
d = md5_gg(d, a, b, c, x[i + 2], 9, -51403784);
c = md5_gg(c, d, a, b, x[i + 7], 14, 1735328473);
b = md5_gg(b, c, d, a, x[i + 12], 20, -1926607734);
a = md5_hh(a, b, c, d, x[i + 5], 4, -378558);
d = md5_hh(d, a, b, c, x[i + 8], 11, -2022574463);
c = md5_hh(c, d, a, b, x[i + 11], 16, 1839030562);
b = md5_hh(b, c, d, a, x[i + 14], 23, -35309556);
a = md5_hh(a, b, c, d, x[i + 1], 4, -1530992060);
d = md5_hh(d, a, b, c, x[i + 4], 11, 1272893353);
c = md5_hh(c, d, a, b, x[i + 7], 16, -155497632);
b = md5_hh(b, c, d, a, x[i + 10], 23, -1094730640);
a = md5_hh(a, b, c, d, x[i + 13], 4, 681279174);
d = md5_hh(d, a, b, c, x[i + 0], 11, -358537222);
c = md5_hh(c, d, a, b, x[i + 3], 16, -722521979);
b = md5_hh(b, c, d, a, x[i + 6], 23, 76029189);
a = md5_hh(a, b, c, d, x[i + 9], 4, -640364487);
d = md5_hh(d, a, b, c, x[i + 12], 11, -421815835);
c = md5_hh(c, d, a, b, x[i + 15], 16, 530742520);
b = md5_hh(b, c, d, a, x[i + 2], 23, -995338651);
a = md5_ii(a, b, c, d, x[i + 0], 6, -198630844);
d = md5_ii(d, a, b, c, x[i + 7], 10, 1126891415);
c = md5_ii(c, d, a, b, x[i + 14], 15, -1416354905);
b = md5_ii(b, c, d, a, x[i + 5], 21, -57434055);
a = md5_ii(a, b, c, d, x[i + 12], 6, 1700485571);
d = md5_ii(d, a, b, c, x[i + 3], 10, -1894986606);
c = md5_ii(c, d, a, b, x[i + 10], 15, -1051523);
b = md5_ii(b, c, d, a, x[i + 1], 21, -2054922799);
a = md5_ii(a, b, c, d, x[i + 8], 6, 1873313359);
d = md5_ii(d, a, b, c, x[i + 15], 10, -30611744);
c = md5_ii(c, d, a, b, x[i + 6], 15, -1560198380);
b = md5_ii(b, c, d, a, x[i + 13], 21, 1309151649);
a = md5_ii(a, b, c, d, x[i + 4], 6, -145523070);
d = md5_ii(d, a, b, c, x[i + 11], 10, -1120210379);
c = md5_ii(c, d, a, b, x[i + 2], 15, 718787259);
b = md5_ii(b, c, d, a, x[i + 9], 21, -343485551);
a = safe_add(a, olda);
b = safe_add(b, oldb);
c = safe_add(c, oldc);
d = safe_add(d, oldd)
}
return Array(a, b, c, d)
}
function md5_cmn(q, a, b, x, s, t) {
return safe_add(bit_rol(safe_add(safe_add(a, q), safe_add(x, t)), s), b)
}
function md5_ff(a, b, c, d, x, s, t) {
return md5_cmn((b & c) | ((~b) & d), a, b, x, s, t)
}
function md5_gg(a, b, c, d, x, s, t) {
return md5_cmn((b & d) | (c & (~d)), a, b, x, s, t)
}
function md5_hh(a, b, c, d, x, s, t) {
return md5_cmn(b ^ c ^ d, a, b, x, s, t)
}
function md5_ii(a, b, c, d, x, s, t) {
return md5_cmn(c ^ (b | (~d)), a, b, x, s, t)
}
function core_hmac_md5(key, data) {
var bkey = str2binl(key);
if (bkey.length > 16)
bkey = core_md5(bkey, key.length * chrsz);
var ipad = Array(16)
, opad = Array(16);
for (var i = 0; i < 16; i++) {
ipad[i] = bkey[i] ^ 0x36363636;
opad[i] = bkey[i] ^ 0x5C5C5C5C
}
var hash = core_md5(ipad.concat(str2binl(data)), 512 + data.length * chrsz);
return core_md5(opad.concat(hash), 512 + 128)
}
function safe_add(x, y) {
var lsw = (x & 0xFFFF) + (y & 0xFFFF);
var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
return (msw << 16) | (lsw & 0xFFFF)
}
function bit_rol(num, cnt) {
return (num << cnt) | (num >>> (32 - cnt))
}
function str2binl(str) {
var bin = Array();
var mask = (1 << chrsz) - 1;
for (var i = 0; i < str.length * chrsz; i += chrsz)
bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (i % 32);
return bin
}
function binl2str(bin) {
var str = "";
var mask = (1 << chrsz) - 1;
for (var i = 0; i < bin.length * 32; i += chrsz)
str += String.fromCharCode((bin[i >> 5] >>> (i % 32)) & mask);
return str
}
function binl2hex(binarray) {
var hex_tab = hexcase ? "0123456789ABCDEF" : "0123456789abcdef";
var str = "";
for (var i = 0; i < binarray.length * 4; i++) {
str += hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8 + 4)) & 0xF) + hex_tab.charAt((binarray[i >> 2] >> ((i % 4) * 8)) & 0xF)
}
return str
}
function binl2b64(binarray) {
var tab = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
var str = "";
for (var i = 0; i < binarray.length * 4; i += 3) {
var triplet = (((binarray[i >> 2] >> 8 * (i % 4)) & 0xFF) << 16) | (((binarray[i + 1 >> 2] >> 8 * ((i + 1) % 4)) & 0xFF) << 8) | ((binarray[i + 2 >> 2] >> 8 * ((i + 2) % 4)) & 0xFF);
for (var j = 0; j < 4; j++) {
if (i * 8 + j * 6 > binarray.length * 32)
str += b64pad;
else
str += tab.charAt((triplet >> 6 * (3 - j)) & 0x3F)
}
}
return str
}
求稳的话可以执行上面的JavaScript代码，这里我们用Python的 hashlib 来生成 md5 值：
import requests
from bs4 import BeautifulSoup
headers = {
'cookie': 'sessionid=mcec97dnwqd02lvfrlsk7m2l0hk4x9w0',
'User-Agent': 'yuanrenxue.project'
}
css_dict = {'data:image/png;base64,XXX': '0', 'data:image/png;base64,XXX': '1', 'data:image/png;base64,XXX': '2', 'data:image/png;base64,XXX': '3', 'data:image/png;base64,XXX': '4', 'data:image/png;base64,XXX': '5', 'data:image/png;base64,XXX': '6', 'data:image/png;base64,XXX': '7', 'data:image/png;base64,XXX': '8', 'data:image/png;base64,XXX': '9'}
for index in range(1, 6):
url = f"https://match.yuanrenxue.com/api/match/4?page={index}"
res = requests.get(url, headers=headers).json()
b64 = res['key'] + res['value']
hex_md5 = hashlib.md5(base64.b64encode(b64.encode()).replace(b'=', b'')).hexdigest()
for td in BeautifulSoup(res['info'], 'lxml').find_all('td'):
print()
for img in td.find_all('img'):
if hex_md5 not in img['class']:
print(css_dict[img['src']])
break
其实这里还有个另类的方法确定哪些是 display:none 修饰的图片（仅提供思路）：由于他每次每个 td 都是随机生成的 class ，所以只要每个 td 中都有且仅有4个相同名称的 class ，那就说明这个 class 是要显示图片的 class ，但如果运气不好刚好每次两个 class 名称都是相同数量，都为4个，那就没办法了（运气应该没有这么背的吧）。
打印出来发现有效数字对上了，那么如何处理 left 移位的问题呢？
我们随机取一个 img 元素多的 td 表格，然后来逐位分析：
首先通过观察 style 可以发现，left 的数值为 11.5px 的倍数，说明一个数字图片宽度为 11.5px ，然后含有 display:none 样式的 img 的宽度就是 0px ，这部分刚才已经过滤掉了，这会也不用考虑了。
在这张图中，可以看到聚焦的这个 img 是第三个显示的，left 又左移了两个数字图片单位，从第三位变成了第一位。
在这张图中，聚焦的这个 img 是第二个显示的，left 并没有向左移动，所以他就是第二位。
在这张图中，聚焦的这个 img 是第一个显示的，left 又右移了两个数字图片单位，从第一位变成了第三位。
在这张图中，聚焦的这个 img 是第四个显示的，left 并没有向左移动，所以他就是第四位。
观察得出，实际位置 = 初始位置 + left属性值 / 11.5px ，这下就好办了，我们可以通过一个变量，每次出现一个显示的数字就自增1，然后就能得到变量的实际位置，具体代码看解题源码。
解题源码
import requests
from bs4 import BeautifulSoup
headers = {
'cookie': 'sessionid=mcec97dnwqd02lvfrlsk7m2l0hk4x9w0',
'User-Agent': 'yuanrenxue.project'
}
css_dict = {'data:image/png;base64,XXX': '0', 'data:image/png;base64,XXX': '1', 'data:image/png;base64,XXX': '2', 'data:image/png;base64,XXX': '3', 'data:image/png;base64,XXX': '4', 'data:image/png;base64,XXX': '5', 'data:image/png;base64,XXX': '6', 'data:image/png;base64,XXX': '7', 'data:image/png;base64,XXX': '8', 'data:image/png;base64,XXX': '9'}
value = 0
for index in range(1, 6):
url = f"https://match.yuanrenxue.com/api/match/4?page={index}"
res = requests.get(url, headers=headers).json()
b64 = res['key'] + res['value']
hex_md5 = hashlib.md5(base64.b64encode(b64.encode()).replace(b'=', b'')).hexdigest()
for td in BeautifulSoup(res['info'], 'lxml').find_all('td'):
# 通过字典存储数字和排序确定位置
left = 0
num_dict = {}
for img in td.find_all('img'):
if hex_md5 not in img['class']: # 没有 display: none 属性的元素
num_dict[int(left + float(img['style'].replace('left:', '').replace('px', '')) // 11.5)] = css_dict[img['src']]
left += 1
value += int(''.join(item[1] for item in sorted(num_dict.items(), key=lambda item: item[0])))
print(value)
扫一扫
9521
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
