写一个有12个区域的大转盘抽奖分别的一到十二等奖并且后期可以修改这个奖项的内容样式弄好看一点然后抽奖概率写成可控的具体怎么控制讲解一下并指出在哪控制把所有代码写出来

HTML代码：

<div id="roulette">
  <div class="item item-1">一等奖</div>
  <div class="item item-2">二等奖</div>
  <div class="item item-3">三等奖</div>
  <div class="item item-4">四等奖</div>
  <div class="item item-5">五等奖</div>
  <div class="item item-6">六等奖</div>
  <div class="item item-7">七等奖</div>
  <div class="item item-8">八等奖</div>
  <div class="item item-9">九等奖</div>
  <div class="item item-10">十等奖</div>
  <div class="item item-11">十一等奖</div>
  <div class="item item-12">十二等奖</div>
  <div class="pointer"></div>
</div>
<button id="start" onclick="start()">开始抽奖</button>

CSS代码：

#roulette {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-size: 18px;
  color: #fff;
  text-align: center;
  line-height: 300px;
  transition: transform 6s ease-in-out;
}

.item-1 {
  background-color: #f44336;
  transform: rotate(30deg);
}

.item-2 {
  background-color: #9c27b0;
  transform: rotate(60deg);
}

.item-3 {
  background-color: #3f51b5;
  transform: rotate(90deg);
}

.item-4 {
  background-color: #00bcd4;
  transform: rotate(120deg);
}

.item-5 {
  background-color: #009688;
  transform: rotate(150deg);
}

.item-6 {
  background-color: #4caf50;
  transform: rotate(180deg);
}

.item-7 {
  background-color: #8bc34a;
  transform: rotate(210deg);
}

.item-8 {
  background-color: #cddc39;
  transform: rotate(240deg);
}

.item-9 {
  background-color: #ffeb3b;
  transform: rotate(270deg);
}

.item-10 {
  background-color: #ffc107;
  transform: rotate(300deg);
}

.item-11 {
  background-color: #ff9800;
  transform: rotate(330deg);
}

.item-12 {
  background-color: #795548;
  transform: rotate(360deg);
}

.pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-top: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-left: 80px solid #fff;
  transform-origin: 0 50%;
  transform: translate(-40px, -50%) rotate(-30deg);
}

button {
  display: block;
  margin: 20px auto;
  padding: 10px 20px;
  font-size: 16px;
  background-color: #4caf50;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript代码：

// 获取HTML元素
var roulette = document.getElementById('roulette');
var pointer = document.querySelector('.pointer');
var startBtn = document.getElementById('start');

// 奖项设置
var prizes = [
  '一等奖',
  '二等奖',
  '三等奖',
  '四等奖',
  '五等奖',
  '六等奖',
  '七等奖',
  '八等奖',
  '九等奖',
  '十等奖',
  '十一等奖',
  '十二等奖'
];

// 概率设置
var probabilities = [
  0.01, // 一等奖
  0.02, // 二等奖
  0.03, // 三等奖
  0.04, // 四等奖
  0.05, // 五等奖
  0.06, // 六等奖
  0.07, // 七等奖
  0.08, // 八等奖
  0.09, // 九等奖
  0.1, // 十等奖
  0.2, // 十一等奖
  0.25 // 十二等奖
];

// 抽奖函数
function start() {
  // 禁用按钮
  startBtn.disabled = true;

  // 随机生成一个概率值
  var random = Math.random();

  // 计算每个奖项的概率范围
  var ranges = [];
  for (var i = 0, len = probabilities.length; i < len; i++) {
    ranges.push(probabilities.slice(0, i + 1).reduce(function(sum, value) {
      return sum + value;
    }));
  }

  // 确定中奖的奖项
  var prizeIndex = ranges.findIndex(function(value) {
    return random < value;
  });

  // 计算旋转角度
  var angle = prizeIndex * 30 - 15;

  // 设置动画
  roulette.style.transform = 'rotate(' + (3600 + angle) + 'deg)';
  pointer.style.transform = 'translate(-40px, -50%) rotate(' + angle + 'deg)';

  // 2秒后弹出中奖信息
  setTimeout(function() {
    alert('恭喜您获得' + prizes[prizeIndex]);
    // 启用按钮
    startBtn.disabled = false;
  }, 2000);
}

// 修改奖项和概率
function setPrizes(newPrizes, newProbabilities) {
  // 检查参数是否合法
  if (newPrizes.length !== newProbabilities.length) {
    throw Error('奖项和概率的长度不一致');
  }
  if (newProbabilities.some(function(value) {
    return value < 0 || value > 1;
  })) {
    throw Error('概率必须在0到1之间');
  }

  // 更新奖项和概率
  prizes = newPrizes;
  probabilities = newProbabilities;
}

在JavaScript代码中，我们首先定义了奖项和概率的数组，然后编写了抽奖函数start()，该函数会在点击“开始抽奖”按钮时触发，首先禁用按钮，然后随机生成一个概率值，计算每个奖项的概率范围，确定中奖的奖项，计算旋转角度，设置动画，最后2秒后弹出中奖信息，启用按钮。我们还编写了一个setPrizes()函数，用于修改奖项和概率，该函数会检查参数的合法性，然后更新奖项和概率。在HTML代码中，我们创建了一个包含12个区域的大转盘，并设置了每个区域的奖项和样式，还创建了一个“开始抽奖”按钮。在CSS代码中，我们设置了大转盘和指针的样式