抽奖.html(网上收集8)-阿里云开发者社区

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>在线抽奖 随机选取 自动挑选</title>
    <script src="https://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
    <style>
        body {
            background-color:aliceblue;
        }
        .wrapDiv {
            width:80%;
            max-width:1200px;
            margin:0 auto;
            text-align:center;
            position:absolute;
            top:80px;
            left:0;
            right:0;
        }
        .leftBox {
            float:left;
            width:800px;
            height:240px;
            /*background-color:aqua;
            */
            margin:0 auto;
            margin-top:0px;
            clear:both;
        }
        #span {
            float:right;
            top:30px;
            right:185px;
        }
        #btn {
            float:left;
            width:100px;
            height:30px;
            margin-left:10px;
            margin-top:150px;
        }
        .nameBox {
            width:100px;
            height:30px;
            float:left;
            background-color:antiquewhite;
            margin-left:10px;
            margin-top:10px;
            text-align:center;
            line-height:30px;
        }
        .selectedName {
            float:right;
            width:340px;
            background:#666;
            margin-top:10px;
            margin-left:30px;
            background:#ffffff;
            overflow:hidden;
        }
        h1 {
            text-align:center;
        }
    </style>
</head>
<body>
<h1>随机抽奖系统</h1>
<span id="span"></span>
 
<div class="wrapDiv">
    <div id="leftBox" class="leftBox"></div>
    <div id="selectedName" class="selectedName">
        <h1>中奖者名单</h1>
    </div>
 
    <input type="button" id="btn" value="开始走起">
</div>
 
<script>
    // 模拟后台数据
    var arr = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10",
        "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21",
        "22", "22", "23", "24", "25", "26", "27", "28", "29", "30",
    ];
 
    var orgArrCount = arr.length;
    var currentSelectNum = 0;
 
    initForm();
 
    // 初始化表单
    function initForm() {
        // 动态设置选择人的高度
        var selectedNameHeight = orgArrCount / 3 * 40 + 120;
        $("#selectedName").css("height", selectedNameHeight + "px");
        // 动态创建图层
        dynamicCreateBox();
    }
 
    // 动态创建层
    function dynamicCreateBox() {
        for (var i = 0; i < arr.length; i++) {
            var div = document.createElement("div");
            div.innerText = arr[i];
            div.className = "nameBox";
            $("#leftBox").append(div);
        };
    }
 
    // 清空小方格颜色
    function clearBoxColor() {
        $("#leftBox").children("div").each(function() {
            $(this).css("background-color", "");
        });
    }
 
    // 设置选中小方格颜色
    function setBoxColor() {
        $("#leftBox").children("div").each(function() {
            var thisText = ($(this).text());
            var selectedName = arr[currentSelectNum];
 
            if (thisText == selectedName) {
                $(this).css("background-color", "red");
            }
        });
    }
 
    function appendSelectedName() {
        var div = document.createElement("div");
        div.innerText = arr[currentSelectNum];
        div.className = "nameBox";
        $("#selectedName").append(div);
    }
 
    $('#btn').click(function() {
        var curentCount = arr.length;
        if (curentCount < 1) {
            alert("没有可选人了");
            // 清空所有层的颜色
            clearBoxColor();
            return;
        }
        // 监视按钮的状态
        if (this.value === "开始走起") {
            // 定时针
            timeId = setInterval(function() {
                // 清空所有层的颜色
                clearBoxColor();
 
                //随机生成一个数
                var num = Math.floor(Math.random() * curentCount);
                currentSelectNum = num;
 
                // 设置选中小方格颜色
                setBoxColor();
            }, 10);
            this.value = "停止";
        } else {
            // 清除计时器
            clearInterval(timeId);
 
            // 添加选中人
            appendSelectedName();
 
            // 移除
            arr.splice(currentSelectNum, 1);
            this.value = "开始走起";
        }
    });
 
    // 获取时间的函数
    getTime();
    setInterval(getTime, 10)
 
    function getTime() {
        var day = new Date();
        var year = day.getFullYear(); //年
        var month = day.getMonth() + 1; //月
        var dat = day.getDate(); //日
        var hour = day.getHours(); //小时
        var minitue = day.getMinutes(); //分钟
        var second = day.getSeconds(); //秒
        month = month < 10 ? "0" + month : month;
        dat = dat < 10 ? "0" + dat : dat;
        hour = hour < 10 ? "0" + hour : hour;
        minitue = minitue < 10 ? "0" + minitue : minitue;
        second = second < 10 ? "0" + second : second;
        $("#span").innerText = year + "-" + month + "-" + dat + " " + hour + ":" + minitue + ":" + second
    }
</script>
 
</body>
</html>

 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>html随机抽奖</title>
    <script src="https://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style>
        .content {
            width:456px;
            margin:0 auto;
            text-align:center;
            font-weight:800;
        }
        .kuai {
            width:150px;
            height:150px;
            float:left;
            line-height:150px;
            border:1px solid #666;
        }
        .button {
            width:456px;
            margin:0 auto;
            text-align:center;
        }
        .choujiang {
            border:none;
            color:#fff;
            background-color:#5cb85c;
            border-radius:4px;
            font-size:20px;
            color:#fff;
            padding:5px 20px;
            margin-top:20px;
            cursor:pointer;
        }
        .choujiang:hover {
            background-color:red;
        }
    </style>
</head>
<body>
<div class="content">
 
</div>
<div class="button">
    <button type="button" class="choujiang">抽奖</button>
</div>
 
<script>
    //请在此段代码前引用jq,否则代码无效
    $(document).ready(function() {
        var name = ['飞机', '大炮', '火箭', '游艇', '电脑', '键盘', '鼠标', '谢谢参与', '三年模拟两年高考']
        for (var i = 1; i <= name.length; i++) {
            $(".content").append('<div id="' + i + '" class="kuai">' + name[i - 1] + '</div>');
        }
        $('.choujiang').on('click', function() {
            $(this).attr("disabled", true); //点击按钮后,按钮进入不可编辑状态
            var sum = name.length;
            var le = 3 //设置滚动多轮
            var hh = sum * le;
            var y = 1;
            var x = hh;
            var times = 12; //调节滚动速度
            var rand = parseInt(Math.random() * (x - y + 1) + y); //获取随机数
            var i = Math.ceil(rand / sum); //向上取整
            for (var i = i; i < le; i++) {
                rand = rand + sum
            }
            time(1, rand, times, sum, times) //点击按钮后触发time事件
        })
    });
 
    function time(shu, sums, tie, sum, tis) { //倒计时
        var tie = tie + tis //滚动速度
        setTimeout(function() {
            if (shu <= sums) {
                $('.kuai').css({
                    'background-color': '',
                    'color': ''
                }) //清除css
                $('#' + shu + '').css({
                    'background-color': 'aqua',
                    'color': '#fff'
                }) //添加css样式
                if (shu == sum) {
                    sums = sums - shu
                    shu = 0;
                }
                shu++
                text(shu, sums, tie, sum, tis)
            } else {
                $('.choujiang').attr("disabled", false); //抽奖完毕,按钮重新进入可编辑状态
            }
        }, tie);
    }
 
    function text(shu, sums, tie, sum, tis) {
        time(shu, sums, tie, sum, tis) //执行time事件
    }
</script>
 
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随机点菜名</title>
    <style>
        /* 初始化页面，清除所有元素的内外边距 */
        * {
            padding: 0;
            margin: 0;
            /* 设置背景颜色为414141 */
            background-color: #414141;
        }
 
        /* 盒子居中 */
        div {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
 
        /* 使用上期视频的文字渐变效果，再加一点点文字阴影 */
        span, h2 {
            text-shadow: 0 0 10px #dfd8d8;
            background: linear-gradient(135deg, #14ffe9, #ffeb3b, #ff00e0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            animation: ff 0.9s linear infinite;
        }
 
        @keyframes ff {
            to {
                filter: hue-rotate(360deg);
            }
        }
 
        /* 设置一下字体大小 */
        h2 {
            font-size: 72px;
        }
 
        span {
            font-size: 46px;
        }
 
 
        /* 按钮居中 */
        button {
            position: absolute;
            top: 70%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 25px;
            box-shadow: 0 0 10px #fff;
            /* 取消轮廓线 */
            outline: none;
            background-color: gray;
        }
    </style>
</head>
<body>
<div>
    <h2>随机点菜名</h2>
    <span id="name"></span>
</div>
<p/><button id="button_text">stop</button>
 
 
 
<script>
    // 获取标签
    let nametxt = document.getElementById('name');
    let button = document.getElementById('button_text');
    // 创建一个数组存储名字
    let uname = ['阿阳热爱前端', '郝嘉慧', '冬灰条', '蒸羊羔儿', '蒸熊掌', '蒸鹿尾儿',
        '烧花鸭', '烧雏鸡', '烧子鹅', '炉猪', '炉鸭', '酱鸡', '腊肉', '松花',
        '小肚儿', '晾肉', '香肠儿', '什锦苏盘儿', '熏鸡白肚儿', '清蒸八宝猪',
        '江米酿鸭子', '罐儿野鸡', '罐儿鹌鹑', '卤什件儿', '卤子鹅', '山鸡', '兔脯',
        '菜蟒', '银鱼', '清蒸哈什蚂', '烩鸭腰儿', '鸭条', '清拌腰丝儿', '黄心管儿'];
 
    // 创建一个函数生成随机数字
    function getrandom(min, max) {
        return Math.floor(Math.random() * (max - min - 1) + min);
    }
 
    function clock() {
        // 通过获取一个随机的数组下标实现随机获取一个名字，并将这个名字赋值给变量random
        let random = uname[getrandom(0, uname.length - 1)];
        //将random塞到span里
        nametxt.innerHTML = random;
    };
    // 打印名字已经实现了，下一步让没点击按钮前名字一直刷新
    // 设置不停止时名字的刷新速度为30毫秒
    let time = self.setInterval("clock()", 30);
    // 将开始与停止按钮绑定到按钮上，并通过按钮控制
    let flag = false;
    button.onclick = function () {
        // 当flag标志为false时，点击按钮让刷新停止；
        if (flag == false) {
            time = window.clearInterval(time);
            // 按钮文字从stop变为start；
            button.innerHTML = 'start';
            // 标志变更
            flag = true;
        } else {
            // 当flag标志为true时，开始刷新，文字变更
            time = self.setInterval("clock()", 30);
            button.innerHTML = 'stop';
            flag = false;
        }
    }
</script>
</body>
</html>

抽奖.html(网上收集8)

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

抽奖.html(网上收集8)

热门文章

最新文章

相关课程

相关电子书

相关实验场景