ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。