整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
格(行)排序:
<html>
<head>
<meta charset="utf-8">
<title>無(wú)標(biāo)題文檔</title>
<script>
window.onload=function (){
var oTab=document.getElementById('tab1');
var oBtn=document.getElementById('btn1');
oBtn.onclick=function (){
var arr=[];
for(var i=0;i<oTab.tBodies[0].rows.length;i++){
arr[i]=oTab.tBodies[0].rows[i]; //將表格行元素集合轉(zhuǎn)換為數(shù)組
}
arr.sort(function (tr1, tr2){ //自定義排序函數(shù)
var n1=parseInt(tr1.cells[0].innerHTML);
var n2=parseInt(tr2.cells[0].innerHTML);
return n1-n2;
});
for(var i=0;i<arr.length;i++){
oTab.tBodies[0].appendChild(arr[i]);
}
};
};
</script>
</head>
<body>
<input id="btn1" type="button" value="排序" />
<table id="tab1" border="1" width="500">
<thead>
<td>ID</td>
<td>姓名</td>
<td>年齡</td>
<td>操作</td>
</thead>
<tbody>
<tr>
<td>2</td>
<td>張三</td>
<td>23</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>王四</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>Blue</td>
<td>27</td>
<td></td>
</tr>
<tr>
<td>5</td>
<td>張偉</td>
<td>24</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>李四</td>
<td>28</td>
<td></td>
</tr>
<tr>
<td>4</td>
<td>王五</td>
<td>25</td>
<td></td>
</tr>
</tbody>
</table>
</body>
</html>appendChild()方法理解:
target.appendChild(newnode)
1.先把元素從原有父級(jí)上刪掉
2.添加到新的父級(jí)
知不覺(jué)今年的520就過(guò)去了，祝沒(méi)有脫單的小伙伴抓緊發(fā)揮你的獨(dú)特的魅力，明年520之前脫單。恭喜已經(jīng)脫單的朋友，祝你們幸福！
今年520為了給女友買(mǎi)禮物可也算是煞費(fèi)苦心了，當(dāng)然買(mǎi)禮物還不如幫她清空購(gòu)物車(chē)來(lái)得直接一些。不知道各位小伙伴今年買(mǎi)了什么禮物啊。
除了重要的節(jié)日需要網(wǎng)上購(gòu)買(mǎi)之外，平時(shí)她也是需要買(mǎi)日常的衣物，今天就來(lái)獲取淘寶網(wǎng)的所有文胸?cái)?shù)據(jù)，供她挑選，當(dāng)然最后結(jié)賬的也是你。
本次文章的字?jǐn)?shù)可能會(huì)比之前多一些，我也是爭(zhēng)取每一次爬取的技術(shù)都會(huì)提高一些，這樣大家閱讀起來(lái)也會(huì)輕松一些，不至于看不懂。今天的文章大概需要10分鐘左右的時(shí)間才可以看完，希望各位小伙伴可以耐心一點(diǎn)。
隨著時(shí)間的推移，文章難度需要提升，現(xiàn)在每篇文章都需要花兩到3天的時(shí)間才可以完成，又要錄制視頻教程，所以會(huì)比之前更新的慢一些，希望小伙伴們可以理解。
在爬取信息之前需要先介紹一下，Python的一個(gè)自動(dòng)化測(cè)試工具selenium，這個(gè)是本次的重點(diǎn)內(nèi)容。如果熟悉selenium的小伙伴可以直接略過(guò)。
1.selenium簡(jiǎn)介
selenium是一個(gè)用于測(cè)試網(wǎng)站的自動(dòng)化測(cè)試工具，支持很多主流的瀏覽器，比如：谷歌瀏覽器、火狐瀏覽器、IE、Safari等。
2.支持多個(gè)操作系統(tǒng)
如windows、Linux、IOS、Android等。
3、安裝selenium
pip install Selenium
4、安裝瀏覽器驅(qū)動(dòng)
1、Chrome驅(qū)動(dòng)文件下載：
https://chromedriver.storage.googleapis.com/index.html?path=2.35/
2、火狐瀏覽器驅(qū)動(dòng)下載：
https://github.com/mozilla/geckodriver/releases/tag/v0.26.0
5、配置環(huán)境變量
配置環(huán)境變量的方法非常簡(jiǎn)單，首先將下載好的驅(qū)動(dòng)進(jìn)行解壓，放到你安裝Python的目錄下，即可。
因?yàn)橹埃谂渲肞ython環(huán)境變量的時(shí)候，就將Python的目錄放到我的電腦–>屬性–>系統(tǒng)設(shè)置–>高級(jí)–>環(huán)境變量–>系統(tǒng)變量–>Path
Python安裝路徑
二、selenium快速入門(mén)
1、selenium提供8種定位方式
1、id
2、name
3、class name
4、tag name
5、link text
6、partial link text
7、xpath
8、css selector
2、定位元素的8種方式詳解
3、selenium庫(kù)下webdriver模塊常用的方法與使用
控制瀏覽器的一些方法
4、代碼實(shí)例
from selenium import webdriverimport time# 創(chuàng)建Chrome瀏覽器對(duì)象，這會(huì)在電腦中打開(kāi)一個(gè)窗口browser=webdriver.Chrome()# 通過(guò)瀏覽器向服務(wù)器發(fā)起請(qǐng)求browser.get('https://www.baidu.com')time.sleep(3)# 刷新瀏覽器browser.refresh()# 最大化瀏覽器窗口browser.maximize_window()# 設(shè)置鏈接內(nèi)容element=browser.find_element_by_link_text('抗擊肺炎')# 點(diǎn)擊'抗擊肺炎'element.click()關(guān)于selenium的簡(jiǎn)單介紹就先到這里了，更多詳細(xì)內(nèi)容大家可以去selenium官方文檔查看。關(guān)于selenium的簡(jiǎn)單介紹就先到這里了，更多詳細(xì)內(nèi)容大家可以去selenium官方文檔查看。
爬取數(shù)據(jù)
從上圖，可以看到需要獲取的信息是：價(jià)格、商品名稱(chēng)、付款人數(shù)、店鋪名稱(chēng)。
現(xiàn)在我們開(kāi)始進(jìn)入主題。
首先，需要輸入你要搜索商品的內(nèi)容，然后根據(jù)內(nèi)容去搜索淘寶信息，最后提取信息并保存。
1、搜素商品
我在這里定義一個(gè)搜索商品的函數(shù)和一個(gè)主函數(shù)。
搜索商品
在這里需要?jiǎng)?chuàng)建一個(gè)瀏覽器對(duì)象，并且根據(jù)該對(duì)象的get方法來(lái)發(fā)送請(qǐng)求。
從上圖可以發(fā)現(xiàn)搜索框的id值為q，那么這樣就簡(jiǎn)單很多了，有HTML基礎(chǔ)的朋友肯定知道id值是唯一的。
通過(guò)id值可以獲取到文本框的位置，并傳入?yún)?shù)，然后點(diǎn)擊搜索按鈕。
從上圖可以發(fā)現(xiàn)搜索按鈕在一個(gè)類(lèi)里面，那么可以通過(guò)這個(gè)類(lèi)來(lái)定位到搜索按鈕，并執(zhí)行點(diǎn)擊操作。
當(dāng)點(diǎn)擊搜索按鈕之后，網(wǎng)頁(yè)便會(huì)跳轉(zhuǎn)到登錄界面，要求我們登錄，如下圖所示：
登錄成功后會(huì)發(fā)現(xiàn)，里面的數(shù)據(jù)總共有100頁(yè)面。
上圖是前三頁(yè)的url地址，你會(huì)發(fā)現(xiàn)其實(shí)并沒(méi)有太大的變化，經(jīng)過(guò)測(cè)試發(fā)現(xiàn)，真正有效的參數(shù)是框起來(lái)的內(nèi)容，它的變化會(huì)導(dǎo)致頁(yè)面的跳轉(zhuǎn)，很明顯第一頁(yè)的s=0，第二頁(yè)s=44，第三頁(yè)s=88，以此類(lèi)推，之后就可以輕松做到翻頁(yè)了。
搜搜商品的代碼如下：
代碼如下框
def search_product(key_word): ''' :param key_word: 搜索關(guān)鍵字 :return: ''' # 通過(guò)id值來(lái)獲取文本框的位置，并傳入關(guān)鍵字 browser.find_element_by_id('q').send_keys(key_word) # 通過(guò)class來(lái)獲取到搜索按鈕的位置，并點(diǎn)擊 browser.find_element_by_class_name('btn-search').click() # 最大化窗口 browser.maximize_window() time.sleep(15) page=browser.find_element_by_xpath('//div[@class="total"]').text # 共 100 頁(yè)， page=re.findall('(\d+)', page)[0] # findall返回一個(gè)列表 return page2、獲取商品信息并保存
獲取商品信息相對(duì)比較簡(jiǎn)單，可以通過(guò)xpath方式來(lái)獲取數(shù)據(jù)。在這里我就不再論述。在這邊我創(chuàng)建了一個(gè)函數(shù)get_product來(lái)獲取并保存信息。在保存信息的過(guò)程中使用到了csv模塊，目的是將信息保存到csv里面。
代碼如下：
def get_product(): divs=driver.find_elements_by_xpath('//div[@class="items"]/div[@class="item J_MouserOnverReq "]')# 這里返回的是列表，注意：elements for div in divs: info=div.find_element_by_xpath('.//div[@class="row row-2 title"]/a').text price=div.find_element_by_xpath('.//strong').text + '元' nums=div.find_element_by_xpath('.//div[@class="deal-cnt"]').text names=div.find_element_by_xpath('.//div[@class="shop"]/a').text print(info, price, nums, names,sep='|') with open('data3.csv', mode='a', newline='', encoding='utf-8') as file: csv_writer=csv.writer(file, delimiter=',') # 指定分隔符為逗號(hào) csv_writer.writerow([info, price, nums, names])3、構(gòu)造URL實(shí)現(xiàn)翻頁(yè)爬取
從上面的圖片中可以發(fā)現(xiàn)連續(xù)三頁(yè)URL的地址，其實(shí)真正變化并不是很多，經(jīng)過(guò)測(cè)試發(fā)現(xiàn)，只有q和s兩個(gè)參數(shù)是有用的。
構(gòu)造出的url：https://s.taobao.com/search?q={}&s={}
因?yàn)閝是你要搜索的商品，s是設(shè)置翻頁(yè)的參數(shù)。這段代碼就放在了主函數(shù)里面
代碼如下：
def main(): browser.get('https://www.taobao.com/') # 向服務(wù)器發(fā)送請(qǐng)求 page=search_product(key_word) print('正在爬取第1頁(yè)的數(shù)據(jù)') get_product() # 已經(jīng)獲得第1頁(yè)的數(shù)據(jù) page_nums=1 while page_nums !=page: print('*'*100) print('正在爬取第{}頁(yè)的數(shù)據(jù)'.format(page_nums+1)) browser.get('https://s.taobao.com/search?q={}&s={}'.format(key_word, page_nums*44)) browser.implicitly_wait(10) # 等待10秒 get_product() page_nums +=1最后結(jié)果，如下圖所示：
—— E N D ——
好了，又到了該說(shuō)再見(jiàn)的時(shí)候了，希望我的文章可以給你帶來(lái)知識(shí)，帶給你幫助。同時(shí)也感謝你可以抽出你寶貴的時(shí)間來(lái)閱讀，創(chuàng)作不易，如果你喜歡的話(huà)，點(diǎn)個(gè)關(guān)注再走吧。更多精彩內(nèi)容會(huì)在后續(xù)更新，你的支持就是我創(chuàng)作的動(dòng)力，我今后也會(huì)盡力給大家書(shū)寫(xiě)出更加優(yōu)質(zhì)的文章。
.說(shuō)明：
推薦指數(shù)：★★★★
通俗易懂，小白一看就會(huì)，高手請(qǐng)飄過(guò)。
學(xué)python也是需要懂一點(diǎn)Html、Css、JavaScript的基礎(chǔ)知識(shí)的。
建議使用vscode編輯器。
2.效果圖1
3.代碼：保存為html，用瀏覽器打開(kāi)即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓形百分比進(jìn)度條效果</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.bg{
width: 200px;
height: 200px;
border-radius: 100%;
background: #ccc;
position: relative;
margin: 20px auto;
}
.circle-right, .circle-left, .mask-right, .mask-left{
width: 200px;
height: 200px;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
}
.circle-right, .circle-left{
background: skyblue;
}
.mask-right, .mask-left{
background: #ccc;
}
.circle-right, .mask-right{
clip: rect(0,200px,200px,100px);
}
.circle-left, .mask-left{
clip: rect(0,100px,200px,0);
}
.text{
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
font-size: 34px;
color: deepskyblue;
border-radius: 100%;
background: #fff;
position: absolute;
top: 20px;
left: 20px;
}
</style>
</head>
<body>
<div class="bg">
<div class="circle-right"></div>
<!--100%是顯示百分?jǐn)?shù)，動(dòng)態(tài)顯示由0~100-->
<div class="text">100%</div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//獲取百分比值
var num=parseInt($('.text').html());
//通過(guò)計(jì)時(shí)器來(lái)顯示過(guò)渡的百分比進(jìn)度
var temp=0;
var timer=setInterval(function(){
calculate(temp);
//清除計(jì)時(shí)器結(jié)束該方法調(diào)用
if(temp==num){
clearInterval(timer);
}
temp++;
},30)
//改變頁(yè)面顯示百分比
function calculate(value){
//改變頁(yè)面顯示的值
$('.text').html(value + '%');
//清除上次調(diào)用該方法殘留的效果
$('.circle-left').remove();
$('.mask-right').remove();
//當(dāng)百分比小于等于50
if(value <=50){
var html='';
html +='<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
//元素里添加子元素
$('.circle-right').append(html);
}else{
value -=50;
var html='';
html +='<div class="circle-left">';
html +='<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
html +='</div>';
//元素后添加元素
$('.circle-right').after(html);
}
}
})
</script>
</body>
</html>4.拆分法：把一個(gè)含有css和js（JavaScript）的html，拆掉三個(gè)文件，一個(gè)叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一個(gè)文件夾內(nèi)。這是./的意思，也可以指定文件夾。
4.1 cirbar1.html的代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圓形百分比進(jìn)度條效果v2</title>
<!--如果是style type="text/css"這種直接在html中設(shè)置css，注意起始是*，不是點(diǎn)-->
<!--style type="text/css"-->
<link href="./cirbar1.css" rel="stylesheet" />
</head>
<body>
<div class="bg">
<div class="circle-right"></div>
<div class="text">100%</div>
</div>
<!--這個(gè)外部js文件=jquery.min.js，不能少，否則不能動(dòng)了-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>
<!--同樣的，把寫(xiě)在html的js，新建一個(gè)cirbar1.js，復(fù)制下去，保存，這樣子簡(jiǎn)潔很多-->
<!--script type="text/javascript"-->
<script src="./cirbar1.js"></script>
</body>
</html>4.2 cirbar1.css的代碼：
*{
margin: 0;
padding: 0;
}
.bg{
width: 200px;
height: 200px;
border-radius: 100%;
background: #ccc;
position: relative;
margin: 20px auto;
}
.circle-right, .circle-left, .mask-right, .mask-left{
width: 200px;
height: 200px;
border-radius: 100%;
position: absolute;
top: 0;
left: 0;
}
.circle-right, .circle-left{
background: skyblue;
}
.mask-right, .mask-left{
background: #ccc;
}
.circle-right, .mask-right{
clip: rect(0,200px,200px,100px);
}
.circle-left, .mask-left{
clip: rect(0,100px,200px,0);
}
.text{
width: 160px;
height: 160px;
line-height: 160px;
text-align: center;
font-size: 34px;
color: deepskyblue;
border-radius: 100%;
background: #fff;
position: absolute;
top: 20px;
left: 20px;
}4.3 cirbar1.js的代碼：
$(function(){
//獲取百分比值
var num=parseInt($('.text').html());
//通過(guò)計(jì)時(shí)器來(lái)顯示過(guò)渡的百分比進(jìn)度
var temp=0;
var timer=setInterval(function(){
calculate(temp);
//清除計(jì)時(shí)器結(jié)束該方法調(diào)用
if(temp==num){
clearInterval(timer);
}
temp++;
},30)
//改變頁(yè)面顯示百分比
function calculate(value){
//改變頁(yè)面顯示的值
$('.text').html(value + '%');
//清除上次調(diào)用該方法殘留的效果
$('.circle-left').remove();
$('.mask-right').remove();
//當(dāng)百分比小于等于50
if(value <=50){
var html='';
html +='<div class="mask-right" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
//元素里添加子元素
$('.circle-right').append(html);
}else{
value -=50;
var html='';
html +='<div class="circle-left">';
html +='<div class="mask-left" style="transform:rotate('+ (value * 3.6) +'deg)"></div>';
html +='</div>';
//元素后添加元素
$('.circle-right').after(html);
}
}
})==============================
再來(lái)一個(gè)，不用外部js文件的圓形進(jìn)度條
順帶回顧一下相關(guān)知識(shí)。
==============================
5.效果圖
6.三個(gè)文件，放在同一個(gè)文件夾中
6.1 cirbar.html代碼：
<!--第1步---聲明html5-->
<!DOCTYPE html>
<!--第2步---html大框架-->
<html lang="en">
<!--第2-1步---head部分-->
<head>
<!--第2-1-1步---meta部分：聲明字符編碼格式：utf-8-->
<!--注意與python的第一行聲明一樣：# -*- coding: utf-8 -*-->
<meta charset="utf-8" />
<!--第2-1-2步---標(biāo)題名稱(chēng)-->
<title>圓形進(jìn)度條v1</title>
<!--注意：./代表同一個(gè)文件夾下，也就是css和js文件與本html文件放在同一個(gè)文件夾下-->
<!--第2-1-3步---導(dǎo)入css文件-->
<link href="./cirbar.css" rel="stylesheet" />
</head>
<!--第2-2步---body部分-->
<body>
<!--第2-2-1步---定義畫(huà)布部分，注意沒(méi)有逗號(hào)隔開(kāi)，大小設(shè)置-->
<canvas class="canvas" id="canvas" width="400" height="400"></canvas>
<!--第2-2-2步---導(dǎo)入js文件部分-->
<script src="./cirbar.js"></script>
<!--注意收尾-->
</body>
<!--注意收尾-->
</html>6.2 cirbar.css代碼：
.canvas {
/*畫(huà)布的背景顏色設(shè)置為：黑色*/
background:#303030;
}6.3 cirbar.js代碼：
window.onload=function () {
var canvas=document.getElementById('canvas'), //獲取canvas元素
context=canvas.getContext('2d'), //獲取畫(huà)圖環(huán)境，指明為2d
centerX=canvas.width / 2, //Canvas中心點(diǎn)x軸坐標(biāo)
centerY=canvas.height / 2, //Canvas中心點(diǎn)y軸坐標(biāo)
rad=Math.PI * 2 / 100, //將360度分成100份，那么每一份就是rad度
speed=0.1; //加載的快慢就靠它了
//繪制紅色外圈
function blueCircle(n) {
context.save();
context.strokeStyle=" #1E90FF"; //隨百分?jǐn)?shù)轉(zhuǎn)動(dòng)的外圈的顏色為藍(lán)色
context.lineWidth=3; //設(shè)置線寬
context.beginPath(); //路徑開(kāi)始
//注意-為順時(shí)針，+為逆時(shí)針
//用于繪制圓弧context.arc(x坐標(biāo)，y坐標(biāo)，半徑，起始角度，終止角度，順時(shí)針/逆時(shí)針)
//context.arc(centerX, centerY, 50, Math.PI / 2, Math.PI / 2 - n * rad, false);
context.arc(centerX, centerY, 50, -Math.PI / 2, -(Math.PI / 2 - n * rad), false);
context.stroke(); //繪制
context.closePath(); //路徑結(jié)束
context.restore();
}
//繪制白色外圈，初始的白色外圈
function whiteCircle() {
context.save();
context.beginPath();
// 下面百分?jǐn)?shù)的字體顏色設(shè)置后上面的外圈的顏色竟然保持一樣
//context.strokeStyle="#F8F8FF";
context.arc(centerX, centerY, 50, 0, Math.PI * 2, false);
context.stroke();
context.closePath();
context.restore();
}
//百分比文字繪制
function text(n) {
context.save(); //save和restore可以保證樣式屬性只運(yùn)用于該段canvas元素
context.strokeStyle="#7FFF00";//設(shè)置中間動(dòng)態(tài)百分?jǐn)?shù)的顏色
context.font="25px Arial"; //設(shè)置字體大小和字體
context.textAlign='center';//字體水平居中
context.textBaseline='middle';//字體垂直居中
//繪制字體，并且指定位置
context.strokeText(n.toFixed(0) + "%", centerX, centerY);
context.stroke(); //執(zhí)行繪制
context.restore();
}
//循環(huán)獲取
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(speed);
blueCircle(speed);
if (speed < 100) {
//1可從后臺(tái)獲取值,也是從0~100，step為1，代表速度
speed +=1;
}
}());
}注意到6.3js文件與4.3js文件的區(qū)別了么？一個(gè)有：window.onload=，一個(gè)沒(méi)有，且只有$和小括號(hào)，因?yàn)橥獠康木褪俏募x了一部分功能。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
