立命館大学情報理工学部

プログラミング講座

配布資料

テンプレート

Visual Studio Codeのページ

https://vscode.dev/

プログラム

資料に載せているプログラム断片は，基本的にこのページからコピー＆ペーストして下さい。

スタート画面の表示(1)

<body>
  <section>
    <img id="img" src="omikuji0.png" width="280" height="395"/><br/>
    <button id="button">おみくじを引く</button>
  </section>
</body>

スタート画面の表示(3)

<link rel="stylesheet" href="style.css">

札を順番に表示 (1)

var timer;

function showOmikuji() {
  const img = document.getElementById("img");
  img.src = "omikuji1.png";
}

function startOmikuji() {
  timer = setInterval(showOmikuji,500);
}

札を順番に表示 (2)

<script src="omikuji.js"></script>

<button id="button" onclick="startOmikuji();">おみくじを引く</button>

札を順番に表示 (3)

var count = 0;

  img.src = "omikuji" + (count % 6 + 1) + ".png";
  count = count + 1;

札を順番に表示 (4)

var number;

  number = Math.floor(Math.random()*10) + 5;

  if(count == number) {
    clearInterval(timer);
  }

デバッグ

  const button = document.getElementById("button");
  button.style.visibility = "hidden";

音を鳴らす

  const sound = new Audio('sound1.mp3');
  sound.play();