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

背景技術：

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

技術實現(xiàn)要素：

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

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

所述的方法是新建文件夾，所述的文件夾可取名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服務器環(huán)境下，用戶進入index.php程序入口，在中間的文本輸入框中輸入需要提取網(wǎng)頁配色的網(wǎng)頁的網(wǎng)址URL，點擊按鈕“生成該網(wǎng)頁配色”，然后可在下方看到排列整齊的該網(wǎng)頁的配色列表，列表中包含顏色實例和顏色代碼值。

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

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

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

(3)、編寫JQ的AJAX代碼，用于將URL數(shù)據(jù)傳送到后臺，同時返回后臺輸出的顏色JSON數(shù)據(jù)；其中AJAX參數(shù)的URL為“getWebColors.php”；返回成功的函數(shù)里，將JSON字符串解析為JSON對象；通過一個for循環(huá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標簽里的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進行正則匹配，正則表達式為“/color：#[0-9a-zA-Z]{3，6}/i”，以匹配顏色代碼的字符串，采用形式為color：#000，將所有匹配的存儲在一個數(shù)組里；

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

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

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

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

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

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

附圖說明

下面結合附圖對本發(fā)明進一步說明：

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

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

具體實施方式

下面將結合附圖，對本發(fā)明實施例中的技術方案進行清楚、完整的描述，顯然，所描述的實施例僅僅是本發(fā)明一部分實施例，而不是全部的實施例?；诒景l(fā)明中的實施例，本領域普通技術人員在沒有做出實質(zhì)性創(chuàng)造獲得的方案，都屬于本發(fā)明保護的范圍。

以下為index.php里功能點的實現(xiàn)順序和方法：

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

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

3：寫一段JQ的AJAX代碼，用于將URL數(shù)據(jù)傳送到后臺，同時返回后臺輸出的顏色JSON數(shù)據(jù)。其中AJAX參數(shù)的URL為“getWebColors.php”，返回成功的函數(shù)里，將JSON字符串解析為JSON對象，通過一個for循環(huá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標簽里的href屬性里的內(nèi)容(路徑)；

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

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

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

本發(fā)明可以提取任意一個URL地址進行顏色解析(圖片除外)，因此無論在實用性和先進性上都比一些提供固定網(wǎng)頁配色的網(wǎng)站要好，如果URL網(wǎng)址是新的流行網(wǎng)站，則會有種與時俱進的學習感和提升感。