JavaScript之抽奖转盘-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>

<body>
</body>
<script type="text/javascript">
    body_ = document.getElementsByTagName("body");

    var mainDiv = document.createElement("div");
    mainDiv.style.position = "relative";
    body_[0].appendChild(mainDiv);

    var top_ = document.createElement("div"); //画出圆盘
    top_.style.width = "400px";
    top_.style.height = "400px";
    top_.style.border = "1px solid black";
    top_.style.background = "rgb(0,146,210)";
    top_.style.borderRadius = "200px";
    top_.style.position = "relative";
    mainDiv.appendChild(top_);

    for(var i = 0; i < 30; i++) {
        var top1 = document.createElement("div");
        top1.style.width = "198px";
        top1.style.border = "1px solid black";
        top1.style.position = "absolute";
        top1.style.top = "199px";
        top1.style.left = "0px";
        top1.style.transformOrigin = "100% 50%";
        top_.appendChild(top1);
        //将圆盘分成七份
        switch(i) {
            case 3:
                top1.style.transform = "rotate(" + 12 * i + "deg)";
                break;
            case 9:
                top1.style.transform = "rotate(" + 12 * i + "deg)";
                break;
            case 12:
                top1.style.transform = "rotate(" + 12 * i + "deg)";
                break;
            case 18:
                top1.style.transform = "rotate(" + 12 * i + "deg)";
                break;
            case 22:
                top1.style.transform = "rotate(" + 12 * i + "deg)";
                break;
            case 26:
                top1.style.transform = "rotate(" + 12 * i + "deg)";
                break;
            default:
        }
    }
    //每份的奖项
    for(var j = 0; j < 30; j++) {
        var box = document.createElement("div");
        box.style.width = "198px";
        box.style.height = "30px";
        box.style.position = "absolute";
        box.style.top = "199px";
        box.style.left = "0px";
        box.style.fontSize = "20px";
        box.style.textAlign = "center";
        box.style.color = "green";
        box.style.transformOrigin = "100% 50%";
        top_.appendChild(box);
        switch(j) {
            case 2:
                box.style.transform = "rotate(" + 12 * j + "deg)";
                box.innerHTML = "三等奖";
                break;
            case 6:
                box.style.transform = "rotate(" + 12 * j + "deg)";
                box.innerHTML = "谢谢参与";
                break;
            case 10:
                box.style.transform = "rotate(" + 12 * j + "deg)";
                box.innerHTML = "一等奖";
                break;
            case 14:
                box.style.transform = "rotate(" + 12 * j + "deg)";
                box.innerHTML = "幸运奖";
                break;
            case 20:
                box.style.transform = "rotate(" + 12 * j + "deg)";
                box.innerHTML = "三等奖";
                break;
            case 24:
                box.style.transform = "rotate(" + 12 * j + "deg)";
                box.innerHTML = "谢谢参与";
                break;
            case 28:
                box.style.transform = "rotate(" + 12 * j + "deg)";
                box.innerHTML = "二等奖";
                break;
            default:
        }

    }
    //开始按钮
    var top2 = document.createElement("div");
    top2.style.width = "100px";
    top2.style.height = "100px";
    top2.style.background = "red";
    top2.style.borderRadius = "200px";
    top2.style.color = "white";
    top2.innerHTML = "开始";
    top2.style.textAlign = "center";
    top2.style.lineHeight = "100px";
    top2.style.position = "absolute";
    top2.style.top = "150px";
    top2.style.left = "150px";
    top2.onclick = jfy;
    mainDiv.appendChild(top2);
    //指针
    var box = document.createElement("div");
    box.style.borderTop = "10px solid transparent";
    box.style.borderBottom = "10px solid transparent";
    box.style.borderLeft = "90px solid transparent";
    box.style.borderRight = "90px solid red";
    box.style.position = "absolute";
    box.style.top = "41px";
    box.style.left = "-177px";
    top2.appendChild(box);

    function jfy() {
        var a = parseInt(Math.random() * 360 + 720);
        top_.style.transform = "rotate(" + a + "deg)";
        top_.style.transition = "6s";
        var a = a % 360;
        setTimeout(function() {
            if(a >= 0 && a < 36) {
                alert("二等奖：相机一部");
            } else if(a >= 36 && a < 108) {
                alert("谢谢参与");
            } else if(a >= 108 && a < 144) {
                alert("三等奖：皮包");
            } else if(a >= 144 && a < 216) {
                alert("幸运奖：杯子");
            } else if(a >= 216 && a < 264) {
                alert("一等奖:鸭梨手机一部");
            } else if(a >= 264 && a < 312) {
                alert("谢谢参与");
            } else if(a >= 312 && a < 360) {
                alert("三等奖：围巾");
            }
            jj();
        }, 6000);
    }

    function jj() {
        top_.style.transform = "rotate(0deg)";
    }
</script>
</html>