讓你的輸出變得更帥，Python炫酷的顏色輸出與進度條打印

語單詞優化

上篇文章寫到了Python開發英語單詞記憶工具，其中依賴了bootstrap.css jQuery.js 基礎html模塊以及片段的css樣式。有些朋友問，怎么能將這個練習題打包成單獨的exe可執行文件，來脫離python環境使用呢？

私信小編01即可獲取大量的Python學習資料

在這里跟大家簡單說下思路，有需求的朋友可以自己去扒拉扒拉…

依賴的css和js，如果有外網的前提，可以使用bootcdn提供的鏈接引用：

https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js
https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css

自己編輯的css樣式，可以添加在head中的style中

基礎html可以作為一大段的string在python中進行定義，最終替換關鍵內容后輸出。至于cet4的單詞表，建議就不要添加在代碼中了，和打出來的exe文件放置在一起即可。

好了，思路就是這些，喜歡的朋友可以去嘗試做一下，這樣就可以無時無刻給自己出一份英語練習測試題了。

Python風騷的打印！

大家平時在Linux/Windows下安裝軟件時，經常會出現進度條和百分比的提示，Python是否能實現這樣的打印？安裝過程中，經常會看到很多帶顏色的安裝說明，我們在python輸出時，確是千篇一律的黑底白色，是否想過打印的炫酷一些呢？

以上操作其實很簡單，今天就來教教大家，通過幾分鐘的學習讓之后代碼的輸出變得與眾不同！

Python打印進度條

python打印進度條的原理其實很簡單，先讓我們看一個例子吧：

# -*- coding: utf-8 -*-
# @Author   : 王翔
# @WeChat   : King_Uranus
# @公眾號    : 清風Python
# @Date     : 2019/9/16 22:09
# @Software : PyCharm
# @version  ：Python 3.7.3
# @File     : ProgressBar.py

import time

def progress_bar(total):
    if total <= 0:
        raise ValueError("Wrong total number ...")
    # step = (100 // total if total <= 100 else total // 100)

    for i in range(0, total):
        time.sleep(0.05)
        step = int(100 / total * (i + 1))
        str1 = '\r[%3d%%] %s' % (step, '>' * step)
        print(str1, end='', flush=True)

progress_bar(20)
print()
progress_bar(110)

我們通過自己實現了進度條的展示，那么python是否具備現成的模塊呢？答案是Yes！[ tqdm ]

Tqdm 是一個快速，可擴展的Python進度條，可以在 Python 長循環中添加一個進度提示信息，用戶只需要封裝任意的迭代器 tqdm(iterator)。

安裝：pip install tqdm

來看一個例子：

from tqdm import tqdm
import string
import time

for char in tqdm(string.ascii_uppercase):
    time.sleep(0.1)

for i in tqdm(range(50)):
    time.sleep(0.05)

tqdm的強大遠不止此，喜歡的朋友可以去它的git網址詳細學習：

https://github.com/tqdm/tqdm

Python帶色彩輸出

python顏色輸出其實只是調用了命令號的相關特殊標記，shell中我們也經常使用它：

print('\033[30m打印前景色0\033[0m')
print('\033[31m打印前景色1\033[0m')
print('\033[32m打印前景色2\033[0m')
print('\033[33m打印前景色3\033[0m')
print('\033[34m打印前景色4\033[0m')
print('\033[35m打印前景色5\033[0m')
print('\033[36m打印前景色6\033[0m')
print('\033[37m打印前景色7\033[0m')
print('\033[40m打印背景色0\033[0m')
print('\033[41m打印背景色1\033[0m')
print('\033[42m打印背景色2\033[0m')
print('\033[43m打印背景色3\033[0m')
print('\033[44m打印背景色4\033[0m')
print('\033[45m打印背景色5\033[0m')
print('\033[46m打印背景色6\033[0m')
print('\033[47m打印背景色7\033[0m')
print('\033[0m打印顯示方式0\033[0m')
print('\033[1m打印顯示方式1\033[0m')
print('\033[4m打印顯示方式4\033[0m')
print('\033[5m打印顯示方式5\033[0m')
print('\033[7m打印顯示方式7\033[0m')
print('\033[8m打印顯示方式8\033[0m')
print('\033[5;31;47m綜合打印\033[0m')

每條默認的**3[0m為回復終端默認
最后一個3[5;31;47m**綜合打印為使用閃爍方式紅色字體白色背景色打印文字！

參數說明：

那么和上面一樣的套路，python中是否有模塊能實現這種顏色打印的功能呢？答案依然是Yes！ [ colorama ]

Python的Colorama模塊，可以跨多終端，顯示字體不同的顏色和背景，只需要導入colorama模塊即可，不用再每次都像linux一樣指定顏色。
pip install colorama
Fore是針對字體顏色，Back是針對字體背景顏色，Style是針對字體格式
Fore: BLACK, RED, GREEN, YELLOW, BLUE, MAGENTA, CYAN, WHITE, RESET.
Back: BLACK, RED, GREEN, YELLOW, BLUE, MAGENTA, CYAN, WHITE, RESET.
Style: DIM, NORMAL, BRIGHT, RESET_ALL

>>> from colorama import Fore, Back, Style
>>> print(Fore.RED + '打印紅色文字')
>>> 打印紅色文字
>>> print(Back.GREEN + '設置背景為綠色')
>>> 設置背景為綠色
>>> print(Style.RESET_ALL)
>>> print('恢復默認')
>>> 恢復默認

細心的網友看到，我們如果沒有恢復默認的話，會繼承上面的顏色狀態。那么，如何像剛才一樣，每次輸出后自動化恢復呢？

from colorama import init, Fore, Back, Style

init(autoreset=True)
print(Fore.RED + '打印紅色文字')
print(Back.GREEN + '設置背景為綠色')
print('恢復默認')

關于裝13，只能幫大家到這里了，希望今天的內容大家能喜歡…

更多精彩內容，請滑至頂部點擊右上角關注小宅哦~

者：前端小智來源：大遷世界

.md文件是markdown的一種標記語言，和html比較起來，更簡單快捷，主要體現在：標記符的數量和書寫上。

標記符的數量：html文檔需要用到數量繁多的標記符，再輔以css來控制樣式和排版，而markdown文檔只需要四個基本的標記符號就能完成同樣的事。
標記符的書寫：HTML文檔內容需要同時標記開始和結束這是一個網頁，而markdown文檔則只要在開始位置標記即可# 這是一個md文檔。下面介紹如何實現將.md文件轉換成.html文件。

方式一：使用i5ting_toc插件

需要先安裝npm(安裝node.js后會自帶npm)，然后才能安裝i5ting插件：

npm install i5ting_toc -g

執行命令行生成html文件，在輸入前要進入到對應根目錄下：

i5ting_toc -f **.md

需要注意的是：寫md文檔的特殊符號時記得添加空格。小技巧：如何快速在當前目錄打開cmd?選擇當前目錄，按住shift，然后鼠標右鍵在此處打開命令窗口(在此處打開powerShell窗口)。

方式二：使用gitbook

同樣先需要安裝node，然后運行：

npm i gitbook gitbook-cli -g

生成md文件,這個命令會生成相應的md的文件，然后在相應的文件里寫你的內容即可：

gitbook init

md轉html,生成一個_doc目錄，打開就可以看到你html文件了。

gitbook build

方式三：利用前端代碼

實現原理是采用node.js搭建服務器，讀取md文件轉化為html片斷。瀏覽器發送ajax請求獲取片段后再渲染生成html網頁。

node代碼：

var express = require('express');
var http = require('http');
var fs = require('fs');
var bodyParser = require('body-parser');
var marked = require('marked'); // 將md轉化為html的js包
var app = express();

app.use(express.static('src')); //加載靜態文件
var urlencodedParser = bodyParser.urlencoded({ extended: false });

app.get('/getMdFile',urlencodedParser, function(req, res) {
var data = fs.readFileSync('src/test.md', 'utf-8'); //讀取本地的md文件
res.end(JSON.stringify({
body : marked(data)
}));
} );

//啟動端口監聽
var server = app.listen(8088, function () {
var host = server.address().address;
var port = server.address().port;
console.log("應用實例，訪問地址為 http://%s:%s", host, port)
});

前端html：

<div id="content"> <h1 class="title">md-to-HTML web app</h1> <div id="article"> </div></div><script type="text/JavaScript" src="js/jquery-1.11.3.min.js"></script><script> var article = document.getElementById('article'); $.ajax({ url: "/getMdFile", success: function(result) { console.log('數據獲取成功'); article.innerHTML = JSON.parse(result).body; }, error: function (err) { console.log(err); article.innerHTML = '<p>獲取數據失敗</p>'; } });</script>

代碼，沒案例，簡直就是耍流氓，為了方便大家學習交流，每個知識點都會配上對應的案例！文章最下邊有福利喲....

jQuery節點創建與屬性的處理

創建節點：$("<div></div>")

創建為本節點：$("<div>我是文本節點</div>")

創建為屬性節點：$("<div id='test' class='aaron'>我是文本節點</div>")

例子：var div = $("<div class='right'><div class='aaron'>動態創建DIV元素節點</div></div>")

$body.append(div)

DOM內部插入append()與appendTo()

append(content)向每個匹配的元素內部追加內容，這個操作與對指定的元素執行原生的appendChild方法，將它們添加到文檔中的情況類似。

appendTo（content） 把所有匹配的元素追加到另一個、指定的元素集合中，實際上，使用這個方法是顛倒了常規的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

DOM外部插入after()與before()

.after(content) 在匹配元素集合中的每個元素后面插入指定內容，作為兄弟節點

.before(content) 在匹配的元素前面插入內容

1、before與after都是用來對相對選中元素外部增加相鄰的兄弟節點

2、2個方法都是都可以接收HTML字符串，DOM 元素，元素數組，或者jQuery對象，用來插入到集合中每

個匹配元素的前面或者后面

3、2個方法都支持多個參數傳遞after(div1,div2,....)

DOM內部插入prepend()與prependTo()

.prepend（）向每個匹配元素的內部前置內容和append（）類型

.prependTo（）把所有匹配的元素前置到另一個指定的元素集合中

四個區別：

append()向每個匹配的元素內部追加內容

prepend()向每個匹配的元素內部前置內容

appendTo()把所有匹配的元素追加到另一個指定元素的集合中

prependTo()把所有匹配的元素前置到另一個指定的元素集合中

DOM外部插入insertAfter()與insertBefore()

insertBefore() 在目標元素前面插入集合中每個匹配的元素（不支持多參數）

insertAfter() 在目標元素后面插入集合中每個匹配的元素（不支持多參數）

.before()和.insertBefore()實現同樣的功能。主要的區別是語法——內容和目標的位置。對于

before()選擇表達式在函數前面，內容作為參數，而.insertBefore()剛好相反，內容在方法前面，它將

被放在參數里元素的前面

例：$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>')

$('<p style="color:red">測試insertBefore方法增加</p>').insertBefore($(".test1"))

DOM節點刪除之empty()

empty()這個方法不僅移除子元素（和其他后代元素），同樣移除元素里的文本

例：$('.hello').empty() //刪除.hello里邊的所有內容

DOM節點刪除之remove()的有參用法和無參用法

remove與empty一樣，都是移除元素的方法，但是remove會將元素自身移除，同時也會移除元素內部的一切，包括綁定的事件及與該元素相關的jQuery數據。

例：$('.hello').remove()

$("p").remove(":contains('3')")//找到包含3文本的節點刪除

DOM節點刪除之保留數據的刪除操作detach()

detach()讓一個web元素托管。即從當前頁面中移除該元素，但保留這個元素的內存模型對象。

例： $("p:first").detach()

DOM拷貝clone()

.clone()方法深度復制所有匹配的元素集合，包括所有匹配元素、匹配元素的下級元素、文字節點。

.clone(ture) 表示不僅僅克隆節點，還把附帶的數據和事件一并克隆了！

1、clone()方法時，在將它插入到文檔之前，我們可以修改克隆后的元素或者元素內容，

$(this).clone().css('color','red') 表示增加了一個顏色

2、通過傳遞true，將所有綁定在原始元素上的事件處理函數復制到克隆元素上

3、clone()方法是jQuery擴展的，只能處理通過jQuery綁定的事件與數據

4、元素數據（data）內對象和數組不會被復制，將繼續被克隆元素和原始元素共享。深復制的所有數據，需要手動復制每一個

例： $(".aaron1").on('click', function() {

$(".left").append( $(this).clone().css('color','red') )

})//只克隆節點不克隆事件

DOM替換replaceWith()和replaceAll()

.replaceWith( newContent )：用提供的內容替換集合中所有匹配的元素并且返回被刪除元素的集合

例：$("p:eq(1)").replaceWith('<a style="color:red">替換第二段的內容</a>')

.replaceAll( target ) ：用集合的匹配元素替換每個目標元素目標和源和replaceWith相反

例：$('<a style="color:red">替換第二段的內容</a>').replaceAll('p:eq(1)')

DOM包裹wrap()方法

.wrap( wrappingElement )：在集合中匹配的每個元素周圍包裹一個HTML結構，即增加父元素<p>p元素</p> 增加：$('p').wrap('<div></div>') 變成了<div><p>p元素</p></div>

.wrap( function ) ：一個回調函數，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象

例:$('p').wrap(function() {

return '<div></div>'; //與第一種類似，只是寫法不一樣

})

DOM包裹unwrap()方法

unwarp()方法，作用與wrap方法是相反的。將匹配元素集合的父級元素刪除，保留自身（和兄弟元素，如果存在）在原來的位置。

例：$('p').unwarp(); //刪除p的父節點

DOM包裹wrapAll()方法

.wrapAll( wrappingElement )：給集合中匹配的元素增加一個外面包裹HTML結構

.wrapAll( function ) ：一個回調函數，返回用于包裹匹配元素的 HTML 內容或 jQuery 對象通過回調的方式可以單獨處理每一個元素

例：$('p').wrapAll('<div></div>') 結果：

<div>

</div> //給所有的p增加父元素，增加一個，不是每個單獨增加父元素

$('p').wrapAll(function() {

return '<div><div/>';

})該方法返回結果是：

<div>

</div>

<div>

</div>

什么情況？兩個例子中的結果為什么不一樣呢？小伙伴們自己查查咋回事呢？

注意：.wrapAll()函數可以接受任何字符串或對象，可以傳遞給$()工廠函數來指定一個DOM結構。這種

結構可以嵌套多層，但是最內層只能有一個元素。所有匹配元素將會被當作是一個整體，在這個整體的外部用指定的 HTML 結構進行包裹。

DOM包裹wrapInner()方法

.wrapInner( wrappingElement )：給集合中匹配的元素的內部，增加包裹的HTML結構

例：<div>p元素</div><div>p元素</div> 執行：$('div').wrapInner('<p></p>')變成了：

.wrapInner( function ) ：允許我們用一個callback函數做參數，每次遇到匹配元素時，該函數被執行，返回一個DOM元素，jQuery對象，或者HTML片段，用來包住匹配元素的內容

例：$('div').wrapInner(function() {

return '<p></p>';

})

學累了吧，來點實惠的？

1+1=？

不要往下看了，下面真的沒內容了

.......

哈哈，適可而止吧

在線咨詢

上一篇：HTML 之簡介
下一篇：個人簡介

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

讓你的輸出變得更帥，Python炫酷的顏色輸出與進度條打印

語單詞優化

Python風騷的打印！

Python打印進度條

Python帶色彩輸出

jQuery節點創建與屬性的處理

DOM內部插入append()與appendTo()

DOM外部插入after()與before()

DOM內部插入prepend()與prependTo()

DOM外部插入insertAfter()與insertBefore()

DOM節點刪除之empty()

DOM節點刪除之remove()的有參用法和無參用法

DOM節點刪除之保留數據的刪除操作detach()

DOM拷貝clone()

DOM替換replaceWith()和replaceAll()

DOM包裹wrap()方法

DOM包裹unwrap()方法

DOM包裹wrapAll()方法

DOM包裹wrapInner()方法

您的項目需求