JavaScript实现的转盘抽奖html页面前端源码

大家好，今天给大家介绍一款，JavaScript实现的转盘抽奖html页面前端源码 （图1）。送给大家哦，获取方式在本文末尾。

图1

点击中间的开始按钮，就可以转动转盘（图2）

图2

源码完整，需要的朋友可以下载学习（图3）

图3

本源码编码：10165，需要的朋友，点击下面的链接后，搜索10165，即可获取。

源码获取方式https://blog.csdn.net/mazai5080/article/details/124655320

 

var oliList = document.getElementsByTagName("li");
var oman = document.getElementById("man");
var obtnYes = document.getElementById("btnYes");
var oUl = document.getElementById("vip");




var names = ["一等奖", "二等奖", "三等奖", "四等奖", "五等奖", "6等奖", "7等奖", "8等奖", "9等奖", "10等奖",
             "11等奖", "12等奖", "13等奖", "14等奖", "15等奖", "16等奖", "17等奖", "18等奖", "19等奖", "20等奖",
            ];



var t = 0;


//格式
function place() {
    for (var i = 0; i < 20; i++) {
        t = i * (360 / 20) + "deg";  // 18
        oliList[i].innerHTML = names[i];

        oliList[i].style.transform = "rotate(" + t + ") translate(360px)";
        oliList[i].style.borderLeft = '1px solid #FFFFFF'

        // var oSpan = document.createElement("span");
        // oSpan.innerHTML = "VIP!";
        // oSpan.style.color = "#ac112c"
        // oSpan.style.cursor = "pointer";
        // oSpan.style.textAlign = "lift";
        // oliList[i].appendChild(oSpan);

    }

}
place();
//随机度数
function fun() {
    var num = Math.round((Math.random() * 20));
    return num * (360 / 20) + 180;
}
//旋转事件
var myDeg = 0;
obtnYes.onmousedown = function() {
    myDeg = myDeg + fun();
    let odds
    odds = 360 - (myDeg % 360)
    oman.style.transitionDuration = "3s";
    obtnYes.style.boxShadow = "none";
    console.log(odds);
    oman.style.transform = "rotateZ(" + myDeg + "deg)";
}
obtnYes.onclick = function() {
    btnYes.style.boxShadow = "2px 2px 5px black";
}

 本源码编码：10165，需要的朋友，点击下面的链接后，搜索10165，即可获取。

源码获取方式https://blog.csdn.net/mazai5080/article/details/124655320