慕课在线编辑器

代码提交代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>包中抽奖</title>
  <style>
    .start {
      border: 1px solid #4caf50;
      background: transparent;
      font-size: 18px;
      padding: 8px 22px;
      color: #4caf50;
      outline: none;
      border-radius: 2px;
      cursor: pointer;
    }

.start:active {
      background: #4caf50;
      color: white;
    }

.lottery {
      font-size: 22px;
      color: red;
    }

.prize {
      color: red;
      font-size: 22px;
    }
  </style>
</head>
<body>
  <div>
    <button class="start">戳我抽奖!</button>
  </div>
  <div class="result">
  </div>
  <script>
    var prizeList = ['5年高考3年模拟', '加班一天', '快乐水一罐'];

var startBtn = document.querySelector('.start');
    var resultEle = document.querySelector('.result');

startBtn.addEventListener('click', function() {
      var prize = Math.floor(Math.random() * 3 + 1);

var text = [
      '恭喜！抽到了 ',
      '<span class="lottery">',
      prize,
      '</span>',
      ' 等奖！奖品是 ',
      '<span class="prize">',
      prizeList[prize - 1],
      '</span>',
      '！',
      ].join('');

resultEle.innerHTML = text;
    });
  </script>
</body>
</html>

运行结果