[發(fā)明專利]一種網(wǎng)頁拾色器的制作方法

在審

• 申請?zhí)枺?/td>: 201610988463.2
• 申請日: 2016-11-10
• 公開（公告）號: CN106776687A
• 公開（公告）日: 2017-05-31
• 發(fā)明（設(shè)計）人: 黃博;關(guān)班記;張遠(yuǎn)世;齊兆勇;龐毅;何龍泉;季統(tǒng)凱
• 申請（專利權(quán)）人: 國云科技股份有限公司
• 主分類號: G06F17/30
• 分類號: G06F17/30
• 代理公司: 廣東莞信律師事務(wù)所44332
• 代理人: 余倫

技術(shù)領(lǐng)域

本發(fā)明涉及網(wǎng)頁前端和PHP技術(shù)領(lǐng)域，特別是一種網(wǎng)頁拾色器的制作方法。

背景技術(shù)

網(wǎng)頁美工和前端技術(shù)人員在工作中進(jìn)行網(wǎng)頁配色時往往需要參考一些較大型的成熟的網(wǎng)站。網(wǎng)站如何配色，配色的代碼為多少合適，是網(wǎng)頁美工和前端技術(shù)人員需要了解并掌握的。

發(fā)明內(nèi)容

本發(fā)明解決的技術(shù)問題在于提供一種網(wǎng)頁拾色器的制作方法；實現(xiàn)方便、實用、兼容的網(wǎng)頁配色。

本發(fā)明解決上述技術(shù)問題的技術(shù)方案是：

所述的方法是新建文件夾，所述的文件夾可取名getWebColors；在所述的文件夾里新建index.php、jquery.min.js、getWebColors.php和style.css四個文件；

所述的index.php用于程序入口，用戶交互，顯示輸入框、按鈕及拾取的顏色；

所述的jquery.min.js引入JQ插件，方便JS程序的開發(fā)；

所述的getWebColors.php為后端PHP功能文件，用于處理輸入的URL，解析CSS路徑，抓取顏色代碼及輸出到前端；

所述的style.css用于編寫index樣式，提供美觀界面；

在本地PHP環(huán)境下或在線PHP服務(wù)器環(huán)境下，用戶進(jìn)入index.php程序入口，在中間的文本輸入框中輸入需要提取網(wǎng)頁配色的網(wǎng)頁的網(wǎng)址URL，點擊按鈕“生成該網(wǎng)頁配色”，然后可在下方看到排列整齊的該網(wǎng)頁的配色列表，列表中包含顏色實例和顏色代碼值。

所述的index.php功能實現(xiàn)方法是：

(1)、首先設(shè)計出一個文本輸入框和一個按鈕，文本輸入框用于輸入URL網(wǎng)址，按鈕用于啟動AJAX抓取數(shù)據(jù)，抓取到的數(shù)據(jù)仍然在本頁顯示；

(2)、設(shè)計一個空的顏色列表，包含顏色實例和下方的顏色代碼值，先用測試的數(shù)據(jù)寫樣式，然后再把內(nèi)容清掉；

(3)、編寫JQ的AJAX代碼，用于將URL數(shù)據(jù)傳送到后臺，同時返回后臺輸出的顏色JSON數(shù)據(jù)；其中AJAX參數(shù)的URL為“getWebColors.php”；返回成功的函數(shù)里，將JSON字符串解析為JSON對象；通過一個for循環(huán)，將每一個顏色代碼進(jìn)行提取，利用JQ的before函數(shù)將每個提取的顏色組成一個li列表單元，添加到指定的ul列表里。

所述的getWebColors.php功能實現(xiàn)方法是

(1)、獲取index.php傳送過來的URL參數(shù)，利用PHP的file_get_contents函數(shù)將該頁面內(nèi)容存儲為一個字符串變量；

(2)、利用PHP的preg_match_all函數(shù)將匹配正則為“/<link href＝/″(.*？)/″/i”的字符串提取；該正則的作用是提取主要CSS的link標(biāo)簽里的href屬性里的內(nèi)容，即路徑；

(3)、用正則將網(wǎng)頁域名取到存到變量$host，然后判斷第二步取到的CSS路徑字符串是否為絕對路徑，即是否包含“http”字眼；若為絕對路徑則不操作，若為相對路徑則前面加上域名，組成新的絕對路徑；以得到完成的CSS樣式路徑；

(4)、對CSS絕對路徑使用PHP函數(shù)file_get_contents讀取CSS內(nèi)容，存儲為字符串變量；在這個字符串中利用PHP函數(shù)preg_match_all進(jìn)行正則匹配，正則表達(dá)式為“/color：#[0-9a-zA-Z]{3，6}/i”，以匹配顏色代碼的字符串，采用形式為color：#000，將所有匹配的存儲在一個數(shù)組里；

(5)、用函數(shù)array_unique去除重復(fù)值，用函數(shù)array_merge重新將鍵值排序，然后用PHP函數(shù)json_encode轉(zhuǎn)成JSON，輸出，該輸出會返回到index.php。

本發(fā)明方案的有益效果如下：

本發(fā)明使用方便：PHP環(huán)境下輸入URL即可提取網(wǎng)頁配色。

本發(fā)明效率高：文件只有四個，提取速度快而準(zhǔn)確。

本發(fā)明實用性好：支持任意URL，即使再復(fù)雜的網(wǎng)頁都可以提取(但要注意該網(wǎng)站是否設(shè)置禁止多次抓取，否則會返回空)；

本發(fā)明兼容性高：只使用了JQ語言，絕大多數(shù)主流瀏覽器都可以適用。

附圖說明

下面結(jié)合附圖對本發(fā)明進(jìn)一步說明：

圖1為本發(fā)明的流程圖；

圖2、圖3為本發(fā)明的舉例操作視圖。

具體實施方式