小知识点(一)

一些零星的知识点,在这里整理记录一下

展现评分的星星

在豆瓣浏览电影的时候,我们会看到每部电影都有相应的评分,这些评分可能是 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);