首页 > 代码库 > 自动刷新 CSS文件

自动刷新 CSS文件

2024-08-11 19:13:00   218人阅读

自动刷新 CSS文件

使用任何代码工具码 CSS，都是需要保存后再切换到浏览器按 F5 刷新查看效果，一次又一次，不管这个改动仅是一个小小的颜色。使用 CSSrefresh 后，改动 CSS 文件保存后，直接看浏览器就好了！

省去了： 切换到浏览器按 F5 刷新查看效果。这对码 CSS 习惯不停刷新查看效果的开发人员来说绝对是利器，省却的时间不是一点两点。

CSSrefresh 是一个 JavaScript 库，用来实现无需刷新页面立即更换网页样式效果的功能，即插即用无需配置，只需要在页面中引入该 JS 文件即可。

使用CSSrefresh是容易的

<head>
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/site.css" />
<script type="text/javascript" src="http://www.mamicode.com/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

 

自动刷新 CSS文件


联系
我们