css+js转盘点名器-CSDN博客

本文链接：https://blog.csdn.net/Wzc0720/article/details/130273613

布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>转盘点名游戏</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <ul id="man">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <button id="btnYes">开始</button>
    <img id="img1" src="img/timg.png" alt="">
    <img id="img2" src="img/1.png" alt="">
    

</body>

</html>
<script src="index.js">
</script>

css样式

* {
    padding: 0;
    margin: 0;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: linear-gradient(to bottom, #171717, #494e73, #4e7290, #262f46);
}

#man {
    width: 1000px;
    height: 1000px;
    list-style: none;
    border-radius: 50%;
    background: radial-gradient(#17aacf, #1de749, #bfff0e);
    position: absolute;
    top: -150px;
    left: -300px;
    box-shadow: 0px 0px 20px indigo;
}

#man li {
    position: absolute;
    width: 120px;
    height: 30px;
    top: 50%;
    left: 50%;
    font-size: 16px;
    transform-origin: left top;
    text-align: center;
}

#btnYes {
    position: absolute;
    display: block;
    right: 25%;
    top: 340px;
    width: 100px;
    height: 100px;
    background-color: rgb(0, 255, 213);
    text-align: center;
    border: none;
    outline: none;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 2px 2px 5px black;
}

#img1 {
    position: absolute;
    width: 360px;
    height: 40px;
    top: 345px;
    left: 220px;
}

#img2 {
    position: absolute;
    width: 150px;
    height: 150px;
    left: 140px;
    margin-top: 18%;
    border-radius: 50%;
    animation: img3move 1s infinite linear;
    transform-origin: center center;
}



@keyframes img3move {
    0% {
        top: 50px;
        width: 150px;
    }

    25% {
        top: 70px;
        width: 170px;
    }

    50% {
        top: 90px;
        width: 190px;
        box-shadow: 0px 10px 10px black;
    }

    75% {
        top: 70px;
        width: 170px;
    }

    100% {
        top: 50px;
        width: 150px;
    }
}

js

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

var names = ["王志闯", "吕振杰", "李浩宇",
             "李宗洋", "李锦鸣", "王源林",
             "王振宇", "周凯", "常子健",
             "陈亚曼", "崔梦玉", "高秀芳",
             "谷俊磊", "李绪", "李正杨", "刘艳芳", 
             "邱晓宇", "沈向阳", "孙奥权", 
             "王雯玄", "王振华", "魏亓棣", 
             "郗燕栋", "张泽同", "葛媛媛", 
             "郝庆威", "岳秀鑫", "张宇航", 
             "王志闯", "吕振杰", "李浩宇",
             "李宗洋", "李锦鸣", "王源林",
             "王振宇", "周凯", "常子健",
             "陈亚曼", "崔梦玉", "高秀芳", 
             "谷俊磊", "李绪", "李正杨", "刘艳芳", 
             "邱晓宇", "沈向阳", "孙奥权",
             "王雯玄", "王振华", "魏亓棣", 
             "郗燕栋", "张泽同", "葛媛媛", 
             "郝庆威", "岳秀鑫", "张宇航", 
        ];



var t = 0;

function place() {
    for (var i = 0; i < 56; i++) {
        t = i * (360 / 56) + "deg";
        oliList[i].innerHTML = names[i];
        oliList[i].style.transform = "rotate(" + t + ") translate(360px)";

        var oSpan = document.createElement("span");
        oSpan.innerHTML = "  幸运星！";
        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() * 56));
    return num * (360 / 56) + 180;
}

var myDeg = 0;
obtnYes.onmousedown = function() {
    myDeg = myDeg + fun();
    oman.style.transitionDuration = "3s";
    obtnYes.style.boxShadow = "none";
    console.log(myDeg);
    oman.style.transform = "rotateZ(" + myDeg + "deg)";
}
obtnYes.onclick = function() {
    btnYes.style.boxShadow = "2px 2px 5px black";
}