手把手教你做抽奖转盘（自定义alert()弹出框）

最新推荐文章于 2024-08-23 09:23:35 发布

置顶

最骚的就是你

最新推荐文章于 2024-08-23 09:23:35 发布

阅读量1w

点赞数

分类专栏： web前端学习文章标签：转盘抽奖 alert

本文链接：https://blog.csdn.net/libin_1/article/details/51490905

版权

本文将详细讲解如何创建一个抽奖转盘，并利用自定义的alert弹出框显示中奖信息。从UI设计到JavaScript逻辑实现，一步步教你打造个性化的抽奖功能。

摘要由CSDN通过智能技术生成

这里写图片描述

<!DOCTYPE html>
<html lang="zh-cn">

    <head>
        <meta charset="UTF-8">
        <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
        <title>转盘抽奖</title>
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
        <style type="text/css">
            * {
                padding: 0px;
                margin: 0px;
                font-size: 16px;
                font-family: "Microsoft YaHei";
            }

            .turnplate_box {
                width: 300px;
                height: 300px;
                margin: 100px auto;
                position: relative;
                border: 1px solid red;
            }

            .turnplate_box canvas {
                position: absolute;
                border: 1px solid yellow;
            }

            #myCanvas {
                background-color: white;
                border-radius: 100%;
            }

            #myCanvas01,
            #myCanvas03 {
                left: 50px;
                top: 50px;
                z-index: 30;

            }

            #myCanvas02 {
                left: 75px;
                top: 75px;
                z-index: 20; 
            }

            #myCanvas {
                -o-transform: transform 6s;
                -ms-transform: transform 6s;
                -moz-transform: transform 6s;
                -webkit-transform: transform 6s;
                transition: transform 6s;
                -o-transform-origin: 50% 50%;
                -ms-transform-origin: 50% 50%;
                -moz-transform-origin: 50% 50%;
                -webkit-transform-