在豆瓣浏览电影的时候，我们会看到每部电影都有相应的评分，这些评分可能是 8.1 ，也可能是 7.6 ，每个评分前都有5个星星表示这个评分，评分是 8 则意味着四颗橙色星星，一颗灰色星星，而评分是 8.1 就无法用一颗完整的星星表示，我用下面的方法完成这种情况
思路：写两个 div , 一个 div 里面依次排列5个灰色星星，我们叫它『灰div』，另一个 div 里面依次排列5个橙色星星，我们叫它『橙div』，『灰div』写在『橙div』前面，我们利用定位把两个 div 重叠在一起，用『橙div』覆盖『灰div』，然后控制『橙div』的宽度为评分对应的百分比，就 OK 了
具体代码
<div class="wrapper"> <div> <i class="icon">*</i> <i class="icon">*</i> <i class="icon">*</i> <i class="icon">*</i> <i class="icon">*</i> </div> <div style="width:81%"> <i class="icon star">*</i> <i class="icon star">*</i> <i class="icon star">*</i> <i class="icon star">*</i> <i class="icon star">*</i> </div></div><span class="star">8.1</span>
.wrapper { display: inline-block; position: relative; white-space: nowrap;}.wrapper > div { display: inline-block;}.wrapper > div:nth-child(1) > i { color: #ddd;}.wrapper > div:nth-child(2) { position: absolute; left: 0; z-index: 2; overflow: hidden;}.star { color: #ff6600;}当我在『原页面』用下拉列表选择某选项后，页面局部刷新了，然后我点击跳转到别的页面，这时候我回退到『原页面』，发现页面回到最初状态，而下拉列表停留在选择后状态，这明显不对了。而且，上述问题出现在chrome模拟状态下，手机百度和safari有这样的问题，我在uc浏览器测试，却发现下拉列表恢复到了默认选项，也就是各个浏览器表现不近相同
解决：问题分为两部分解决，第一部分监听 window 的 pageshow 事件，来判断回退触发；第二部分，在小伙伴的细心观察下，发现虽然下拉列表显示选项是选择后状态，但是其实下拉列表的 selected 是恢复到默认状态的，所以解决方法就简单了，直接重置 selected 属性就OK了
window.addEventListener('pageshow', function (event) { $('down').find('[selected="1"]').removeAttr('selected').attr('selected', '1');});本来的初衷是获取联网状态，2G、3G、4G或wifi这样的信息， W3C 的规范中给出了一个方法来获得现在的网络状态 navigator.connection ，能够获取联网状态信息，但是兼容十分不好，不得不放弃选择其次只获取网络连接状态
一个属性， navigator.onLine ，true 表示在线， false 表示离线；两个监听事件， online 监听在线， offline 监听离线
window.addEventListener('load', function (e) { if (navigator.onLine) { /* 在线 doing... */ } else { /* 离线 doing... */ }}, false);window.addEventListener('online', function (e) { /* 在线 doing... */}, false);window.addEventListener('offline', function (e) { /* 离线 doing... */}, false);
