# 匹配文章中的全部<pre></pre>对,要获取到pre对，需要在正则表达式的外面加上括号()
prePattern = r"(<pre.*?>(\n|.)*?</pre.*?>)"
例子：
# coding:utf-8
from databaseInfo import *
import re
import time
from Database import Database
import requests
import random
from hashlib import md5
from bs4 import BeautifulSoup
import html
import json
from w3lib import html as w3lib_html
# 匹配文章中的全部<pre></pre>对
prePattern = r"(<pre.*?>(\n|.)*?</pre.*?>)"
# 提取内容中全部<pre></pre>到列表pres
def getPres(str):
pres = re.compile(prePattern, re.I).findall(str)
return pres
str = '''
<div id="con"><div id="content"><br> <div id="navCategory"><br><h5 class="catalogue">目录</h5><br><ul class="first_class_ul"><br><li><a href="#_label0"><span style="background-color: initial;">首先我们需要搭建好页面布局</span></a></li><br><li><a href="#_label1">JS功能1</a></li><br><li><a href="#_label2">JS功能2</a></li><br><li><a href="#_label3">JS功能3</a></li><br><li><a href="#_label4">JS功能4</a></li><br></ul><br></div><br><p>效果图如下：</p><br><p style="text-align: center;"><img src="https://img.itworkman.com/images/20211218/2021112394608304.gif" alt=""></p><br><p class="maodian"><a name="_label0"></a></p><br><h2><span style="background-color: initial;">首先我们需要搭建好页面布局</span></h2><br><p>html的代码如下：</p><br><div class="jb51code"><br><pre class="brush:xhtml;"><br>​<br><div class="contentrightbottom"><br> <div class="contentrightbottombox"><br> <br> <div class="crbottomlogin"><br> <div class="login"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >登录</a></div><br> <div class="regist"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >注册</a></div><br> </div><br> <div class="loginregistbox"><br> <ul><br> <li><br> <div class="crbottomcontent"><br> <input type="text" placeholder="邮箱/手机号码/小米ID" class="user"><br> <br><br> <p class="pzh">请输入账号</p><br> <div class="pwdeyebox"><br> <input type="password" placeholder="密码" class="pwd"><br><br> <img src="close.png" alt="" class="eye"><br> </div><br> <p class="pmm">请输入密码</p><br> <input type="checkbox" class="checks"><br> <span>已阅读并同意小米账号</span><br> <span>用户协议</span><br> <span>和</span><br> <span>隐私政策</span><br><br> <button>登录</button><br><br> <span class="forgetpwd"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >忘记密码？</a></span><br> <span class=" phonelogin"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >手机号登录</a></span><br> <p class="other">其他登录方式</p><br> <div class="crbottomcontentimg"><br> <span><img src="share1.png" alt=""></span><br> <span><img src="share2.png" alt=""></span><br> <span><img src="share3.png" alt=""></span><br> <span><img src="share4.png" alt=""></span><br> </div><br> </div><br> </li><br> <li><br> <div class="crbottomcontentregist"><br> <input type="text" placeholder="请输入注册账号" class="ruser"><br> <p class="rpzh">请输入账号</p><br> <br><br> <input type="password" placeholder="请输入密码" class="rpwd"><br> <p class="rpmm">请输入密码</p><br><br> <input type="number" class="rphone" placeholder="短信验证码"><br> <p class="rpyzm">请输入验证码</p><br><br> <input type="checkbox" class="checks"><br> <span>已阅读并同意小米账号</span><br> <span>用户协议</span><br> <span>和</span><br> <span>隐私政策</span><br><br> <button>登录</button><br><br> <span class="forgetpwd"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >忘记密码？</a></span><br> <span class=" phonelogin"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >手机号登录</a></span><br> <p class="other">其他登录方式</p><br> <div class="crbottomcontentimg"><br> <span><img src="share1.png" alt=""></span><br> <span><img src="share2.png" alt=""></span><br> <span><img src="share3.png" alt=""></span><br> <span><img src="share4.png" alt=""></span><br> </div><br> </div><br> </li><br> </ul><br> </div><br> <br> </div><br> <p class="conpany">小米公司版权所有-京ICP备10046444-京公网安备11010802020134号</p><br> </div><br> <br>​</pre><br></div><br><p>整个登录注册分为上下两个盒子：</p><br><p><span style="background-color: initial;">上面的盒子装登录和注册两个文字盒子，作为JS的点击滑动按钮</span></p><br><p><span style="background-color: initial;">下面的盒子使用小li分别装登录和注册两个盒子，然后让小li浮动起来，让登录注册两个盒子浮动在一行，然后给contentrightbottombox这个大盒子添加overfl:hidden属性，超出的隐藏起来之后我们就可以写JS功能代码了</span></p><br><p style="text-align: center;"><img src="https://img.itworkman.com/images/20211218/2021112394913044.jpg" alt=""></p><br><p class="maodian"><a name="_label1"></a></p><br><h2>JS功能1</h2><br><p>点击登录注册进行切换</p><br><p style="text-align: center;"><img src="https://img.itworkman.com/images/20211218/2021112395009689.gif" alt=""></p><br><p><span style="background-color: initial;">在css里面我们通过小li的浮动将登录和注册的盒子浮动在一排</span></p><br><p><span style="background-color: initial;">当我们点击注册按钮的时候只需要让包裹小li的ul移动到注册盒子上面即可</span></p><br><p><span style="background-color: initial;">当我们点击登录按钮的时候也只需要让ul移动到登录的盒子上面</span></p><br><p>代码如下：</p><br><div class="jb51code"><br><pre class="brush:js;"><br> var registbtn = document.querySelector('.regist');<br> var loginbtn = document.querySelector('.login'); <br> var loginregistbox = document.querySelector('.loginregistbox');<br> var boxul = loginregistbox.querySelector('ul');<br> <br> registbtn.addEventListener('click', function () {<br> boxul.style.transition = 'all 0.3s';<br> boxul.style.transform = 'translateX(-414px)';<br> registbtn.style.borderBottom = '4px solid #FF6900';<br> loginbtn.style.borderBottom = 'none';<br> <br> });<br> loginbtn.addEventListener('click', function () {<br> boxul.style.transition = 'all 0.3s';<br> boxul.style.transform = 'translateX(0px)';<br> loginbtn.style.borderBottom = '4px solid #FF6900';<br> registbtn.style.borderBottom = 'none';<br> <br> });</pre><br></div><br><p class="maodian"><a name="_label2"></a></p><br><h2>JS功能2</h2><br><p>点击input盒子里面的文字缩小并往上移动</p><br><p style="text-align: center;"><img src="https://img.itworkman.com/images/20211218/2021112395131158.gif" alt=""></p><br><p><span style="background-color: initial;">在小米官网的登录里面，它是使用lable标签来实现，我是直接给input里面的placeholder添加样式来实现</span></p><br><p><span style="background-color: initial;">修改placeholder的样式我们是通过伪类的方式实现，并且给它定位让它缩小后移动到要求的位置，并且加上了过渡，看起来好看一点点</span></p><br><p><span style="background-color: initial;">代码如下：</span></p><br><div class="jb51code"><br><pre class="brush:js;"><br> <br> var user = document.querySelector('.user');<br> var pwd = document.querySelector('.pwd');<br> var pzh = document.querySelector('.pzh');<br> var pmm = document.querySelector('.pmm');<br> <br> user.addEventListener('focus', function () {<br> user.style.border = '1px solid red';<br> user.style.boxShadow = '0 0 1px 2px #FFDECC';<br> user.style.backgroundColor = '#FCF2F3';<br> user.style.transition = 'all 0.3s';<br> user.setAttribute('class', 'user change1');<br> <br> });</pre><br></div><br><div class="jb51code"><br><pre class="brush:js;"><br>.change1::placeholder{<br> position: absolute;<br> top: 5px;<br> left: 20px;<br> font-size: 12px;<br>color: #C1C1C1;<br>transition: all .3s;<br> <br>}<br>.change2::placeholder{<br> font-size: 17px;<br> color: red;<br> transition: all .3s;<br> }</pre><br></div><br><p class="maodian"><a name="_label3"></a></p><br><h2>JS功能3</h2><br><p>跳出提示"请输入账号"</p><br><p style="text-align: center;"><img src="https://img.itworkman.com/images/20211218/2021112395302698.gif" alt=""></p><br><p><span style="background-color: initial;">在html添加一个p标签(其他标签也可以)，在css里面修改他的样式并给它display样式让他隐藏起来</span></p><br><p><span style="background-color: initial;">在js里面 失去焦点的时候判断文本框里面是否有值，有值就让他隐藏，否则就显示</span></p><br><p>代码如下：</p><br><div class="jb51code"><br><pre class="brush:js;"><br>user.addEventListener('blur', function () {<br> <br> user.style.border = 'none';<br> user.style.boxShadow = 'none';<br> user.style.transition = 'all .3s';<br> if (user.value == '') {<br> pzh.style.display = 'block';<br> user.style.backgroundColor = '#FCF2F3';<br> user.setAttribute('class', 'user change2');<br> } else {<br> pzh.style.display = 'none';<br> user.style.backgroundColor = '#F9F9F9';<br> user.style.fontSize = '17px';<br> <br> user.setAttribute('class', 'user change1');<br> }<br> });</pre><br></div><br><div class="jb51code"><br><pre class="brush:js;"><br>.rpzh,.rpmm,.rpyzm{<br> display: none;<br> color: red;<br> font-size: 12px;<br> margin-top: 10px;<br> margin-left: 40px;<br> margin-bottom: -30px;<br>}</pre><br></div><br><p class="maodian"><a name="_label4"></a></p><br><h2>JS功能4</h2><br><p>显示密码和隐藏密码</p><br><p style="text-align: center;"><img src="https://img.itworkman.com/images/20211218/2021112395432299.gif" alt=""></p><br><p>定义一个flag变量来控制开关图片的切换和input中的type属性中的值</p><br><div class="jb51code"><br><pre class="brush:js;"><br> var flag = 0;<br> eyes.addEventListener('click', function () {<br> if (flag == 0) {<br> pwd.type = 'text';<br> eyes.src = 'open.png';<br> flag = 1;<br> }<br> else {<br> pwd.type = 'password';<br> eyes.src = 'close.png';<br> flag = 0;<br> }<br> });</pre><br></div><br><p>到此这篇关于JavaScript仿小米官网注册登录功能的实现的文章就介绍到这了,更多相关JavaScript 的内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！</p><br> <br> <br><br> </div><br> <br></div>
'''
strList = getPres(str)
i = 1
for one in strList:
print(i)
print('--------------------------------')
print(one)
i = i + 1
