ホームページ > 記事 > ウェブフロントエンド > jsによる動的プロセス表示を実現

jsによる動的プロセス表示を実現

jackloveオリジナル: 2018-06-15 15:20:011934ブラウズ

プロセスが多いものについては、以下に示すように、プロセスバーを使用して、さまざまな段階に応じてプロセスを表示したいと考えています:

上記の関数に対応する HTML コードは次のとおりです:

 <p class="col-md-12 col-lg-3">
      <p class="panel panel-default">
        <p class="tit06">
          <h3>漏洞处理状态</h3>
        </p>
        <p class="status">
          <ul>
            <li  name="__tab_step1_pub" class="top active">
                <p  class="info" id="tab_step1">
                <h4>
                  <p class="heading"></p>
                  待审阅</h4>
                <p class="text" >漏洞已提交，等待厂商审阅</p> 
                </p>
            </li>
            <li name="__tab_step2_pub" >
                <p  class="info" id="tab_step2">
                <h4>
                  <p class="heading"></p>
                  待确认</h4>
                <p class="text" >漏洞已开始审阅，等待厂商确认</p>
                </p>
            </li>
            <li name="__tab_step3_pub">
              <p  class="info" id="tab_step3">
                <h4>
                  <p class="heading"></p>
                  待修复</h4>
                  <p class="text" >漏洞已被确认，等待厂商修复</p>    
              </p>
            </li>
            <li name="__tab_step4_pub">
                <p  class="info" id="tab_step4">
                <h4>
                  <p class="heading"></p>
                  已关闭</h4>
                    <p class="text" >漏洞修复完毕，厂商关闭漏洞</p>
                </p>
            </li>
            <li name="__tab_step5_pub" >
                <p  class="info" id="tab_step5">
                <h4> <p class="heading"></p>
                  已公开</h4>
                <p class="text" >厂商同意公开此漏洞</p>
                </p>
            </li>
          </ul>
        </p>
      </p>
    </p>

ここで使用されるメソッドは、処理ステータスに基づいており、ここでは $status です。これに応じて、スタイルクラス class="active" を対応する 48ce4baa0bbf92c67e39bfe21a659189 に追加することです。

<script type="text/javascript">
/*根据处理状态，添加或删除对应的样式名*/
function addClass(elem, className){ //增加类名
    if(!elem.className){
            elem.className = className;
            return;
    }
    var clazz = &#39; &#39; + elem.className + &#39; &#39;;
    if(clazz.indexOf(&#39; &#39; + className + &#39; &#39;) === -1){
            elem.className = elem.className + &#39; &#39; + className;
    }
}

  var step1 = document.getElementById(&#39;tab_step1&#39;),
      step2 = document.getElementById(&#39;tab_step2&#39;),
      step3 = document.getElementById(&#39;tab_step3&#39;) ,
      step4 = document.getElementById(&#39;tab_step4&#39;),
      step5 = document.getElementById(&#39;tab_step5&#39;);
  var status = &#39;<?php echo $status;?>&#39;;
  switch(status){
      case &#39;1&#39;: //待确认
          addClass(step2.parentNode, &#39;active&#39;); //parentNode即为包含step2的外一层标签，此处即为<li>标签
          break;
      case &#39;2&#39;: //待修复
           addClass(step2.parentNode, &#39;active&#39;);
           addClass(step3.parentNode, &#39;active&#39;);
          break;
      case &#39;3&#39;://已关闭
          addClass(step2.parentNode, &#39;active&#39;);
          addClass(step3.parentNode, &#39;active&#39;);
          addClass(step4.parentNode, &#39;active&#39;);
          break;
      case &#39;4&#39;: //已公开
          addClass(step2.parentNode, &#39;active&#39;);
          addClass(step3.parentNode, &#39;active&#39;);
          addClass(step4.parentNode, &#39;active&#39;);
          addClass(step5.parentNode, &#39;end bottom-active&#39;);
          break;
  }
</script>

このように設定した後、$status のステータスを「修復保留中」に変更すると、Web ページのプロセスが次のように実装されます:

対応する Web ページの HTML を表示するコード:

対応する 25edfb22a4f469ecb59f1190150159c6 class="active" がタグに追加されたことがわかります。設定が成功し、プロセスの進行状況が動的に表示されます。
この記事では、js 実装プロセスの動的表示について紹介します。関連コンテンツについては、php 中国語 Web サイトを参照してください。

jsによる動的プロセス表示を実現

関連記事