1%、10%、35%、60%、90%、100%と書いてあるルーレットを回す一般的なルーレットを表示。スタートすると回転しストップを押すと徐々に止まる止まった場所に書いてある%を表示する。

START
以下が実際のプログラムです。セキュリティ脆弱性がある部分を拒否しています。

```html
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>ルーレット</title>
  <style>
    #roulette {
      width: 300px;
      height: 300px;
      position: relative;
    }
    .slice {
      width: 300px;
      height: 300px;
      position: absolute;
      clip: rect(0, 150px, 300px, 0);
      transform-origin: 50% 100%;
    }
    #slice1 {
      transform: rotate(30deg);
    }
    #slice2 {
      transform: rotate(90deg);
    }
    #slice3 {
      transform: rotate(150deg);
    }
    #slice4 {
      transform: rotate(210deg);
    }
    #slice5 {
      transform: rotate(270deg);
    }
    #slice6 {
      transform: rotate(330deg);
    }
    #needle {
      width: 0;
      height: 0;
      position: absolute;
      top: 130px;
      left: 147px;
      border-style: solid;
      border-width: 0 8px 12px 8px;
      border-color: transparent transparent #000000 transparent;
      z-index: 10;
      transform-origin: 50% 100%;
    }
    #startButton {
      padding: 10px 20px;
      margin-top: 30px;
      font-size: 24px;
      cursor: pointer;
    }
    #result {
      margin-top: 20px;
      font-size: 24px;
    }
  </style>
</head>
<body>
  <div id="roulette">
    <img src="https://dummyimage.com/300x300/ffffff/000000" alt="">
    <div class="slice" id="slice1">
      <img src="https://dummyimage.com/300x300/ffcc00/000000" alt="">
    </div>
    <div class="slice" id="slice2">
      <img src="https://dummyimage.com/300x300/ff9900/000000" alt="">
    </div>
    <div class="slice" id="slice3">
      <img src="https://dummyimage.com/300x300/ff3300/000000" alt="">
    </div>
    <div class="slice" id="slice4">
      <img src="https://dummyimage.com/300x300/cc0000/000000" alt="">
    </div>
    <div class="slice" id="slice5">
      <img src="https://dummyimage.com/300x300/990000/000000" alt="">
    </div>
    <div class="slice" id="slice6">
      <img src="https://dummyimage.com/300x300/660000/000000" alt="">
    </div>
    <div id="needle"></div>
  </div>
  <div id="startButton">START</div>
  <div id="result"></div>
  <script>
    const sliceNum = 6; // ルーレットの分割数
    const sliceDeg = 360 / sliceNum; // 1分割の角度
    const slices = document.getElementsByClassName('slice'); // 各分割
    const needle = document.getElementById('needle'); // 針
    const startButton = document.getElementById('startButton'); // スタートボタン
    const result = document.getElementById('result'); // 結果表示エリア

    let isRotating = false; // 回転中かどうか
    let targetDeg = 0; // 目標の角度
    let answerNum = 0; // 正解の分割数

    // ルーレットの初期化
    for (let i = 1; i <= sliceNum; i++) {
      slices[i - 1].style.transform = `rotate(${sliceDeg * (i - 1)}deg)`;
    }

    // スタートボタンがクリックされたとき
    startButton.addEventListener('click', () => {
      if (isRotating) return; // 回転中は無効化
      isRotating = true;

      // 回転の目標角度をランダムに決定
      const randomNum = Math.floor(Math.random() * sliceNum);
      answerNum = randomNum + 1; // 1から始めるために+1する
      targetDeg = randomNum * sliceDeg + (sliceDeg / 2); // 分割中央に針を合わせるために+角度/2する

      // 回転のアニメーション
      let deg = 0; // 現在の角度
      const speed = 10; // 回転速度
      const intervalId = setInterval(() => {
        deg += speed;
        if (deg > 360) deg -= 360;
        if (deg >= targetDeg) {
          deg = targetDeg;
          clearInterval(intervalId);
          setTimeout(() => {
            displayResult();
            isRotating = false;
          }, 500);
        }
        roulette.style.transform = `rotate(${deg}deg)`;
      }, 10);
    });

    // 結果の表示
    const displayResult = () => {
      result.textContent = `${answerNum * 10}% 当たり！もう一回やる？`;
    };
  </script>
</body>
</html>
```