Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <p id="js-result"></p>
<p id="js-btn">start</p>
              
            
!

CSS

              
                
              
            
!

JS

              
                (function(){//即時関数で囲うと他に影響を与えない
  "use strict";//厳密なエラーチェック
  
  //スタートボタンを押した後なのかそうでないのかを知りたいので、この変数を宣言する
  var isStarted = false;//最初はスタートしてないのでfalseにしておく
  var startTime;//スタートボタンを押した時に現在の時間を保持しておきたい
  var diff;//押された時からスタートタイムを引く。その差を保持しておく変数
  var msg = "5秒で止めろ!";
  
  var result = document.getElementById("js-result");
  var btn = document.getElementById("js-btn");
  
  result.innerHTML = msg;
  
  btn.addEventListener("click", function(){
    if(!isStarted){//isStartedがfalseだったら
      isStarted = true;
      this.innerHTML = "stop";
      startTime = Date.now();
      result.innerHTML = msg;//スタートボタンを押したら最初のメッセージを表示。
    } else {
      isStarted = false;
      this.innerHTML = "start";
      diff = (Date.now() - startTime) / 1000 - 5;//今の時間からスタートタイムを引く。ミリ秒を1000で割って秒にする。5秒との差のためさらに5を引く。
      //console.log(diff);
      if ( diff >= -0.1 && diff <= 0.1) {//5秒の前後0.1秒を許容範囲にする
        result.innerHTML = "パーフェクト";
      } else if ( diff > 0) {
        result.innerHTML = "あなたは"  + diff.toFixed(2) + "秒遅かった"//小数点2桁まで表示
      } else {
        result.innerHTML = "あなたは"  + Math.abs(diff).toFixed(2) + "秒速かった"//マイナスなので絶対値を表示するabsをつかう。小数点2桁まで表示
      }
    }
  });
  
})();
              
            
!
999px

Console