自動刷新 CSS文件


自動刷新 CSS文件

使用任何代碼工具碼 CSS,都是需要保存后再切換到瀏覽器按 F5 刷新查看效果,一次又一次,不管這個改動僅是一個小小的顏色。使用 CSSrefresh 后,改動 CSS 文件保存后,直接看瀏覽器就好了!

省去了: 切換到瀏覽器按 F5 刷新查看效果。這對碼 CSS 習慣不停刷新查看效果的開發人員來說絕對是利器,省卻的時間不是一點兩點。

CSSrefresh 是一個 JavaScript 庫,用來實現無需刷新頁面立即更換網頁樣式效果的功能,即插即用無需配置,只需要在頁面中引入該 JS 文件即可。

使用CSSrefresh是容易的

<head>
<link rel="stylesheet" type="text/css" href="css/site.css" />
<script type="text/javascript" src="js/cssrefresh.js"></script>
</head>

注意:js 要緊跟在 css 文件之下。

所以,我們就到官網下載這個 CSSrefresh.js文件,但是放在自己的IDE---Hbuilder工具里面不好使用
放在eclipse工具里面好使
再次證明了 “eclipse”的標准性能還是可以的!
Hbuilder是尚在發展狀態,有很多未完善的,不兼容這個插件。

遂,搜索,檢索,探測,詢問……終得出
修改源碼62行
/*return ( headers && headers[ 'Last-Modified' ] && Date.parse( headers[ 'Last-Modified' ] ) / 1000 ) || false;*/
為return ((new Date().getTime()+1000*60*60) / 1000) || false;這一行之后,就可以生效了

此版本可以放在任何開發環境,即可使用。
雙屏顯示下,左邊顯示瀏覽器效果,右邊編輯器,右邊一修改css文件,左邊瞬間生效。


cssrefresh.js版本是官網下載的,使用"eclipse"開發工具的可以使用這個版本
cssrefresh-hassan.js是我自己修改的版本,便於自己開發工具使用的!

以上博文參考,摘自網絡資源,自己修改的,便於自己使用。
參考鏈接:
http://www.oschina.net/p/cssrefresh

http://www.zhangxinxu.com/wordpress/2012/03/cssrefresh-js-automatically-refresh-css-files-%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0/

感謝hassan幫忙修改源碼!

詳情可參考鏈接的源碼附件

有我自己修改版本的demo

鏈接地址:http://files.cnblogs.com/files/leshao/cssrefresh%E8%87%AA%E5%8A%A8%E5%88%B7%E6%96%B0demo.rar

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM