本发明涉及网页前端和PHP技术领域,特别是一种网页拾色器的制作方法。
背景技术:
网页美工和前端技术人员在工作中进行网页配色时往往需要参考一些较大型的成熟的网站。网站如何配色,配色的代码为多少合适,是网页美工和前端技术人员需要了解并掌握的。
技术实现要素:
本发明解决的技术问题在于提供一种网页拾色器的制作方法;实现方便、实用、兼容的网页配色。
本发明解决上述技术问题的技术方案是:
所述的方法是新建文件夹,所述的文件夹可取名getWebColors;在所述的文件夹里新建index.php、jquery.min.js、getWebColors.php和style.css四个文件;
所述的index.php用于程序入口,用户交互,显示输入框、按钮及拾取的颜色;
所述的jquery.min.js引入JQ插件,方便JS程序的开发;
所述的getWebColors.php为后端PHP功能文件,用于处理输入的URL,解析CSS路径,抓取颜色代码及输出到前端;
所述的style.css用于编写index样式,提供美观界面;
在本地PHP环境下或在线PHP服务器环境下,用户进入index.php程序入口,在中间的文本输入框中输入需要提取网页配色的网页的网址URL,点击按钮“生成该网页配色”,然后可在下方看到排列整齐的该网页的配色列表,列表中包含颜色实例和颜色代码值。
所述的index.php功能实现方法是:
(1)、首先设计出一个文本输入框和一个按钮,文本输入框用于输入URL网址,按钮用于启动AJAX抓取数据,抓取到的数据仍然在本页显示;
(2)、设计一个空的颜色列表,包含颜色实例和下方的颜色代码值,先用测试的数据写样式,然后再把内容清掉;
(3)、编写JQ的AJAX代码,用于将URL数据传送到后台,同时返回后台输出的颜色JSON数据;其中AJAX参数的URL为“getWebColors.php”;返回成功的函数里,将JSON字符串解析为JSON对象;通过一个for循环,将每一个颜色代码进行提取,利用JQ的before函数将每个提取的颜色组成一个li列表单元,添加到指定的ul列表里。
所述的getWebColors.php功能实现方法是
(1)、获取index.php传送过来的URL参数,利用PHP的file_get_contents函数将该页面内容存储为一个字符串变量;
(4)、对CSS绝对路径使用PHP函数file_get_contents读取CSS内容,存储为字符串变量;在这个字符串中利用PHP函数preg_match_all进行正则匹配,正则表达式为“/color:#[0-9a-zA-Z]{3,6}/i”,以匹配颜色代码的字符串,采用形式为color:#000,将所有匹配的存储在一个数组里;
(5)、用函数array_unique去除重复值,用函数array_merge重新将键值排序,然后用PHP函数json_encode转成JSON,输出,该输出会返回到index.php。
本发明方案的有益效果如下:
本发明使用方便:PHP环境下输入URL即可提取网页配色。
本发明效率高:文件只有四个,提取速度快而准确。
本发明实用性好:支持任意URL,即使再复杂的网页都可以提取(但要注意该网站是否设置禁止多次抓取,否则会返回空);
本发明兼容性高:只使用了JQ语言,绝大多数主流浏览器都可以适用。
附图说明
下面结合附图对本发明进一步说明:
图1为本发明的流程图;
图2、图3为本发明的举例操作视图。
具体实施方式
下面将结合附图,对本发明实施例中的技术方案进行清楚、完整的描述,显然,所描述的实施例仅仅是本发明一部分实施例,而不是全部的实施例。基于本发明中的实施例,本领域普通技术人员在没有做出实质性创造获得的方案,都属于本发明保护的范围。
以下为index.php里功能点的实现顺序和方法:
1:首先设计出一个文本输入框和一个按钮。文本输入框用于输入URL网址,按钮用于启动AJAX抓取数据,抓取到的数据仍然在本页显示;
2:设计一个空的颜色列表,包含颜色实例和下方的颜色代码值,先用测试的数据写样式,然后再把内容清掉;
3:写一段JQ的AJAX代码,用于将URL数据传送到后台,同时返回后台输出的颜色JSON数据。其中AJAX参数的URL为“getWebColors.php”,返回成功的函数里,将JSON字符串解析为JSON对象,通过一个for循环,将每一个颜色代码进行提取,利用JQ的before函数将每个提取的颜色组成一个li列表单元,添加到指定的ul列表里;
以下为getWebColors.php里功能点的实现顺序和方法:
1:获取index.php传送过来的URL参数,利用PHP的file_get_contents函数将该页面内容存储为一个字符串变量;
4:对CSS绝对路径使用PHP函数file_get_contents读取CSS内容,存储为字符串变量;在这个字符串中利用PHP函数preg_match_all进行正则匹配,正则表达式为“/color:#[0-9a-zA-Z]{3,6}/i”,该表达式的作用是匹配颜色代码的字符串,形式如color:#000,将所有匹配的存储在一个数组里;
5:用函数array_unique去除重复值,用函数array_merge重新将键值排序,然后用PHP函数json_encode转成JSON,输出。该输出会返回到index.php。
本发明可以提取任意一个URL地址进行颜色解析(图片除外),因此无论在实用性和先进性上都比一些提供固定网页配色的网站要好,如果URL网址是新的流行网站,则会有种与时俱进的学习感和提升感。