JSとHTMLを組み合わせて処理の進捗バーを表示する方法の紹介

JS と HTML の組み合わせに基づいたプロセス進行状況表示バーは非常に実用的で、すべての主要な Web サイトで使用できます。次のエディターを組み合わせてプロセス進行状況表示バーを実装するアイデアを詳しく説明します。 JSとHTMLを必要とする友人はそれを参照してください

効果は次のとおりです:

1. デザインアイデア

は次のステップに分かれています(参考のみ)。

【縦線】

これはulリストタグを使って作られています、保証されています いつでも追加できて縦に並べられます

【小丸】

htmlタグには小丸タグが用意されていないようです。ここで、 p をラジアン角で追加して完成し、 p の長さ（または幅）に等しいラジアンで正方形 p を追加すると、小さな円が得られます。テープはさらに単純で、テキストを p

[Text]

に直接追加するだけです。テキストは小さな円の後にあり、その小さな円と同じレベルにある必要があります。ここで、position:Absolute; を設定すると同じになります。水平レイアウト

[ダイナミック エフェクト]

フロントエンドのダイナミック エフェクトは Javascript によって完了する必要があります。ここで設定する必要がある 2 つの主なイベント、すなわち

マウス移動イベント onmouseover="on_mous_move() 'info_name_1 ')"

onmouseover=”on_mous_move(‘info_name_1')”

鼠标移出事件onmouseout=”on_mous_out(‘info_name_1')”マウスアウトイベントonmouseout="on_mous_out('info_name_1')"

主なロジックは、テキストの前後に ❤ と 2 つのスペースを追加することです。追加した内容を削除します

【注意】

jsの場合、スペースは実際には6文字の「 」なので、切り取る際には注意が必要です

。 。 。 。以上、実装のソースコードです

​​

------------------------------------- -------- -------------------------------------- ------

2. ソースコードを実装します

ソースコードは次のとおりです (参考のみ)。

以上がJSとHTMLを組み合わせて処理の進捗バーを表示する方法の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。