? ? 本文要推薦的[ToolFk]是一款程序員經常使用的線上免費測試工具箱，ToolFk 特色是專注于程序員日常的開發工具，不用安裝任何軟件，只要把內容貼上按一個執行按鈕,就能獲取到想要的內容結果。ToolFk還支持??BarCode條形碼在線生成、?QueryList采集器、?PHP代碼在線運行、?PHP混淆、加密、解密、?Python代碼在線運行、JavaScript在線運行、YAML格式化工具、HTTP模擬查詢工具、HTML在線工具箱、JavaScript在線工具箱、CSS在線工具箱、JSON在線工具箱、Unixtime時間戳轉換、Base64/URL/Native2Ascii轉換、CSV轉換工具箱、XML在線工具箱、WebSocket在線工具、Markdown 在線工具箱、Htaccess2nginx 轉換、進制在線轉換、在線加密工具箱、在線偽原創工具、在線APK反編譯、在線網頁截圖工具、在線隨機密碼生成、在線生成二維碼Qrcode、在線Crontab表達式生成、在線短網址生成、在線計算器工具。等20多個日常程序員開發工具，算是一個非常全面的程序員工具箱網站。

網站名稱：ToolFk
網站鏈結：https://www.toolfk.com/
工具鏈接：https://www.toolfk.com/tool-format-css

代碼教學

本工具[在線CSS美化(格式化)/加密/解密/混淆]依賴于Codemirror,它的Github地址為：https://github.com/codemirror/CodeMirror, 加密、解密使用到http://dean.edwards.name/packer/?庫,美化使用到csso-browser庫，https://github.com/css/csso? ?。使用代碼如下

STEP 1

STEP 2

核心代碼如下

beautify_start:function(options){if?(toolfk.beautify_default.beautify_in_progress)?{return;}var?opts?=?$.extend({},toolfk.beautify_default,?options);var?source?=?opts.source.getValue();if(source==''){return?layer.msg(NOT_EMPTY);}toolfk.beautify_default.beautify_in_progress?=?true;if?(opts.language?===?'html')?{output?=?beautifier.html(source,?opts);}?else?if?(opts.language?===?'css')?{output?=?beautifier.css(source,?opts);}?else?{if?(opts.detect_packers)?{source?=?toolfk.beautify_unpacker_filter(source);}output?=?beautifier.js(source,?opts);}opts.target.setValue(output);toolfk.report('beautify',output);toolfk.beautify_default.beautify_in_progress?=?false;
},pack_js:function(options)?{if?(toolfk.beautify_default.beautify_in_progress)?{return;}var?opts?=?$.extend({},toolfk.beautify_default,?options);var?source?=?opts.source.getValue();if(source==''){return?layer.msg(NOT_EMPTY);}toolfk.beautify_default.beautify_in_progress?=?true;var?packer?=?new?Packer;if?(opts.is_base64)?{var?output?=?packer.pack(source,?1,?opts.is_shrink);}?else?{var?output?=?packer.pack(source,?0,?opts.is_shrink);}opts.target.setValue(output);toolfk.report('compress',output);toolfk.beautify_default.beautify_in_progress?=?false;
},dec_pack:function(options){if?(toolfk.beautify_default.beautify_in_progress)?{return;}var?opts?=?$.extend({},toolfk.beautify_default,?options);var?source?=?opts.source.getValue();if(source==''){return?layer.msg(NOT_EMPTY);}toolfk.beautify_default.beautify_in_progress?=?true;try?{eval('var?value=String'?+?source.slice(4));opts.target.setValue(value);toolfk.report('deciphering-compress',value);}?catch?(e)?{layer.msg(TEXT_ERROR);}toolfk.beautify_default.beautify_in_progress?=?false;
},dec_pack_shrink:function(options){if?(toolfk.beautify_default.beautify_in_progress)?{return;}var?opts?=?$.extend({},toolfk.beautify_default,?options);var?source?=?opts.source.getValue();if(source==''){return?layer.msg(NOT_EMPTY);}toolfk.beautify_default.beautify_in_progress?=?true;try?{eval('var?value=String'?+?source.slice(4));var?source?=?toolfk.beautify_unpacker_filter(value);output?=?beautifier.js(source,?opts);opts.target.setValue(output);toolfk.report('decode-code',output);}?catch?(e)?{layer.msg(TEXT_ERROR);}toolfk.beautify_default.beautify_in_progress?=?false;
},code_code:function(options){if?(toolfk.beautify_default.beautify_in_progress)?{return;}var?opts?=?$.extend({},toolfk.beautify_default,?options);var?target?=?opts.target.getValue();if(target==''){return?layer.msg(NOT_EMPTY);}toolfk.beautify_default.beautify_in_progress?=?true;new?ClipboardJS('.copy-code',?{text:?function(trigger)?{layer.msg(COPY_SUCC);return?target;}});toolfk.beautify_default.beautify_in_progress?=?false;
},/*?css?*/
purify_css:function(options){if?(toolfk.beautify_default.beautify_in_progress)?{return;}var?opts?=?$.extend({},toolfk.beautify_default,?options);var?source?=?opts.source.getValue();if(source==''){return?layer.msg(NOT_EMPTY);}toolfk.beautify_default.beautify_in_progress?=?true;var?value???=???toolfk.purify_encode(source).replace(/\}/g,'}\n');opts.target.setValue(value);toolfk.report('purify_css',value);toolfk.beautify_default.beautify_in_progress?=?false;
},purify_encode:function(text){var?val?=?text;val?=?val.replace(/\/\*(.|\n)*?\*\//g,'');??????????//去除注釋val?=?val.replace(/^\s+|\s+$/g,'');???????????????????//清除首尾空格val?=?val.replace(/(:)\s+/g,'$1');?????????????????????//去除?冒號后多個空格??????????????如?width:??100px??=>?width:100pxval?=?val.replace(/\s{2,}/g,'?');??????????????????????//去除?多余空格2個以上?????????????如?margin:?10px???20px??30px??=>?margin:10px?20px?30pxval?=?val.replace(/,\s+|\s+,/g,',');????????????????//去除?多個樣式共享時的多余空格????如?h1,??h2??,?h3??=>h1,h2,h3val?=?val.replace(/;{2,}|;\s+/g,';');???????????????//去除?多個分號或分號后面多余空格??如?width:200px;;??height:100px??=>?width:200px;height:100pxval?=?val.replace(/\s*\{\s*/g,'{');???????????????????//去除?選擇符后面多余空格??????????如?div?{?height:100px}???=>?div{height:100px}val?=?val.replace(/\s*}\s*/g,'}');????????????????//去除?選擇器前面多余空格??????????如?div{height:100px}??a{}???=>?div{height:100px}a{}val?=?val.replace(/[\n\t\f\r]/g,'');???????????????//去除換行,制表符,分頁符,回車val?=?val.replace(/;}/g,'}');return?val;
},optimize_css:function(options){if?(toolfk.beautify_default.beautify_in_progress)?{return;}var?opts?=?$.extend({},toolfk.beautify_default,?options);var?source?=?opts.source.getValue();if(source==''){return?layer.msg(NOT_EMPTY);}toolfk.beautify_default.beautify_in_progress?=?true;var?lastResult?=?csso.minify(source,?{restructure:?true});var?value???=???lastResult.css;opts.target.setValue(value);toolfk.report('optimize_css',value);toolfk.beautify_default.beautify_in_progress?=?false;
},

值得一試的三個理由：

1. 整合各種程序員開發中經常使用的開發測試工具。

2. 簡潔美觀大氣的網站頁面

3. 支持 在線格式化執行代碼、APK在線反編譯、在線高強度密碼生成、在線網頁截圖 等二十多種工具服務

4. 同時還推薦一下它的姐妹網?www.videofk.com?視頻下載工具箱?

本文鏈接：http://www.hihubs.com/article/367