今天闲的无聊，所以准备看看漫画，但是发现大多数的漫画一页一页翻，可能会来不及加载，但是确实是很想看接下来的内容，慢慢等的话确实有点难受。

所以准备用Python写一个爬虫，来爬取相关的资源，下载到本地，之后用键盘的左右键翻看就好了。大不了在爬取漫画的过程中干点别的。

因为那个网站有点不可描述，所以我就简单说下过程，不贴图了。

首先是分析一下这个漫画的链接，是从哪里得到的。我这个是虽然有img但是实际上他的图片储存在了data-src里，所以我们先copy一下他的xpath //*[@id="content"]/div[2]/div[4]/a/img 然后将img后面添加上@data-src就能获取这个属性的内容了。

之后我们需要写一个解析页面的代码，然后将解析出来的图片进行保存就好了。这里我是用的函数来写的，方便维护，毕竟Python爬取漫画还是挺多代码的。

1
2
3
4
5
6
7
8
9

def get_links(url):
    """获取所有的链接"""
    headers = {
        "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.100 Safari/537.36"
    }
    pagehtml = requests.get(url, headers=headers)
    pagehtml_jiexi = etree.HTML(pagehtml.content.decode('gbk'))
    links = pagehtml_jiexi.xpath('//*[@id="image-container"]/img/@data-src')
    return links

首先是解析一下内容，先全部阅读漫画内容，让所有的图片在同一个页面上，之后获取所有的图片链接，再进行爬取。

然后就是判断图片的格式，这个是因为我爬的漫画是由png格式或者jpg格式的，所以写了个判断。

1
2
3
4
5
6

def judge_picture(url):
    """判断图片的格式"""
    examplelink = url.pop()
    pictureformat = re.findall(r'.*([a-z]{3})', examplelink)
    pictureformat = pictureformat.pop()
    return pictureformat

然后再就是进行下载了。这里用到了if，根据格式来命名。

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

def downloads(newlink):
    """下载"""
    links = get_links(newlink)
    document_name = get_name(newlink)  # 获取单个链接
    picturefotmat = judge_picture(links)
    a = 1
    if picturefotmat == "jpg":
        for link in range(len(links)):
            if a % 50 == 0:
                time.sleep(30)
            onelink = links.pop()
            picture_info = get_pictureinfo(onelink)
            pictureid = re.findall(r'.*/([0-9]*).jpg', onelink)
            pictureid = pictureid.pop()
            with open(document_name + '/' + pictureid + '.jpg', 'wb') as mh:
                mh.write(picture_info)
            print("已完成" + pictureid + '.jpg')
            a += 1
    elif picturefotmat == 'png':
        for link in range(len(links)):
            if a % 50 == 0:
                time.sleep(30)
            onelink = links.pop()
            picture_info = get_pictureinfo(onelink)
            pictureid = re.findall(r'.*/([0-9]*).png', onelink)
            pictureid = pictureid.pop()
            with open(document_name + '/' + pictureid + '.png', 'wb') as mh:
                mh.write(picture_info)
            print("已完成" + pictureid + '.png')
            a += 1
    totalinfo = "文件夹:" + document_name + ",漫画链接:" + newlink + '\n'
    with open('downloadinfo.txt', 'a') as info:
        info.write(totalinfo)
    print("完成")

之所以加了一些print，是因为爬取的过程中太无聊了，没有提示的话会疯掉的。

然后 重点说一下为什么要用到time，以及前面的try，time是因为反爬，虽然我爬的网站大概率没有，但是每隔多少图片休息一下还是好的。

之后那个try是为了防止超时，如果有自己写过的话，会发现有的时候爬着爬着，就不动了。这就是超时了，所以加上一个try进行抓取，如果超时就进行重新获取，然后如果3次都不行的话，就继续下一个。

当然实际上到底是不是这么写，我也不清楚，因为我确实没遇到超时的报错，因为我之前没加timeout，所以他会一直卡在一个地方不动，然后我直接加了timeout和try了。

具体的代码可以看我的GitHub库：https://github.com/datehoer/yellow

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

2021年的第一天，准备开始着手学习 Vue 了，主要其实还是为了拓展一下自己的知识面，再加上现在前端找工作，大多数都是要会 Vue 或者 React 的，所以准备趁着假期时间充足，学习一下 Vue 框架。

其实简单来说，Vue 的官方教程已经很明确了，但是毕竟人家是开发语言的，就算再怎么细致，也会有想不到的，就像我们想不到居然有人不会写 for 循环一样。 Vue 的官方文档

Vue 的官方文档写得非常详细了，但是还是有好多不懂的，比如说 Vue 中的 attribute 和 property。其实我也才看到实例部分，这个是边查边写的，主要是记录一下自己的学习状态。

简单来说，attribute 和 property 分别是有关 HTML 中的内容。attribute 是元素标签的属性，而 property 则是元素对象的属性。实际上之所以会引出 attribute 和 property，是因为 Vue 可以直接修改 HTML 网页中的变量，比如说最简单的那个例子：

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

<div id="s1_on">
  <p>{{message}}</p>
  <input type="button" value="反转" v-on:click="rever">
</div>

var s1_on = new Vue({
  el: "#s1_on",
  data: {
    message: "abcdefg"
  },
  methods: {
    rever: function() {
      this.message = this.message.split("").reverse().join("")
    }
  },
})

通过点击按钮使得本来已经设置的变量进行反转，这就是修改本来的值。当然其实说实在的，还是有更简单的，比如说我们直接在控制台输入创建的 Vue 的名字，后面跟上要修改的属性值，就能进行修改了。比如说我要修改 message，那么我可以直接使用 s1_on.message="asdasdad" 来进行修改。

而我们在 Vue 中对数据进行处理的时候，大多情况下都是默认的对 attribute 进行处理，而如果要对 property 进行处理的话，需要在后面加上 .prop。

• 变量作为 attribute 和 property 的 value 的绑定关系会在用户发生交互更新值后失效
• Vue.js 一般使用 :value 即可让 value 作为 property
• Vue.js 动态模版需要使用 :value.prop 才可让 value 作为 property

好了，今天的介绍就到这里了，如果想要知道更多的 Vue 的内容，推荐直接去 Vue 的官方文档进行查看。当然，如果有什么不会的也可以在评论区留言，我会在看到的第一时间进行回复的。

其实这个我好早以前就发现了，用 CE 修改钱数的话容易出现负值，然后后来有一次突发奇想，就把 CE 修改 GTA5 线下钱数的方法想出来了。

其实非常简单，我们修改股票。

首先随便购买市场上的随意一个的股票，买入随机数量，之后我们用 CE 搜索这个值，然后不断修改持有的股票数量，直到最后找到只剩下一个值。

然后我们修改这个值就好了，注意不要修改得太大，否则会出现问题的。

有疑问可以在评论区留言，我会在看到的第一时间进行回复的。

今天发一下我之前写了一会的关于爬取传智播客习题的爬虫。目前来说，其实是因为最近期末，然后想要爬取一下题库里的题，然后做一个题库出来，之所以这样，是因为老师并没有公布答案！ 不过没想到传智播客居然是用 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; 这个就行了。

发一篇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 来实现简单的用户注册功能，然后虽然没怎么仔细听，但是还是会个大概，再加上学了一上午有点小困，所以敲个代码来刺激一下自己。 其实 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 里修改值没有效果，所以就暂时先放一下，问问老师，嘿嘿。