欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

小知识点(一)_html/css_WEB-ITnose

程序员文章站 2022-05-12 09:53:15
...
在豆瓣浏览电影的时候,我们会看到每部电影都有相应的评分,这些评分可能是 8.1 ,也可能是 7.6 ,每个评分前都有5个星星表示这个评分,评分是 8 则意味着四颗橙色星星,一颗灰色星星,而评分是 8.1 就无法用一颗完整的星星表示,我用下面的方法完成这种情况

思路:写两个 div , 一个 div 里面依次排列5个灰色星星,我们叫它『灰div』,另一个 div 里面依次排列5个橙色星星,我们叫它『橙div』,『灰div』写在『橙div』前面,我们利用定位把两个 div 重叠在一起,用『橙div』覆盖『灰div』,然后控制『橙div』的宽度为评分对应的百分比,就 OK 了

具体代码

* * * * *
* * * * *
8.1

.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);
相关标签: 小知识点(一)