なるの備忘録

エンジニアリングそして営業ができるエンジニアに向けて、日々学んだことをアウトプットしていきます。

JavaScriptでカウントダウンを表示して違法サイトっぽいページを作る

JavaScriptでカウントダウンを表示する

JavaScriptでは画面遷移することなく、画面の表示を変えることができます。
簡単にカウントダウンをするコードを書いてみます。

論よりコード

    //カウントダウンを開始する数を定義
    var count = 10;

    //カウンターを表示する箇所(class="show-count-text")のDOM(HTML)を取得する
    var counterNode = document.querySelector('.show-count-text');

    //カウントダウン関数を作成
    function CountDown() {
      count --;//カウントを減らす
      counterNode.innerText = count;//innerTextを使って取得したDOMの中身のテキストを書き換える
    }

    //1000m秒(=1秒)ごとにCouontDown関数を実施
    setInterval(CountDown, 1000);

簡単な解説

①カウントダウンを表示したい箇所のDOMを取得して、それをinnertextで書き換える関数を作成する
②setIntervalでカウントダウンをする関数を１秒おきに実施する



カウントダウンの使用例

せっかくなのでカウントダウンを活用して一つ簡単なサイトを作ってみようと思います。
せっかくなので面白くなるようにネットサーフィンしているとよく出会う違法サイトっぽいページを作ります。

javascriptのコード

window.addEventListener('DOMContentLoaded',
  function () {

    //カウントダウンを開始する数を定義
    var count = 10;
    //カウンターを表示する箇所(class="show-count-text")のDOM(HTML)を取得する
    var counterNode = document.querySelector('.show-count-text');

    alert('あなたのパソコンは攻撃を受けています。対策を見ますか？');

    //カウントダウン関数を作成
    function CountDown() {
      count --;//カウントを減らす
      counterNode.innerText = count;//innerTextを使って取得したDOMの中身のテキストを書き換える

      //countが0になると別サイトに誘導する
      if(count === 0){
        location.href = "BadSite.html" ;
      }
    }

    //1000m秒(=1秒)ごとにCouontDown関数を実施
    setInterval(CountDown, 1000);

  }, false
);

htmlとcss

一応オマケに適当に作成したhtmlとcssのコードです。

html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <title>ウイルスが検出されました</title>
    <link rel="stylesheet" type="text/css" href="style_VirusSite.css">
  </head>
  <body>
    <h1>ご使用のPCにウイルスが検出されました</h1>
      <!--class="show-count-text"の中身をjsで変更-->
      <p><strong><span class="show-count-text">10</span>秒以内</strong>に問題が解決されない場合、<br>ウイルスがPCに被害を及ぼし、データがすべて削除される可能性があります。</p>
      <p>下の手順に従って、ただちにウイルスを削除してください。</p>

      <p class="step">ステップ1：下のボタンをクリックして無料のウイルス対策ソフトをダウンロード</p>
      <p class="step">ステップ2：ウイルス対策ソフトをインストールし、PCをすぐにクリーンアップ</p>

      <!--ダウンロードをクリックすると違法サイトに転送-->
      <a href="BadSite.html">ウイルス対策ソフトをダウンロード</a>

      <script src="main_VirusSite.js"></script>
  </body>
</html>
CSS
h1{
  background-color: yellow;
  width:600px;
}
.step{
  color: blue;
}
a{
  text-decoration: none;
  color:white;
  background-color:green;
  padding:5px;
  margin-left:150px;
}
a:hover{
  text-decoration: underline;
}
strong{
  color: red;
}

以上で違法サイトの完成です。



完成サイトイメージ

ツイッターで公開している下記動画のようになればオッケーです。