進捗バーのネイティブ JavaScript 実装

進捗バーを実装するためのJavaScriptの具体的なコードは参考までに。具体的な内容は次のとおりです。

プログレスバーの実装の紹介

JavaScript を使用してプログレスバー機能を実装します。

原理:マウス移動イベントを通じてマウスが移動する距離を取得します。

ステップ：

(1) HTMLでのDIVレイアウト (2) CSSスタイルの記述 (3) JavaScriptの特殊効果の記述

HTMLコード

<本文>
 <!-- 全体のボックス -->
 <div id="ボックス">
 <!-- 進捗バー全体 -->
 <div id="進捗">
 <!-- 進捗バーの長さ -->
  <div id="progress_head"></div>
 <!-- 進行状況バーの移動バー -->
 <span id="span"></span>
 <div>
 <!-- データを表示 -->
 <div id="パーセント">0%</div>
 </div>
</本文>

CSS スタイル

<スタイル>
 /* 全体的なスタイル、デフォルトのスタイルを排除*/
 体{
 マージン:0;
 パディング:0;
 }
 ＃箱{
 位置:相対;
 幅:1000ピクセル;
 高さ:30px;
 マージン:100px 自動;
 } 
 ＃進捗{
 位置:相対;
 幅:900ピクセル;
 高さ:30px;
 背景:#999999;
 境界線の半径:8px;
 マージン:0 自動; 
 }
 #進捗状況_head{
 幅:0px;
 高さ:100%;
 左上の境界線の半径:8px;
 左下の境界線の半径:8px;
 背景:#9933CC;
 
 }
 スパン{
 位置:絶対;
 幅:20px;
 高さ:38px;
 背景:#9933CC;
 上:-4px;
 左:0px;
 カーソル:ポインタ;
 }
 #パーセンテージ{
 位置:絶対;
 行の高さ:30px;
 テキスト配置:中央;
 右:-44px;
 トップ:0;
 }
 
 
</スタイル>

JavaScript コード

<スクリプト>

 //js ノードを取得 var oProgress = document.getElementById('progress');
 var oProgress_head = document.getElementById('progress_head');
 var oSpan = document.getElementById('span');
 var oPercentage = document.getElementById('パーセンテージ')

 //マウスダウンイベントを追加 oSpan.onmousedown=function(event){
 
 var イベント = イベント || window.event;
 var x = event.clientX-oSpan.offsetLeft;

 document.onmousemove=関数(){
 
 var イベント = イベント || window.event;
 var wX = event.clientX-x;
 
 
 wX<0の場合
 {
  0 の場合
 }それ以外の場合(wX>=oProgress.offsetWidth-20)
 {
  wX = oProgress.offsetWidth - 20;
 }
 oProgress_head.style.width=wX+'px';
 oSpan.style.left=wX+'px';
 
 oPercentage.innerHTML=parseInt(wX/(oProgress.offsetWidth-20)*100)+'%';
 
 false を返します。
 };
 
 document.onmouseup=関数(){
 
 ドキュメント.onmousemove=null; 
 };
 
 }; 
</スクリプト>

レンダリング

全体的なコード

<!DOCTYPE>
<html lang="ja">
<ヘッド>
 <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
 <title>進捗バー</title>
 <スタイル>
 /* 全体的なスタイル、デフォルトのスタイルを排除*/
 体{
 マージン:0;
 パディング:0;
 }
 ＃箱{
 位置:相対;
 幅:1000ピクセル;
 高さ:30px;
 マージン:100px 自動;
 } 
 ＃進捗{
 位置:相対;
 幅:900ピクセル;
 高さ:30px;
 背景:#999999;
 境界線の半径:8px;
 マージン:0 自動; 
 }
 #進捗状況_head{
 幅:0px;
 高さ:100%;
 左上の境界線の半径:8px;
 左下の境界線の半径:8px;
 背景:#9933CC;
 
 }
 スパン{
 位置:絶対;
 幅:20px;
 高さ:38px;
 背景:#9933CC;
 上:-4px;
 左:0px;
 カーソル:ポインタ;
 }
 #パーセンテージ{
 位置:絶対;
 行の高さ:30px;
 テキスト配置:中央;
 右:-44px;
 トップ:0;
 }
 
 
 </スタイル>
</head>
<本文>

 <!-- 全体のボックス -->
 <div id="ボックス">
 <!-- 進捗バー全体 -->
 <div id="進捗">
 <!-- 進捗バーの長さ -->
  <div id="progress_head"></div>
 <!-- 進行状況バーの移動バー -->
 <span id="span"></span>
 <div>
 <!-- データを表示 -->
 <div id="パーセント">0%</div>
 </div>

</本文>
</html>
<スクリプト>

 //js ノードを取得 var oProgress = document.getElementById('progress');
 var oProgress_head = document.getElementById('progress_head');
 var oSpan = document.getElementById('span');
 var oPercentage = document.getElementById('パーセンテージ')

 //マウスダウンイベントを追加 oSpan.onmousedown=function(event){
 
 var イベント = イベント || window.event;
 var x = event.clientX-oSpan.offsetLeft;

 document.onmousemove=関数(){
 
 var イベント = イベント || window.event;
 var wX = event.clientX-x;
 
 
 wX<0の場合
 {
  0 の場合
 }それ以外の場合(wX>=oProgress.offsetWidth-20)
 {
  wX = oProgress.offsetWidth - 20;
 }
 oProgress_head.style.width=wX+'px';
 oSpan.style.left=wX+'px';
 
 oPercentage.innerHTML=parseInt(wX/(oProgress.offsetWidth-20)*100)+'%';
 
 
 false を返します。
 };
 
 document.onmouseup=関数(){
 
 ドキュメント.onmousemove=null;
 
 };
 
 };
 
</スクリプト>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: