今天发一下我之前写了一会的关于爬取传智播客习题的爬虫。目前来说，其实是因为最近期末，然后想要爬取一下题库里的题，然后做一个题库出来，之所以这样，是因为老师并没有公布答案！ 不过没想到传智播客居然是用 JavaScript 渲染的页面，而非普通的 HTML，难度很大对于初学者。

目前找到了想要的内容但是并不知道该如何爬取。

首先在这里右键查看一下源代码，之所以如此，是因为我本来以为可以直接通过这里获取链接跳转的内容，然后爬取出来，但是没想到并没有，并且其实传智里面的页面代码是通过 JS 渲染的，所以应该通过 header 请求来获取数据。然后使用 F12 查看 Network，在寻找请求获取内容的时候，发现请求名为 list?status=&name=&pageNumber=1&pageSize=10&courseId=5b1d1d6e854e408b89043bb29c604313&type=1&t=1608267215390 这个的请求，里面的 preview 中，有想要获取到的内容 然后发现这里面的内容是一个 id，然后发现下面的题目的链接就是这个页面加上 id 即可。 所以其实通过 header 请求头，然后提取出来的 JSON 文件，再进行解析即可。 之后再获取题目里的内容即可。 其实这个我想了好久，因为当时不知道获取到的内容是 JSON，以为是字符串，然后通过正则来获取数据的时候，发现只能获取第一个匹配的，然后后来问了大佬才知道这是 JSON 的数据。

其实他这个是通过 JSON 传递的数据，然后里面是字典的镶嵌。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

import requests_html
import re
import json

url = "http://stu.ityxb.com/back/bxg/my/busywork/findStudentBusywork?busyworkId=166955876c3b4bcf8ef39976dfe60e76&t=1608445306731"
url2 = 'http://stu.ityxb.com/lookPaper/busywork/166955876c3b4bcf8ef39976dfe60e76'

headers = {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36',
    'Cookie': ''
}

res = requests_html.HTMLSession()
r = res.get(url, headers=headers)

text = json.loads(r.text)
text_xz = text['resultObject']["danxuan"]['lists']
neirong = {}
changdu = len(text_xz)

for i in range(1, len(text_xz) + 1):
    wenzi = text_xz.pop(0)
    text_xx = wenzi["questionOptionList"]
    text_tm = str(i) + '.' + wenzi["questionContentText"]
    print(text_tm)
    with open('jsdx.text', 'a', encoding='utf-8') as f:
        f.write('\n' + text_tm)
    for num in range(len(text_xx)):
        xx_dan = text_xx.pop(0)
        xx_nei = xx_dan['text']
        with open('jsdx.text', 'a', encoding='utf-8') as f:
            f.write('\n' + xx_nei)

这里就能提取单选的内容了，然后再就是获取全部的内容就行了，但是发现有的作业里面只有单选或者只有判断之类的，然后我们可以通过 try 来进行报错处理，这样即使没有这个选项，也能运行下去。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86

import requests_html
import re
import json

url = "http://stu.ityxb.com/back/bxg/my/busywork/findStudentBusywork?busyworkId=166955876c3b4bcf8ef39976dfe60e76&t=1608445306731"
url2 = 'http://stu.ityxb.com/back/bxg/my/busywork/findStudentBusywork?busyworkId=655d240321db424ea37f4b55c2f132d2&t=1608476055939'

headers = {
    'User-Agent': '',
    'Cookie': ''
}

res = requests_html.HTMLSession()
r = res.get(url2, headers=headers)

text = json.loads(r.text)
text_xz = text['resultObject']["danxuan"]['lists']
neirong = {}

for i in range(1, len(text_xz) + 1):
    wenzi = text_xz.pop(0)
    text_xx = wenzi["questionOptionList"]
    text_tm = str(i) + '.' + wenzi["questionContentText"]
    print(text_tm)
    with open('jsdx.text', 'a', encoding='utf-8') as f:
        f.write('\n' + text_tm)
    for num in range(len(text_xx)):
        xx_dan = text_xx.pop(0)
        xx_nei = xx_dan['text']
        with open('jsdx.text', 'a', encoding='utf-8') as f:
            f.write('\n' + xx_nei)
    with open('jsdx.text', 'a', encoding='utf-8') as f:
        f.write('\n' + '答案：')
    try:
        text_xz = text['resultObject']["duoxuan"]['lists']
        for i in range(1, len(text_xz) + 1):
            wenzi = text_xz.pop(0)
            text_xx = wenzi["questionOptionList"]
            text_tm = str(i) + '.' + wenzi["questionContentText"]
            print(text_tm)
            with open('jsdx.text', 'a', encoding='utf-8') as f:
                f.write('\n' + text_tm)
            for num in range(len(text_xx

)):
                xx_dan = text_xx.pop(0)
                xx_nei = xx_dan['text']
                with open('jsdx.text', 'a', encoding='utf-8') as f:
                    f.write('\n' + xx_nei)
        with open('jsdx.text', 'a', encoding='utf-8') as f:
            f.write('\n' + '答案：')
    except:
        pass

    try:
        text_pd = text['resultObject']["panduan"]['lists']
        for i in range(1, len(text_pd) + 1):
            wenzi = text_pd.pop(0)
            text_tm = str(i) + '.' + wenzi["questionContentText"]
            print(text_tm)
            with open('jsdx.text', 'a', encoding='utf-8') as f:
                f.write('\n' + text_tm + '\n' + '答案：')
    except:
        pass

    try:
        text_tk = text['resultObject']["tiankong"]['lists']
        for i in range(1, len(text_tk) + 1):
            wenzi = text_tk.pop(0)
            text_tm = str(i) + '.' + wenzi["questionContentText"]
            print(text_tm)
            with open('jsdx.text', 'a', encoding='utf-8') as f:
                f.write('\n' + text_tm + '\n' + '答案：')
    except:
        pass

    try:
        text_jd = text['resultObject']["jianda"]['lists']
        for i in range(1, len(text_jd) + 1):
            wenzi = text_jd.pop(0)
            text_tm = str(i) + '.' + wenzi["questionContentText"]
            print(text_tm)
            with open('jsdx.text', 'a', encoding='utf-8') as f:
                f.write('\n' + text_tm + '\n' + '答案：')
    except:
        pass

这就是 Python 爬取传智播客的作业题目的完整代码了，不过问题是需要复制链接，不过还算可以吧，以后如果改进的话会贴出来的。 不过其实很容易，就是解析前一页的数据，把里面包含链接的内容提取出来，然后再传入 for 循环即可，如果想要尝试的话可以自行测试，有不懂的随时问我。 如果有什么不会的可以在评论区留言，我会在看到的第一时间回复的。

其实说是HTML，实际上还是要通过CSS来实现具体效果的，毕竟实际上HTML是框架，而CSS则是填充框架的东西。这篇文章是介绍一个简单的案例，鼠标触碰图片，然后图片发生旋转，进而展现文字。

可以看一下动图演示:

其实这个是通过transform旋转以及backface-visibiliity来实现图片隐藏的。

简单介绍一下这个HTML实现图片旋转显示背面文字的案例思路。

首先是创建一个框架，用来储存这些图片以及文字。然后将搭配的图片文字储存在同一个div里，用以日后的地位修改。然后接下来先将文字进行旋转180°，之后设置hover属性即可。之所以要设置先旋转180°是因为如果不设置的话，那么图片旋转之后实现的效果就会使反向的，文字变成反向的文字，而我们事先旋转后，再进行触碰旋转的话，则会使的文字正向了。

主要用到的还是上面两个属性，一个是transform: rotateY(180deg); 这个是设置内容旋转180°，然后再一个是backface-visibility: hidden; 这个是隐藏旋转的内容的背面，也就是你旋转之后，不会显示东西，这样子可以实现上面的效果了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<style>
    * {
        margin: 0;
        padding: 0;
    }
    body {
        background-color: #0d3462;
    }
    .wutai {
        width: 760px;
        height: 220px;
        margin: 100px auto;
    }
    .fu {
        width: 170px;
        height: 190px;
        margin: 10px;
        transition: 1.5s;
        transform-style: preserve-3d;
        float: left;
        position: relative;
    }
    .fu:hover {
        transform: rotateY(180deg);
    }
    .box {
        /* position: absolute; */
        width: 170px;
        height: 190px;
        position: absolute;
    }
    .face {
        border: 2px solid #4b2518;
        backface-visibility: hidden;
    }
    .hip {
        border: 2px solid white;
        background-color: #4b2518;
        color: white;
        text-align: center;
        transform: rotateY(180deg);
        backface-visibility: hidden;
    }
</style>
<body>
    <div class="wutai">
        <div class="fu">
            <div class="box face">
                <img src="1.jpg" alt="">
            </div>
            <div class="box hip">
                <h3>浓缩咖啡</h3>
            </div>
        </div>
        <!-- 其他图片和文字部分 -->
    </div>
</body>

具体详情内容可以通过上面的代码进行自我测试，其实最容易实现效果的就是先全部复制上去，然后再将不明白的属性给加上注释，查看发生了什么变化，如果没有变化，可以先记下来然后继续注释别的内容，最后将实在不明白效果的复制到百度进行查询。

如果有什么不懂的可以在评论区留言，我会在看到的第一时间进行回复的。

今天想要精进（没事干）一下我的HTML和CSS技术，所以准备临摹一下谷歌的首页，也就是那个上面是搜索框，下面是快捷方式的页面。 类似于这个页面: 谷歌搜索页面的样式，不过下面没有Google搜索什么的，只是一个简单的快捷方式，将常用的页面添加成了快捷方式（之所以不上图是因为不想让你们看到我的快捷页面，哈哈）。

其实这个一看就感觉很容易就能做出来的效果了，唯一难度应该就是在下面快捷方式中的样式了。 碰到就会发生一个小变化，这个其实使用:hover伪类即可。但是在做的过程中，我也在使用F12查看谷歌自身的代码，参考一下宽高之类的，然后就发现了一个小问题，它里面的好多代码我都看不懂啊，什么:host，什么 –ntp-theme-shortcut-background-color: rgba(241, 243, 244, 1); 之类的。

遇事不要慌，我们先Ctrl+U看一下源代码，发现谷歌的源代码很简单，因此我觉得它应该是通过JavaScript渲染来维护页面的。然后这个:host是什么还不清楚，只好请出百度了，一查才知道，原来这是一个伪类。

CSS 伪类函数 :host() 选择包含使用这段CSS的Shadow DOM的影子宿主（这样就可以从Shadow DOM中选择包括它的自定义元素）——但前提是该函数的参数与选择的阴影宿主相匹配。 最简单的用法是仅将类名放在某些自定义元素实例上，然后将相关的类选择器作为函数参数包含在内。不能将它与后代选择器表达式一起使用，以仅选择特定祖先内部的自定义元素的实例。这是:host-context()的作用。

简单的举一个例子:

1
2
3
4

/* 选择阴影根元素，仅当它与选择器参数匹配 */
:host(.special-custom-element) {
  font-weight: bold;
}

通过:host来为选定的元素提供特殊的效果，这就是:host的用法了。最后，简单的看一下我写的Google页面吧。

写的很拉跨，哈哈，不过确实有所收获。如果有什么不懂的可以在评论区留言，我会在看到的第一时间进行回复的。

其实如果是一直关注本站的读者会知道，其实这里最早只是一个做我的世界服务器的官网，虽然说我现在服务器也在开着，但是当时不知道哪根经抽了，就把这个当成博客了，不过其实还是关注着我的世界的。

先说一下任务，目前呢在网络上搜索我的世界 ID 的话，会发现 ne 那个搜到的大多都是好多年以前的内容了，比如说那张我记的好久好久好久以前就存在的 ID 对照图。

就是这张，影响深刻，但是实际上随着年份的增加，我的世界的版本更新还是蛮快的，一些新的内容在这上面就找不到了，所以就萌生了一个做 ID 对照的网站的想法，但是数据从哪来呢？答案当然是百度，通过百度的查询我发现了一个老外的 ID 站做的很不错，所以呢，目标就设定为他，使用 Python 爬虫将我需要的数据爬取下来。

不过其实在最终目标确定前，还有一个其他的目标也可以操作一下，不过那个内容相对较落后了，所以还是选择了第一个选定的目标。

我们先看一下该网站，分析一下。

很简单的构造，就是中间内容然后上下都是些介绍之类的，然后我们发现他这个一个页面显示一点点内容，获取所有的内容是需要翻页的，但是我搜索了半天确实没找到，应该是写在了 JS 文件里，因为我看到他调用了好多 JS 文件，不过我并没有去找里面有没有跳转链接，当时其实想是，你不论怎么说其实内容也就那么一点，大不了我直接把每个链接保存下来嘛。

结果翻页的时候看了一下，发现他的链接很简单，就是把之前那一页加上了 /？加上了数字，代表页码，很舒服。

直接通过 for 循环就可以爬取每个链接了，然后看了一下一共 8 页。所以循环从 range(2,9)，为什么从 2 开始呢，是因为他第一页没写页码，相对简单的方法就是循环还是 range(1,9) 然后呢，我们设置个判断，如果是 1 的话链接设置为首页就行了，不过我当时懒，直接复制出来了一份，先把第一页爬出来再循环其他的页面。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

import requests
from bs4 import BeautifulSoup

headers = {
    'User-Agent': 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36'
}

url = "https://minecraftitemids.com/"
# 2 3 4 5 6 7 8
r = requests.get(url, headers=headers)
neirong = r.text
soup = BeautifulSoup(neirong, "lxml")
wenzi = soup.table.get_text()
length = len(wenzi)

with open("mclist.txt", 'a', encoding='utf-8') as file_object:
    n = 1
    for i in range(0, length, 20):
        file_object.write((wenzi[i:i+20]))
        if n == 10:
            file_object.write('\n')
            n = 0
        n += 1

for a in range(2, 9):
    newurl = url + str(a)
    r = requests.get(newurl, headers=headers)
    neirong = r.text
    soup = BeautifulSoup(neirong, "lxml")
    wenzi = soup.table.get_text()
    length = len(wenzi)

    with open("mclist.txt", 'a', encoding='utf-8') as file_object:
        n = 1
        for i in range(0, length, 20):
            file_object.write((wenzi[i:i + 20]))
            if n == 10:
                file_object.write('\n')
                n = 0
            n += 1

print("爬取完成")

可以看到我们利用了两个库，requests 大家都清楚，BeautifulSoup 这个库也是一个非常实用的库，看过前面文章的都知道，我写的那个爬取知乎文章的爬虫也利用了这个库，比较适合抓取内容。知乎爬取全部内容 知乎爬取单页内容 感兴趣的可以了解一下，通俗易懂，哈哈。

然后呢，这个其实也就没啥好讲的了，也就是最后写入文件的地方可以说一下啊，为什么要加一个循环，这是因为如果不加循环的话，他写入的内容是一行文字，当然如果你用记事本看的话，开个自动分行就好了，但是我想直接写入的内容就是分好的，所以就

加了个循环，每循环 10 次换一下行，结果还可以吧就是有点乱，需要调整一下。

好了，文章就到这里了，如果有什么不懂的请在评论区留言，我会在看到的第一时间进行回复的。

为什么在 div 中加的是左浮动但是 div 会向右浮动呢？这一点我相信有好多人都会遇到，至于原因，你懂的。因为我也遇到了，而且为此困惑了好久，不过我遇到的是我屏幕大的话，网页就会发生偏移，而我这种小屏却没什么事。之前右朋友跟我说过，但是一直没上心，今天晚上准备修复一下。

他这个浮动其实是因为在你的 div 之前的标签中也有使用浮动或者别的什么属性，导致该标签的位置发生变化，进而引发了它后面的标签也发生了偏移。我们解决的方法非常容易，只需要给偏移的第一个标签加上 clear 属性就行了。

先进行一下 gif 图片展示吧，

如图，我们把 clear 这个属性给去掉，然后我们的内容就会发生偏移了，而我们加上，就会恢复正常了。这篇文章其实可以做一下之前那篇文章的反驳，哈哈，之前那是因为学的太少了，不过方法还算正确，但是判断的原因出错了，主要是当时解决了，所以后面就懒得想了，这次一道给正好了。之前那篇文章，说的是我删除栏目的时候，之后不论怎么修改页面的元素都会发生偏移，大概率就是因为这个浮动搞得鬼，不过我并没有进行测试哦，只是说一下，如果有朋友正好遇到这个问题可以尝试一下。最后说一下，只需要在我们不正常的标签加上 clear: both; 这个就行了。

没想到进阶版来的这么快，在发布了python爬取知乎盐选文章内容后，没想到居然这么快就要更新新的内容了。 在下午思考第一篇python爬取知乎盐选文章内容的时候，其实就把自动爬取目录内的其他内容的方法想出来了，但是本来没想这么快更新的，哈哈。 不过思来想去还是发出来吧，毕竟要不哪天就忘了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

from DecryptLogin import login
from bs4 import BeautifulSoup
import re
import base64

lg = login.Login()
_, loginstauts = lg.zhihu(username='', password='', mode='pc')

headers = {
    'user-agent': "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36"
}

url1 = "https://www.zhihu.com/market/paid_column/1178733193687175168/section/1178742737682350080"
url2 = "https://www.zhihu.com/market/paid_column/1178733193687175168/section/1178742849583083520"

# 获取链接
r = loginstauts.get(url1, headers=headers)
wenzi = r.text
soup = BeautifulSoup(wenzi, 'lxml')
lianjie = soup.textarea
lianjie = str(lianjie)

pattern = re.compile('"next_section":{"url":"(.+)","is_end":')  # 正则匹配链接所在的文字
result = pattern.findall(lianjie)

texts = soup.find_all('p')

for text in texts:
    with open("yanxuan.txt", 'a', encoding='utf-8') as file_object:
        file_object.write(text.get_text() + " ")

list = result.pop(0)
print(list)

for link in range(0, 9):
    r2 = loginstauts.get(list, headers=headers)
    wenzi = r2.text
    soup = BeautifulSoup(wenzi, 'lxml')
    lianjie = soup.textarea
    lianjie = str(lianjie)

    pattern = re.compile('"next_section":{"url":"(.+)","is_end":')  # 正则匹配链接所在的文字
    result = pattern.findall(lianjie)
    list = result.pop(0)

    texts = soup.find_all('p')

    for text in texts:
        with open("yanxuan.txt", 'a', encoding='utf-8') as file_object:
            file_object.write(text.get_text() + " ")

直接上一手代码，讲一下思路，首先先是获取文本内容，通过前面的文章，我们知道 了如何获取文本内容，并且明白了该怎么获取整个页面的html内容。

本来最初的想法是把目录里的每一个链接都复制下来，然后通过遍历来获取链接，因为我最初是真的没发现下一篇的链接是通过哪里获得的。然后今天下午的时候，认认真真（闲的蛋疼）的看了一下知乎盐选文章内容的源代码，发现原来跳转链接在他的底部textarea里，并且还是在里面的一个next_section里，让我一顿好找，不过找到就是最好的啦。

找到之后，我们只需要获取到跳转的链接即可了，只需要使用正则进行条件筛选就可以了。

1
2

pattern = re.compile('"next_section":{"url":"(.+)","is_end":')  # 正则匹配链接所在的文字
result = pattern.findall(lianjie)

也就是这一段代码，我们对获取的内容进行匹配筛选，即可获得链接了，不过在获得之后，还是会出现一个问题，就是获取的内容会储存在列表里，我们还需要把列表的内容读取出来才能使用。本来其实最早我的思路是使用循环，然后把获取到的链接储存到同一个列表里，然后利用循环读取即可，但是因为当时脑子可能抽了，把变量的值给改错了，前面虽然该出来了，但是后面的都没改，就会得到一个很尴尬的结果，就是所有的结果都是同一个，然后我就换了种方法，没想到刚换就找到了问题所在。不过也懒得该回去了。

通过列表的方法pop来对列表内容进行删除，并且将删除返回的值进行保存，然后当作一个数据进行储存。也就是这一段的内容了。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

for link in range(0, 9):
    r2 = loginstauts.get(list, headers=headers)
    wenzi = r2.text
    soup = BeautifulSoup(wenzi, 'lxml')
    lianjie = soup.textarea
    lianjie = str(lianjie)

    pattern = re.compile('"next_section":{"url":"(.+)","is_end":')  # 正则匹配链接所在的文字
    result = pattern.findall(lianjie)
    list = result.pop(0)

    texts = soup.find_all('p')

    for text in texts:
        with open("yanxuan.txt", 'a', encoding='utf-8') as file_object:
            file_object.write(text.get_text() + " ")

其他的也就没有什么难度的东西了，不过如果有什么疑问，可以在评论区留下你的疑惑，我会在看到的第一时间进行回复的。

发一篇js代码吧，毕竟说到底我还是要搞前端的，哈哈。通过JavaScript来实现五星好评功能。这个功能相信各位都不陌生，不论是淘宝还是京东，亦或者是各类微商，都离不开好评这个东西，好评多了，平台对你的关照也就多了起来。而且一般来说这个都是用在售后，外卖网购等等吧，都很需要他的，然后呢，我百度搜索到的许多代码其实都有些冗长了，当然也可能是我没有仔细看，不过大体一看就觉得没我的好，所以才准备发这篇文章，不过其实这个是我好久以前写的了。效果图就不放了，我把所有需要本地的东西都用在线的方式替代了，比如说图片就用图床给替代了，别的也没啥需要替代的了。话不多说，直接上一下代码，然后我们简单的解析一下。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

Document  html, body, a, h1, h2, h3, h4, h5, h6, p, a, b, i, em, ul, ol, li, strong, table, th, tr, td, img, form, input, button, select, option, textarea { margin: 0; padding: 0; }

.body {
  text-align: center;
  margin: 10px auto;
  width: 800px;
  height: 64px;
  background-color: aqua;
}

span {
  display: inline-block;
  width: 40px;
  height: 40px;
  /* border: 1px solid red; */
}

span.star {
  background: url(https://s3.ax1x.com/2020/11/21/Dl492V.png) no-repeat;
  /* cursor: pointer; */
  /* vertical-align: -2px; */
  /* span为行内元素，不能直接设置宽高，转换成block */
}

span.star-off {
  background-position: -40px 0;
}

请选择您的评价:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

//获取对象
// var div = document.querySelector("div");
// console.log(div);
// var span = document.querySelectorAll(".star")
// console.log(span);
var star = document.getElementsByClassName("star");
var pingjia = document.querySelector("#pingjia");
var pingjias = ["很差", "较差", "一般", "良好", "很好"];
var len = star.length;
onoff = true; //开关，判断是否点击，点击后不执行移入移出事件
for (var i = 0; i < len; i++) {
  //绑定鼠标移入 移出 点击
  star[i].index = i;
  star[i].onmouseover = function () {
    if (onoff) {
      var num = this.index;
      pingjia.innerHTML = pingjias[num];
      for (var i = 0; i <= num; i++) {
        star[i].style.backgroundPosition = "0 0";
      }
    }
  }
  star[i].onmouseout = function () {
    if (onoff) {
      var num = this.index;
      pingjia.innerHTML = "";
      for (var i = 0; i <= num; i++) {
        star[i].style.backgroundPosition = "-40px 0";
      }
    }
  }
  star[i].onclick = function () {
    onoff = false;
    pingjia.innerHTML = "";
    for (var j = 0; j < len; j++) {
      star[j].style.backgroundPosition = "-40px 0";
    }
    var num = this.index;
    pingjia.innerHTML = pingjias[num];
    for (var i = 0; i <= num; i++) {
      star[i].style.backgroundPosition = "0 0";
    }
  }
}

其实思路非常简单，就是通过css属性中的定位来进行图片的移动，一个星满一个星空，然后我们通过位移和大小来设置让他只能显示一个，之后通过js来判断用户的鼠标移动即可实现功能。

首先呢，先让所有的星星隐藏起来，也就是让他们显示的位置移到右面，显示空星，之后通过js中的onmouseover来判断鼠标的移动，根据移动的位置来实现评分的改变，也就是那个innerHtml，通过这个来改变文字效果，再接着也就是增加别的效果了，比如说评分后想要改变之类的，我们先清空一下属性，然后直接添加新的属性就行了，因为毕竟计算器的运算远非人能相比的，所以虽然看着代码是这个先那个后，但是人眼根本分辨不出来的，然后基本上大部分的功能就实现了。

其实也就是涉及了一个叫做循环的问题，哈哈，其实有点忘了这一段了，刚才去巩固了一下。

其实就是因为你点亮星星的话应该是从头开始的，而我们如果不加循环的话那么它只会点亮我们移动到的星星，而之前的不会管。我们添加了for循环的话，就可以了。

至于为什么不点亮多的星星，是因为我们在前面有一个传参的地方，设置了我们在哪里移动就获取哪里的数值，然后就会把得到的参数传递下去，这样的话前面的星星也就会点亮了。

如果有什么不懂的，可以在评论区留言，我会在看到的时候进行回复的。

首先准备工作为 jQuery、HTML、CSS、JavaScript，别的其实并不需要，而且其实 JavaScript 也不需要。 最初是准备不使用 jQuery 的，但是发现用 jQuery 只需要几行代码就能实现的功能，而用原生的 JavaScript 却需要好多，而且也不容易实现，所以最后才准备使用 jQuery 了。

jQuery 的安装各位应该都会吧，如果不会的话，我放一下代码。通过使用 Node.js 来安装，在你的 JS 文件夹里按住 Shift 键并右键，选择打开 PowerShell 窗口，之后只需要输入 cnpm install jquery 即可，或者直接去中文站下载也行，这里不多讲述了。

列表的点击显示和隐藏就是通过 jQuery 来实现的，很简单，如果使用 JavaScript 还是那句话，麻烦。

之后文字的打字机效果是通过 typed 这个库来实现的，GitHub 跳转链接。其实这个效果加不加都是无所谓的，只是好看了一丢丢而已，并且其实我的 CSS 只是随便写了一下，完全可以稍微优化一下 CSS。

目前的效果也就是点击列表的歌曲，会自动切换音乐和图像，然后上面的目前播放的名字也会换成该音乐的名字。这个网页实现音乐播放器的功能很容易，基本上一眼就能看懂了，后期可能会加一些别的效果，并且把样子做一下，搞一下 CSS。

以下是代码和一些简单的讲解：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49

// JS，名字我是叫的 music.js
// 记录图片和音乐以及正在播放的名字
var mslists = ['./music/jar_of_love.mp3', './music/see_you_again.mp3', './music/sunshine_in_the_rain.mp3'];
var imglists = ['http://p1.music.126.net/8jt2KnGDF0qMP9JbidOtVA==/573945069746475.jpg', 'http://p2.music.126.net/JIc9X91OSH-7fUZqVfQXAQ==/7731765766799133.jpg', 'http://p1.music.126.net/bHQlt-zzDQlsnPydiYKsHw==/109951165124500529.jpg'];
var namelists = ["Jar of love", 'See you again', 'Sunshine in the rain'];

// 点击隐藏和显示
$(".liebiao").click(function() {
  if ($(".msxulie").is(":hidden")) {
    $(".msxulie").show();
  } else {
    $(".msxulie").hide();
  }
});

// 文字效果
window.onload = function() {
  var typed = new Typed(".zzbf", {
    strings: ['', '音乐播放器正在播放:'],
    startDelay: 300,
    typeSpeed: 100,
    loop: true,
    backSpeed: 50,
    showCursor: true,
    cursorChar: '➼'
  });
}

// 点击切换音乐
$(".jol").click(function() {
  $(".mscontrol").attr("src", mslists[0]);
  $(".msimg").attr("src", imglists[0]);
  $(".msplayingtext").html(namelists[0]);
  $(".mscontrol")[0].play();
});

$(".sya").click(function() {
  $(".mscontrol").attr("src", mslists[1]);
  $(".msimg").attr("src", imglists[1]);
  $(".msplayingtext").html(namelists[1]);
  $(".mscontrol")[0].play();
});

$(".sitr").click(function() {
  $(".mscontrol").attr("src", mslists[2]);
  $(".msimg").attr("src", imglists[2]);
  $(".msplayingtext").html(namelists[2]);
  $(".mscontrol")[0].play();
});

下面是 CSS 代码，这个我是叫的 index.css：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

/* 播放器位置 */
.msplayer {
  float: left;
  background-color: aqua;
  border-radius: 20%;
}

/* 播放器图片 */
.msplayer .msimg {
  margin-top: 5px;
  margin-left: 5px;
  margin-bottom: 5px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
}

/* 播放器控制器 */
.msplayer .mscontrol {
  margin-top: 5px;
  margin-left: 5px;
  margin-right: 5px;
  width: 200px;
}

/* 播放器列表按钮 */
.msplayer .liebiao {
  position: relative;
  bottom: 25px;
}

/* 音乐列表 */
.msplayer .msxulie {
  text-align: center;
  width: 315.14px;
  position: absolute;
  display: block;
  background-color: bisque;
  top: 20px;
  left: 315.14px;
  border-radius: 20%;
  cursor: pointer;
}

/* 正在播放 */
.msplaying {
  position: absolute;
  top: 0px;
  left: 80px;
  font-size: 10px;
}

$(".mscontrol").attr("src",mslists[0]);
$(".msimg").attr("src",imglists[0]);
$(".msplayingtext").html(namelists[0]);
$(".mscontrol")[0].play();

第一行是获取 audio 的 src 值，把它设置为我们数组里的值，第二行是更改图片，第三行是修改名字，最后一行其实加不加无所谓的，就是一个自动播放效果，如果换歌就进行自动播放。

然后我那两行注释是修改那个 typed 的效果的，但是发现函数执行了就很难停止，所

以就给注释掉了，效果也是很容易的，就是将那个 typed 效果创建成一个函数，之后调用即可，然后在里面设置一个变量用于接受我们传递的参数就好了，不过目前来说不会怎么停止已经运行的函数，所以这个想法就搁浅了。

CSS 代码没什么难度吧，应该，就是简单的浮动定位效果，把列表给浮动过去，然后 HTML 也是没什么难度的，自己看一眼就好了。

如果有什么不懂的可以在评论区评论，我会在看到的第一时间回复的。

最近在准备考证，再加上要改版一下网站，加一些用户交互功能之类的，并且其实毕竟做东西就是要做好嘛。 所以就在尝试用户注册功能，其实主要还是学习的案例里面有这个通过 jQuery 来实现简单的用户注册功能，然后虽然没怎么仔细听，但是还是会个大概，再加上学了一上午有点小困，所以敲个代码来刺激一下自己。 其实 JavaScript 也可以实现这个效果的，只不过相对要麻烦一些，如果有需要的话，我可能会写一个通过 JavaScript 来实现用户注册的文章，还是看需求，哈哈。 其实这个用户注册还是要通过后台进行数据验证的，但是 PHP 学的不是很精，所以只是简单的验证了一下用户注册和密码过于简单。 苦命，写文章写到一半，然后感觉会有一个小问题出现，然后去测试了一下，发现确实有，之后修改了半天！ 不过目前没找到啥方法解决！好悲惨！—->目前在问老师了，就是想要实现一个判断，之后会输出相应的提示框。 上下效果图： 就是判断你的用户名是否符合格式，密码是否符合规则，有没有重命名，密码是不是太简单了，很简单的一个小例子，不过很综合，哈哈。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

// 注册
registerrule = /^[a-zA-z0-9_\-]{4,16} //检测用户名格式的正则 表示不能包含其他字符
passwordrule = /^[a-zA-z0-9_\-]{6,16} //检测用户密码
(function(){
  function checkname(){
    valname = $("input[name=username]").val();
    if(valname == ""){
      $("span").eq(0).html("用户名未填写").css("color", "red");
      return false;
    } else if (registerrule.test(valname)){
      $("span").eq(0).html("用户名格式正确").css("color", "green");
      return true;
    } else {
      $("span").eq(0).html("用户名格式不正确").css("color", "red");
      return false;
    }
  }
  
  function checkpassword(){
    valpw = $("input[name=password]").val();
    if(valpw == ""){
      $("span").eq(1).html("密码未填写").css("color", "red");
      return false;
    } else{
      $("span").eq(1).html("密码格式正确").css("color", "green");
      return true;
    }
  }
  
  $("input[name=username]").blur(function(){
    checkname()
  }).focus(function(){
    $("span").eq(0).html("");
  })
  
  $("input[name=password]").blur(function(){
    checkpassword();
  }).focus(function(){
    $("span").eq(1).html("");
  })
  
  $("button").click(function(){
    if(checkname()){
      $("span").eq(0).html("用户名已存在").css("color", "red");
    }
    if(checkpassword()){
      $("span").eq(1).html("密码太简单了，请换一种密码").css("color", "red");
    }
  })
})()

差不多就是这些，因为注释有点多，就自己剪了一下，如果报错记得告诉我。 思路很简单，就是通过 input 来输入数据，之后通过 jQuery 来进行判断，当然这里的判断是一些比较简单的判断，比如命名是否符合规则，密码是否符合规则等等，不过其实密码应该不需要的，不过当时还是加上了。然后再通过 PHP 后台来进行数据的判断，是否重命名，是否符合简单密码等等吧，不过其实这个简单密码没必要加在这里，可以之前在前面加上判断就好了，可以直接删除掉这段。

然后 PHP 文件就是：

1
2
3
4
5
6

<?php
if($_POST["name"] == "aaaaa"){
  echo "yes";
} else {
  echo "no";
}

这个，之所以没有结束符号，是因为上课的老师讲如果是一个单独的 PHP 文件，里面全是 PHP 代码的话，不需要结束符号，我觉得应该是如果你只是一个单独的 PHP 文件的话，那么你后期再加代码直接往上加就行了，而不需要先把结束符号往后回车几下。

说一下这个 $("span").eq(1).html("密码太简单了，请换一种密码").css("color", "red"); 这个就是获取子类的方法，通过 $("span") 选中 span 标签，然后通过 eq 来遍历一下这个标签，因为一共就两个，所以选择第二个的话就是 1 了，之后再用 html 方法来修改显示的文字，css 方法来修改样式。 前面的代码没什么难度，也就是这个获取第二个字类稍微有点难度。

再说下我想加的效果，就是通过判断，是否名字和密码都符合规则，如果符合的话就出现一个弹窗，本来后面是加的一个 if 判断，前面命名一个变量即可，但是后来发现你在 jQuery 里修改值没有效果，所以就暂时先放一下，问问老师，嘿嘿。

今天我想分享一些关于SEO优化的基础知识，这些知识几乎每位SEO专业人员都会明白。一种SEO策略是在其他论坛上发布文章，首先发布一些具有技术性的文章，然后再发布自己网站的链接。最近，我在oschina论坛上发布了一些文章，但今天我没有太多新的内容要发布，所以我决定分享一段小代码，用于爬取我的oschina论坛内的链接和标题。这个过程非常简单，非常容易。

下面是Python代码示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

from requests_html import HTMLSession

session = HTMLSession()
url = "https://my.oschina.net/u/4798232"
r = session.get(url)

for i in range(1, 12):
    i = str(i)
    url_xpath = '//div[@id="newestBlogList"]/div[1]/div[' + i + ']/div/a'
    title = r.html.xpath(url_xpath, first=True).text
    link_xpath = url_xpath + '/@href'
    link = r.html.xpath(link_xpath, first=True)
    a = "原"
    if a not in title:
        print(title)
        print(link)
    else:
        print(title.replace(a, ""))
        print(link)

这段代码使用XPath来操作，具体如何复制XPath可以参考您提供的文章中的动图示例。然后，我们导入所需的库并定义了要访问的URL。在循环中，我们通过XPath来获取链接和标题。

不过，注意到一开始有些文章的XPath中多了一个[1]，解决这个问题时的方法是尝试不加[1]，看看是否仍然可以获取文章的内容。此外，注意获取标题时需要使用.text属性来获取文字，但获取链接时不需要。

还可以进一步将标题和链接保存到JSON文件中，或使用open和write来将它们写入文本文件中，然后可以在需要时读取它们。这将获取文章的所有链接，并通过查询文章内容的XPath来获取所有文章内容。

如果有任何问题或需要进一步的指导，请随时在评论区提问，我将尽力回答。