javascriptはカウントダウン効果を実現します。

2087 ワード

js。カウントダウン

本論文の実例は、Javascriptがカウントダウン効果を実現する具体的なコードを共有しています。
まずレイアウトを書きます。


<!--   -->
<!DOCTYPE html>
<html>

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 <style>
  #numbers p {
   position: absolute;
   font-size: 100px;
   left: 50%;
   top: 30%;
   margin-left: -29px;
   display:none;
  }
 </style>
</head>

<body>
 <div id="numbers">
  <p>3</p>
  <p>2</p>
  <p>1</p>
 </div>
</body>

</html>

position：absoluteで数字を重ね合わせる（displayがnoneでない場合）
その後、javasciptの内容を追加します。


<script type="text/javascript">
  window.onload = function () {
   var numbers = document.getElementById('numbers');
   var number = numbers.getElementsByTagName('p');
   var i = 0;
   number[i].style.display = 'block';
   i = 1;
   timer = setInterval(function () {
    if (i != number.length) {
     number[i - 1].style.display = 'none';
     number[i].style.display = 'block';
    } else {
     number[i - 1].style.display = 'none';
     clearInterval(timer);
    }
    i++;
   }, 1000)
  }
</script>

カウントダウンは主にsetInterval（）により実現され、1秒ごとに更新される。それでは問題があります。ページの読み込みが完了してから一秒後に、set Intervalの内容が実行され始めます。ページを開いたらすぐにカウントダウンを開始する必要があるなら、まず3の数字であるnumber[0]を表示してください。その後は毎秒対応する数字を表示し、前の数字を非表示にします。1からiの値がnumber.lengthでない場合は、同じコマンドが実行されます。iがnumber.lengthの場合、number[2]すなわち1を非表示にし、タイマーをクリアするだけで、対応する要素が見つからないとUncaght Typerr:Canot read property‘style’of undefinedのエラーが発生します。
これでカウントダウン機能が完了しました。

以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。

Linuxでよく使われるsedコマンド

Vueの双方向データバインディングは原理解析を実現する。