この記事では、円形のプログレスバー効果を実現するためのJavaScriptの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 <!DOCTYPE html> <html lang="ja"> <ヘッド> <メタ文字セット="UTF-8"> <meta http-equiv="X-UA-compatible" content="IE=edge"> <meta name="viewport" content="width=デバイス幅、初期スケール=1.0"> <title>ドキュメント</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> <スタイル> .itemwait{ 位置:絶対; 上: 0; 下:0; 左:0; 右:0; マージン: 0 自動; } 。進捗{ ストロークダッシュ配列: 251; ストロークダッシュオフセット: 0; /* stroke-dasharray: 破線stroke-dashoffset: オフセット間隔*/ } </スタイル> </head> <本文> <svg 幅="200" 高さ="200" バージョン="1.1" クラス='itemwait'> <circle class='progress' cx="100" cy="50" r="40" ストローク="ピンク" ストローク幅="5" 塗りつぶし="透明" /> <text class='text' x="100" y="50" fill='pink' text-anchor='middle' alignment-baseline='middle'>読み込みを開始</text> </svg> </本文> <スクリプト非同期タイプ='text/javascript'> //js コードは下記を参照</script> </html> 1. ネイティブjs実装 定数ロードArr = [1,2,10,20,40,70,90,100] インデックスを0にする var タイマー = setInterval(()=>{ 合計を document.querySelector('.progress').getTotalLength() とします。 進捗状況を document.querySelector('.progress') とします。 console.log(typeof 合計) progress.style.strokeDashoffset = (合計) * (1-loadingArr[インデックス]/100) if(インデックス<=読み込みArr.長さ){ document.querySelector('.text').textContent=`${loadingArr[index]}%` } インデックス++ if(index===loadingArr.length){ クリアインターバル(タイマー) document.querySelector('.text').textContent='読み込みが完了しました' } },500) 2. jQueryの実装 インデックスを0にする var $circle = $('.progress'); var r = $circle.attr('r'); var タイマー = setInterval(() => { var 合計 = Math.PI * (r * 2); var pct = (1-インデックス / 100) * 合計; console.log(typeof pct,pct) (インデックス<= 100)の場合{ $('.text').text(`${index}%`); $circle.css({ ストロークダッシュオフセット: pct }); } インデックス = インデックス + 10 (インデックス>100)の場合{ $('.text').text('読み込みが完了しました'); クリアインターバル(タイマー) } }, 500) 3. まずは自分のアイデアに従って実装する 定数ロードArr = [1,2,10,20,40,70,90,100] インデックスを0にする var タイマー = setInterval(()=>{ 合計を document.querySelector('.progress').getTotalLength() とします。 進捗状況を document.querySelector('.progress') とします。 console.log(typeof 合計) progress.style.strokeDashoffset = (合計) * (1-loadingArr[インデックス]/100) $('.text').text(関数(){ if(インデックス<=読み込みArr.長さ){ `${loadingArr[index]}%` を返す } }) インデックス++ if(index===loadingArr.length){ クリアインターバル(タイマー) $('.text').text('読み込みが完了しました') } },500) 要約する知識ポイント: svg 描画、js ネイティブ操作、jQuery
以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: MySQLクエリは、フィールドが数値とカンマではないことを指定します。
>>: Centos8 で Docker を使用して Django プロジェクトをデプロイする詳細なチュートリアル
1. 改行なしを実現するには<nobr>タグを使用するコードをコピーコードは次のとおりで...
目次序文MySQL マスタースレーブレプリケーションMySQL でサポートされているレプリケーション...
MySQL 8 は、NoSQL、JSON などのサポートなど、まったく新しいエクスペリエンスをもたら...
1. 問題開発中に、他のデータベースから MySQL データベース テーブルにデータを挿入すると、次...
Web デザインで js を使用すると、多くのページ効果を実現できますが、HTML タグの META...
opencv2 の簡単なインストール: conda インストール --channel https:/...
序文nginx モジュールには、公式とサードパーティの 2 種類があります。nginx のインストー...
1 カーネルにtunモジュールがあるかどうかを確認する modinfo tun modprobe t...
序文MySQL データベースのパスワードを忘れると、データベースに正常にアクセスできなくなり、パスワ...
概要: MySQL は、トランザクションをサポートするためにさまざまなストレージ エンジンを提供しま...
Vue でフォーム フィールドを記述および検証する方法は多数あります。このブログでは、より一般的に使...
HTMLの動作原理: 1. ローカル操作: ブラウザでhtmlファイルを開く2. リモートアクセス...
テキストシャドウテキストに影を追加します。テキストとテキスト装飾に複数のシャドウを追加することができ...
サーバーにはNginx、データベースサポートにはMongo、Python言語のWebフレームワークに...
Sysbench は、MySQL データベース ストレージ エンジン InnoDB のディスク I/...