ちょっとした豆知識(1)_html/css_WEB-ITnose

Douban で映画を閲覧すると、各映画に対応する評価が 8.1 または 7.6 として表示されます。この評価では、8 つ星が付けられます。 4 つのオレンジ色の星と 1 つの灰色の星を意味しますが、8.1 の評価は 1 つの完全な星では表すことができません。私は次の方法を使用してこの状況を完成させます。

アイデア: 2 つの div を記述し、1 つの div に 5 つの灰色の星を配置します。順番に「グレー div」と呼び、もう一方の div にはオレンジ色の星が 5 つ並んでおり、それを「オレンジ div」と呼びます。「オレンジ div」には「グレー div」と書かれています。 2 つの 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 シミュレーション状態で発生します。携帯電話の Baidu と Safari ではこのような問題が発生しました。UC ブラウザでテストしましたが、ドロップダウン リストがデフォルトのオプションに戻っていることがわかりました。各ブラウザはほぼ同じではありません

解決策: この問題は 2 つの部分で解決されます。最初の部分では、ロールバック トリガーを決定するためにウィンドウのページ表示イベントを監視します。2 番目の部分では、慎重に観察します。友人の意見によれば、ドロップダウン リストには選択された状態でオプションが表示されますが、実際にはドロップダウン リストの選択されたリストはデフォルトの状態に復元されるため、解決策は単純に選択された状態にリセットするだけです。

window.addEventListener('pageshow', function (event) {    $('down').find('[selected="1"]').removeAttr('selected').attr('selected', '1');});

ネットワーク接続ステータス

本来の目的はネットワークステータス、2Gなどの情報を取得することですが、 W3Cの仕様では現在のネットワーク状態を取得するメソッドが用意されており、navigator.connectionでネットワーク状態情報を取得することができますが、互換性が非常に悪いため、2番目の選択肢しか得られませんでした。ネットワーク接続ステータス

1 つの属性、navigator.onLine、true はオンライン、false はオフラインを意味します。2 つの監視イベント、オンライン モニターはオンライン、オフライン モニターはオフラインです

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);