整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
格(行)排序:
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</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]; //将表格行元素集合转换为数组
}
arr.sort(function (tr1, tr2){ //自定义排序函数
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.先把元素从原有父级上删掉
2.添加到新的父级
知不觉今年的520就过去了，祝没有脱单的小伙伴抓紧发挥你的独特的魅力，明年520之前脱单。恭喜已经脱单的朋友，祝你们幸福！
今年520为了给女友买礼物可也算是煞费苦心了，当然买礼物还不如帮她清空购物车来得直接一些。不知道各位小伙伴今年买了什么礼物啊。
除了重要的节日需要网上购买之外，平时她也是需要买日常的衣物，今天就来获取淘宝网的所有文胸数据，供她挑选，当然最后结账的也是你。
本次文章的字数可能会比之前多一些，我也是争取每一次爬取的技术都会提高一些，这样大家阅读起来也会轻松一些，不至于看不懂。今天的文章大概需要10分钟左右的时间才可以看完，希望各位小伙伴可以耐心一点。
随着时间的推移，文章难度需要提升，现在每篇文章都需要花两到3天的时间才可以完成，又要录制视频教程，所以会比之前更新的慢一些，希望小伙伴们可以理解。
在爬取信息之前需要先介绍一下，Python的一个自动化测试工具selenium，这个是本次的重点内容。如果熟悉selenium的小伙伴可以直接略过。
1.selenium简介
selenium是一个用于测试网站的自动化测试工具，支持很多主流的浏览器，比如：谷歌浏览器、火狐浏览器、IE、Safari等。
2.支持多个操作系统
如windows、Linux、IOS、Android等。
3、安装selenium
pip install Selenium
4、安装浏览器驱动
1、Chrome驱动文件下载：
https://chromedriver.storage.googleapis.com/index.html?path=2.35/
2、火狐浏览器驱动下载：
https://github.com/mozilla/geckodriver/releases/tag/v0.26.0
5、配置环境变量
配置环境变量的方法非常简单，首先将下载好的驱动进行解压，放到你安装Python的目录下，即可。
因为之前，在配置Python环境变量的时候，就将Python的目录放到我的电脑–>属性–>系统设置–>高级–>环境变量–>系统变量–>Path
Python安装路径
二、selenium快速入门
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库下webdriver模块常用的方法与使用
控制浏览器的一些方法
4、代码实例
from selenium import webdriverimport time# 创建Chrome浏览器对象，这会在电脑中打开一个窗口browser=webdriver.Chrome()# 通过浏览器向服务器发起请求browser.get('https://www.baidu.com')time.sleep(3)# 刷新浏览器browser.refresh()# 最大化浏览器窗口browser.maximize_window()# 设置链接内容element=browser.find_element_by_link_text('抗击肺炎')# 点击'抗击肺炎'element.click()关于selenium的简单介绍就先到这里了，更多详细内容大家可以去selenium官方文档查看。关于selenium的简单介绍就先到这里了，更多详细内容大家可以去selenium官方文档查看。
爬取数据
从上图，可以看到需要获取的信息是：价格、商品名称、付款人数、店铺名称。
现在我们开始进入主题。
首先，需要输入你要搜索商品的内容，然后根据内容去搜索淘宝信息，最后提取信息并保存。
1、搜素商品
我在这里定义一个搜索商品的函数和一个主函数。
搜索商品
在这里需要创建一个浏览器对象，并且根据该对象的get方法来发送请求。
从上图可以发现搜索框的id值为q，那么这样就简单很多了，有HTML基础的朋友肯定知道id值是唯一的。
通过id值可以获取到文本框的位置，并传入参数，然后点击搜索按钮。
从上图可以发现搜索按钮在一个类里面，那么可以通过这个类来定位到搜索按钮，并执行点击操作。
当点击搜索按钮之后，网页便会跳转到登录界面，要求我们登录，如下图所示：
登录成功后会发现，里面的数据总共有100页面。
上图是前三页的url地址，你会发现其实并没有太大的变化，经过测试发现，真正有效的参数是框起来的内容，它的变化会导致页面的跳转，很明显第一页的s=0，第二页s=44，第三页s=88，以此类推，之后就可以轻松做到翻页了。
搜搜商品的代码如下：
代码如下框
def search_product(key_word): ''' :param key_word: 搜索关键字 :return: ''' # 通过id值来获取文本框的位置，并传入关键字 browser.find_element_by_id('q').send_keys(key_word) # 通过class来获取到搜索按钮的位置，并点击 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 页， page=re.findall('(\d+)', page)[0] # findall返回一个列表 return page2、获取商品信息并保存
获取商品信息相对比较简单，可以通过xpath方式来获取数据。在这里我就不再论述。在这边我创建了一个函数get_product来获取并保存信息。在保存信息的过程中使用到了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=',') # 指定分隔符为逗号 csv_writer.writerow([info, price, nums, names])3、构造URL实现翻页爬取
从上面的图片中可以发现连续三页URL的地址，其实真正变化并不是很多，经过测试发现，只有q和s两个参数是有用的。
构造出的url：https://s.taobao.com/search?q={}&s={}
因为q是你要搜索的商品，s是设置翻页的参数。这段代码就放在了主函数里面
代码如下：
def main(): browser.get('https://www.taobao.com/') # 向服务器发送请求 page=search_product(key_word) print('正在爬取第1页的数据') get_product() # 已经获得第1页的数据 page_nums=1 while page_nums !=page: print('*'*100) print('正在爬取第{}页的数据'.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最后结果，如下图所示：
—— E N D ——
好了，又到了该说再见的时候了，希望我的文章可以给你带来知识，带给你帮助。同时也感谢你可以抽出你宝贵的时间来阅读，创作不易，如果你喜欢的话，点个关注再走吧。更多精彩内容会在后续更新，你的支持就是我创作的动力，我今后也会尽力给大家书写出更加优质的文章。
.说明：
推荐指数：★★★★
通俗易懂，小白一看就会，高手请飘过。
学python也是需要懂一点Html、Css、JavaScript的基础知识的。
建议使用vscode编辑器。
2.效果图1
3.代码：保存为html，用浏览器打开即可。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圆形百分比进度条效果</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%是显示百分数，动态显示由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());
//通过计时器来显示过渡的百分比进度
var temp=0;
var timer=setInterval(function(){
calculate(temp);
//清除计时器结束该方法调用
if(temp==num){
clearInterval(timer);
}
temp++;
},30)
//改变页面显示百分比
function calculate(value){
//改变页面显示的值
$('.text').html(value + '%');
//清除上次调用该方法残留的效果
$('.circle-left').remove();
$('.mask-right').remove();
//当百分比小于等于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.拆分法：把一个含有css和js（JavaScript）的html，拆掉三个文件，一个叫cirbar1.html,另外的叫：cirbar1.css和cirbar1.js文件，放在同一个文件夹内。这是./的意思，也可以指定文件夹。
4.1 cirbar1.html的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圆形百分比进度条效果v2</title>
<!--如果是style type="text/css"这种直接在html中设置css，注意起始是*，不是点-->
<!--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>
<!--这个外部js文件=jquery.min.js，不能少，否则不能动了-->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"--></script>
<!--同样的，把写在html的js，新建一个cirbar1.js，复制下去，保存，这样子简洁很多-->
<!--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());
//通过计时器来显示过渡的百分比进度
var temp=0;
var timer=setInterval(function(){
calculate(temp);
//清除计时器结束该方法调用
if(temp==num){
clearInterval(timer);
}
temp++;
},30)
//改变页面显示百分比
function calculate(value){
//改变页面显示的值
$('.text').html(value + '%');
//清除上次调用该方法残留的效果
$('.circle-left').remove();
$('.mask-right').remove();
//当百分比小于等于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);
}
}
})==============================
再来一个，不用外部js文件的圆形进度条
顺带回顾一下相关知识。
==============================
5.效果图
6.三个文件，放在同一个文件夹中
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步---标题名称-->
<title>圆形进度条v1</title>
<!--注意：./代表同一个文件夹下，也就是css和js文件与本html文件放在同一个文件夹下-->
<!--第2-1-3步---导入css文件-->
<link href="./cirbar.css" rel="stylesheet" />
</head>
<!--第2-2步---body部分-->
<body>
<!--第2-2-1步---定义画布部分，注意没有逗号隔开，大小设置-->
<canvas class="canvas" id="canvas" width="400" height="400"></canvas>
<!--第2-2-2步---导入js文件部分-->
<script src="./cirbar.js"></script>
<!--注意收尾-->
</body>
<!--注意收尾-->
</html>6.2 cirbar.css代码：
.canvas {
/*画布的背景颜色设置为：黑色*/
background:#303030;
}6.3 cirbar.js代码：
window.onload=function () {
var canvas=document.getElementById('canvas'), //获取canvas元素
context=canvas.getContext('2d'), //获取画图环境，指明为2d
centerX=canvas.width / 2, //Canvas中心点x轴坐标
centerY=canvas.height / 2, //Canvas中心点y轴坐标
rad=Math.PI * 2 / 100, //将360度分成100份，那么每一份就是rad度
speed=0.1; //加载的快慢就靠它了
//绘制红色外圈
function blueCircle(n) {
context.save();
context.strokeStyle=" #1E90FF"; //随百分数转动的外圈的颜色为蓝色
context.lineWidth=3; //设置线宽
context.beginPath(); //路径开始
//注意-为顺时针，+为逆时针
//用于绘制圆弧context.arc(x坐标，y坐标，半径，起始角度，终止角度，顺时针/逆时针)
//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(); //路径结束
context.restore();
}
//绘制白色外圈，初始的白色外圈
function whiteCircle() {
context.save();
context.beginPath();
// 下面百分数的字体颜色设置后上面的外圈的颜色竟然保持一样
//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可以保证样式属性只运用于该段canvas元素
context.strokeStyle="#7FFF00";//设置中间动态百分数的颜色
context.font="25px Arial"; //设置字体大小和字体
context.textAlign='center';//字体水平居中
context.textBaseline='middle';//字体垂直居中
//绘制字体，并且指定位置
context.strokeText(n.toFixed(0) + "%", centerX, centerY);
context.stroke(); //执行绘制
context.restore();
}
//循环获取
(function drawFrame() {
window.requestAnimationFrame(drawFrame, canvas);
context.clearRect(0, 0, canvas.width, canvas.height);
whiteCircle();
text(speed);
blueCircle(speed);
if (speed < 100) {
//1可从后台获取值,也是从0~100，step为1，代表速度
speed +=1;
}
}());
}注意到6.3js文件与4.3js文件的区别了么？一个有：window.onload=，一个没有，且只有$和小括号，因为外部的就是文件定义了一部分功能。
*请认真填写需求信息，我们会在24小时内与您取得联系。
