html幸运大转盘抽奖

以下是一个简单的HTML幸运大转盘代码示例，使用了HTML、CSS和JavaScript。




<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>幸运大转盘</title>
<style>
  .spinner-container {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 50px auto;
  }
  .spinner-plate {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    position: relative;
    background: #ececec;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.5);
  }
  .spinner-plate .prize {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 300px;
    font-size: 24px;
    color: #fff;
  }
  .spinner-plate .prize-content {
    position: absolute;
    width: 100%;
    height: 100%;
    text-align: center;
    line-height: 300px;
    font-size: 24px;
    color: #fff;
    opacity: 0;
    transition: all 0.5s;
  }
  .spinner-plate .mask {
    position: absolute;
    width: 100%;
    height: 100%;
    clip: rect(0px, 300px, 300px, 150px);
    background: #ececec;
  }
</style>
</head>
<body>
<div class="spinner-container">
  <div class="spinner-plate">
    <div class="prize">奖品</div>
    <div class="prize-content">
      特等奖: <br> iPhone 13 Pro Max
    </div>
    <div class="mask"></div>
  </div>
</div>
 
<script>
function spin() {
  var prizeContent = document.querySelector('.spinner-plate .prize-content');
  var deg = Math.random() * 360; // 生成一个0到360之间的随机数
  prizeContent.style.transform = 'rotate(' + deg + 'deg)';
  prizeContent.style.opacity = 1;
  
  // 假设转到一定度数时停止，实际应用中可以根据需要设置条件
  if (deg > 180 && deg < 240) {
    setTimeout(function() {
      prizeContent.style.opacity = 0;
    }, 1000);
  }
}
 
document.querySelector('.spinner-container').addEventListener('click', spin);
</script>
</body>
</html>

这段代码实现了一个简单的转盘效果，点击转盘容器后，随机奖品内容会显示并转动。这个示例没有涉及复杂的物理模拟或动画，主要是为了展示基本的转盘逻辑。实际应用中，可以添加更多奖品、控制转盘停止的条件、添加声音效果等。

html幸运大转盘抽奖

评论已关闭

推荐阅读