用js写一个 环绕式 抽奖结果

使用JavaScript实现环绕式抽奖结果可以通过以下步骤：

1. 编写HTML代码，包含一个按钮和一个装载抽奖结果的元素。

2. 编写JavaScript代码，在点击按钮时触发抽奖过程。在这个过程中，可以设置一个计数器来计算抽奖结果的数量。

3. 使用CSS样式来实现环绕式抽奖效果。可以将抽奖结果设置为圆形或者扇形，并通过CSS旋转来实现环绕效果。

4. 将抽奖结果插入到环绕式抽奖效果中，并更新抽奖结果的数量。

以下是一个简单的示例代码，仅供参考：

HTML代码：

<button onclick="startLottery()">开始抽奖</button>
<div id="result"></div>

CSS样式：

#result {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 100px;
  margin-top: -50px;
  margin-left: -50px;
  border-radius: 50%;
  background-color: #ccc;
  transform-origin: center center;
}

.result-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 50%;
  border-radius: 50%;
}

.result-item:nth-child(1) {
  transform-origin: right bottom;
  transform: rotate(-45deg) skew(45deg) translate(100%);
}

.result-item:nth-child(2) {
  transform-origin: left bottom;
  transform: rotate(45deg) skew(-45deg) translate(-100%);
}

.result-item:nth-child(3) {
  transform-origin: left top;
  transform: rotate(-45deg) skew(-45deg) translate(-100%);
}

.result-item:nth-child(4) {
  transform-origin: right top;
  transform: rotate(45deg) skew(45deg) translate(100%);
}

JavaScript代码：

var resultCount = 0;
var resultEl = document.getElementById('result');
var items = ['1', '2', '3', '4'];

function startLottery() {
  if (resultCount >= items.length) {
    alert('已经抽完啦！');
    return;
  }

  var item = items[resultCount];
  var itemEl = document.createElement('div');
  itemEl.className = 'result-item';
  itemEl.innerText = item;

  resultEl.appendChild(itemEl);
  resultCount++;

  setTimeout(function() {
    itemEl.classList.add('show');
  }, 100);

  setTimeout(function() {
    itemEl.classList.add('rotate');
    itemEl.style.transform = 'rotate(' + (360 / items.length * (resultCount - 1)) + 'deg)';
    resultEl.style.transform = 'rotate(' + (360 / items.length * (resultCount - 1)) + 'deg)';
    resultEl.style.transition = 'transform .5s';
  }, 200);
}