移动端抽奖大转盘

最新推荐文章于 2024-06-23 09:31:26 发布

Gjanuary

最新推荐文章于 2024-06-23 09:31:26 发布

阅读量308

点赞数

分类专栏：小游戏制作移动端布局的集中解决方案文章标签： css safari html

本文链接：https://blog.csdn.net/Gjanuary/article/details/123350776

版权

移动端布局的集中解决方案同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

小游戏制作

2 篇文章 0 订阅

订阅专栏

181e67f2cca50dc512e9014faf07833a


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>使用css3绘制任意角度扇形</title>

  <style>
  *{
    padding: 0;
    margin: 0;
  }
  html{
      font-size:5.3333333vw;
      color: white;
      background: url('https://img.zcool.cn/community/01beaf5a6ad912a80120a123c3f9a1.gif') no-repeat;
      height: 100%;
      background-size: contain;
      overflow: hidden;
  }
  #yanhua{
    width: 100%;
    height: 400px;
    position: fixed;
    background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Finews.gtimg.com%2Fnewsapp_match%2F0%2F13118848338%2F0&refer=http%3A%2F%2Finews.gtimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649303822&t=2fe5e1df8977497ad74b3b5132e3763b);
    background-size: contain;
    top: 0px;
    display: none;
  }
 #dibu{
    width: 100%;
    height: 88px;
    position: absolute;
    border-radius: 20px;
    background: url(https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F01ca4760214fe111013e3991443202.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1649305181&t=b355992334672a3cef94cc1e6bb39ab3);
    background-size: contain;
    margin-top: 3rem;
    z-index: -3;
  }

  .pie {
    background-color: red;
    position: relative;
    margin: auto;
    margin-top: 20px;
    padding: 0;
    width: 17.5rem;
    height: 17.5rem;
    border-radius: 100%;
    border: 0.5rem solid white;
    list-style: none;
    overflow: hidden;
    transform: rotate(0deg); /*针对mac safari浏览器兼容*/
 

  }
  .slice {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
    height: 50%;
    transform-origin: 0% 100%;
  }
  .zhizhen{
      width: 1.3rem;
      height: 9.375rem;
      position: absolute;
      left: 8.75rem;
      z-index: 1;
      border-radius: 10px;
      text-align: center;
      top: 0.5rem;
      margin-top: 20px;
  }

  .zhi1{
    height: 7rem;
    width: 0.28rem;
    background: white;
    margin: auto;
 
    border: 1px solid white;


  }
  .zhi2{
    height: 1.375rem;
    width: 1.35rem;

    background: white;
    border: 1px solid white;
    border-radius: 190px 190px 200px 200px;
  }
  span{
    width: 1px;
  }
  .control{
    width: 18.75rem;
    display: flex;
    justify-content: space-around;
  }
  .control button{
     width: 5rem;
     text-align: center;
     height: 2rem;
     background: skyblue;
     color: white;
     border-radius: 3px;
     border: 0.3rem double white;
     font-size: 1rem;
     margin-top: 5px;
  }
  .jiantou{
    width: 0;
    height: 0;
    border:0.28rem solid;
    margin: auto;
    margin-top: 0.5rem;
    border-color:transparent transparent white transparent;
  }
  </style>
</head>
<body>

<audio preload id="vd">
     <source src="http://downsc.chinaz.net/Files/DownLoad/sound1/202004/12750.mp3" type="audio/mpeg">
</audio>


<audio preload   id="vdstop">
     <source src="http://downsc.chinaz.net/Files/DownLoad/sound1/201705/8684.mp3" type="audio/mpeg">
</audio>
<div class="zhizhen">
    <div class="jiantou"></div>
    <div class="zhi1">
      
    </div>
    <div class="zhi2">
      
    </div>
 </div>
<ul class='pie'>
</ul>
<div class="control">
<button>开始</button>
</div>
<div id="yanhua"></div>
<div id="dibu"></div>
</body>
</html>
<script>

  // 获取转盘外层的对象
let pieObj = document.getElementsByClassName('pie')[0]
var btnObjs = document.getElementsByTagName('button');
var flag = true
var timer
btnObjs[0].onclick = function(){
    toggleSound()
    if(flag){
        console.log('进入定时器设置')
        let jiaodu = 0;
        timer = setInterval(function(){
            pieObj.style.transform = 'rotate('+jiaodu+'deg)'
            jiaodu +=3
        },0)
        flag = false

        btnObjs[0].innerHTML = '停止'
    }else{
      console.log('清楚定时器设置')
      document.getElementById('yanhua').style.display = 'block';
      clearInterval(timer)
      setTimeout(function(){
        document.getElementById('yanhua').style.display  = 'none';
      },2000)
      flag = true
      btnObjs[0].innerHTML = '开始'

    }
   
}
// 动态设置转盘的份数
function setNumber(showText){
  number = showText.length
  tmpString = ''
  for(let i = 1; i<=number;i++){
      let newObj = document.createElement('li')
      newObj.className = 'slice-'+i+' slice'
      pieObj.appendChild(newObj)

      var m = document.getElementsByClassName('slice-'+i)[0]
      m.style.transform = 'rotate(-'+(360/number)*i+'deg) skewY(-'+(90-360/number)+'deg)';
      var tmpText = document.createElement('span');
      tmpText.style.display = 'block';
      var num= 90-360/number
      tmpText.style.transform ='skewY('+num+'deg)'
      
      tmpText.innerHTML = showText[i-1]
      m.appendChild(tmpText)
    
      rVal = Math.round(Math.random()*255)
      gVal = Math.round(Math.random()*255)
      bVal = Math.round(Math.random()*255)

      newObj.style.background = 'rgb('+rVal+','+gVal+','+bVal+')' 
     
  }
  // 随机产生number份颜色
}
// 设置显示的文字
showText = ['购物车清空3个','收拾家务','做家务','奶茶一杯','捶背2次','做一次饭','买一箱牛奶','送一束花','写作业','玩游戏']
setNumber(showText)

function toggleSound() {
    var music = document.getElementById("vd");//获取ID  
    var music2 = document.getElementById("vdstop")
    if (music.paused) { //判读是否播放  
        music.paused=false;
        music.play(); //没有就播放 
        music2.pause()
       
    }else{
       music.pause() 
       music2.play()
      
    }
}

</script>