好用的線上工具（附地址）

最近專案時間緊張，馬上就要上線了，工作要緊。

工作使我快樂！工作使我感恩！！工作使我富有！！！

等不忙的時候我會把專案上遇到的問題整理一下發表出來
下一篇我會寫關於json和前後端資料互動的專題

前端工具
URL線上編碼解碼（中文傳值）
http://www.jsons.cn/urlencode/
另一個URL線上編碼解碼（裡面還有很多生活工具）
https://www.sojson.com/encodeurl.html
favicon線上製作（網站小圖示）
https://tool.lu/favicon/
圖片壓縮（前端專案提高頁面載入速度，提升使用者體驗）
https://www.yasuotu.com/
rgb轉16進位制顏色程式碼轉換（配色很重要是網頁的門面擔當）
http://www.yuangongju.com/color
字型圖示庫 Font-Awesome（簡潔大氣上檔次）
http://www.yuangongju.com/fonticon

如何使用FontAwesome?
下載官方提供的CSS和字型檔案，並複製到您的專案中。 
在您的專案程式碼 <head> 中引入 font-awesome.min.css.
<link rel="stylesheet" type="text/css" href="../../static/css/animate/font-awesome.min.css">
您可以在任何地方使用 Font Awesome 只需要新增css類 fa ， fa-***。
<i class="fa fa-camera-retro"></i>

在這裡插入圖片描述 加大強調！！！這裡要注意引入的路徑，不然沒有效果。

CSS3動畫庫（可以看到所有炫酷的動畫效果展示，不用再糾結選哪個好）
http://www.yuangongju.com/animate

如何使用 Animate.css?
下載Animate.css，並複製到您的專案中。 
在您的專案程式碼 <head> 標籤中引入 Amimate.css 檔案。
<link rel="stylesheet" type="text/css" href="../../static/css/animate/animate.min.css">
使用 Amimate.css定義的類給指定的元素新增動畫：
class類從展示頁面粘過來就可以了，infinite是迴圈，可加可不加
<h1 class="animated infinite bounce">Example</h1>

或使用javascript 新增動畫：
JavaScript $(selector).addClass('animated ' + animateName);
在這裡插入圖片描述

後端工具
線上正規表示式測試（人腦肯定沒有電腦好用）
http://www.yuangongju.com/regex
線上雜湊/雜湊SHA MD5加密（看看底層，自己寫hash函數）
http://www.yuangongju.com/encrypt?tab=hash
程式碼管理工具
線上文字差異對比（SVN版本衝突時對比程式碼用）
https://www.jq22.com/textDifference
前後臺互動工具
JSON線上工具(ajax傳值json一直令我很頭疼)
https://www.bejson.com/
其他工具
word→PDF線上工具（寫簡歷時比較有用）
https://smallpdf.com/cn/word-to-pdf
二維條碼生成
http://www.yuangongju.com/qr
IP地址查詢
http://www.yuangongju.com/ip
數位轉中文大寫（報銷發票時填大寫金額用）
https://tool.lu/daxie/

線上工具–程式設計師的工具箱
https://tool.lu/
這裡還有很多線上工具等其他內容，我沒有挨個去試，有興趣的同學可以自行嘗試

【開發必備，親測可用】哪裡不會點哪裡，有了這些線上工具，開發就是so easy！！！

好用的線上工具（附地址）