小知识点（一）_html/css_WEB-ITnose-html教程-PHP中文网

小知识点（一）_html/css_WEB-ITnose

php中文网

发布： 2016-06-21 08:45:50

原创

1417人浏览过

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

登录后复制

立即学习“前端免费学习笔记（深入）”；

知我AI

一款多端AI知识助理，通过一键生成播客/视频/文档/网页文章摘要、思维导图，提高个人知识获取效率；自动存储知识，通过与知识库聊天，提高知识利用效率。

查看详情

移动端页面回退下拉列表状态不一致

当我在『原页面』用下拉列表选择某选项后，页面局部刷新了，然后我点击跳转到别的页面，这时候我回退到『原页面』，发现页面回到最初状态，而下拉列表停留在选择后状态，这明显不对了。而且，上述问题出现在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);

登录后复制