使用JS实现九宫格抽奖功能

简介: 使用JS实现九宫格抽奖功能

话不多说,直接上代码↓

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>九宫格抽奖</title>
        <!-- 初始化 -->
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            /* 添加css样式 */
            .box {
                width: 340px;
                height: 340px;
                position: relative;
                margin: 100px;
            }
            .box div {
                width: 100px;
                height: 100px;
                background-color: aqua;
                text-align: center;
                line-height: 100px;
            }
            .div2 {
                position: absolute;
                top: 10px;
                left: 10px;
            }
            .div3 {
                position: absolute;
                top: 10px;
                left: 120px;
            }
            .div4 {
                position: absolute;
                top: 10px;
                left: 230px;
            }
            .div5 {
                position: absolute;
                top: 120px;
                left: 230px;
            }
            .div6 {
                position: absolute;
                top: 230px;
                left: 230px;
            }
            .div7 {
                position: absolute;
                top: 230px;
                left: 120px;
                rot: 1
            }
            .div8 {
                position: absolute;
                top: 230px;
                left: 10px;
                rot: 95
            }
            .div9 {
                position: absolute;
                top: 120px;
                left: 10px;
            }
            .button {
                width: 100px;
                height: 100px;
                background-color: yellow;
                position: absolute;
                text-align: center;
                line-height: 100px;
                top: 120px;
                left: 120px;
            }
        </style>
    </head>
    <body>
        <!-- 在HTML中用div标签包每个"奖品"并命不同css名,(命不同的css名称,用于给不同的奖品定位到合适位置),再用b标签包"抽奖"按钮(命名为"button"再加上点击事件命名"eve()",最后将所有内容都包在一个大div中(命名为"box) -->
        <div class="box">
            <div class="div2">再来一次</div>
            <div class="div3">再来一次</div>
            <div class="div4">再来一次</div>
            <div class="div5">再来一次</div>
            <div class="div6">再来一次</div>
            <div class="div7">再来一次</div>
            <div class="div8">爱疯14</div>
            <div class="div9">再来一次</div>
            <strong class="button" οnclick="eve()"> 点击抽奖</strong>
        </div>
        <script>
            let button = document.getElementsByClassName('button')[0];
            let box = document.getElementsByClassName('box')[0];
            let div = box.getElementsByTagName('div');
            let k = 0;
            let time = 100;
            let count = 0;
            let int;
            let rom = 0;
            function eve() {
                div[k].style.background = "pink";
                int = setInterval(pu, time)
                rom = Math.floor(Math.random() * div.length);
                button.onclick = null;
            }
            function pu() {
                if (k < div.length - 1) {
                    k++;
                    div[k - 1].style.background = " aqua";
                    div[k].style.background = "pink";
                } else {
                    k = 0;
                    div[div.length - 1].style.background = " aqua";
                    div[k].style.background = "pink";
                    count++;
                }
                if (count > 11 && rom == k) {
                    clearInterval(int);
                    time = 100;
                    button.onclick = eve;
                    let text = div[k].innerHTML;
                    setTimeout(function() {
                        alert("恭喜您获得:" + text);
                    }, 100)
                } else {
                    clearInterval(int);
                    int = setInterval(pu, time)
                }
            }
        </script>
    </body>
</html>


相关文章
|
7天前
|
人工智能 JavaScript 网络安全
ToB项目身份认证AD集成(三完):利用ldap.js实现与windows AD对接实现用户搜索、认证、密码修改等功能 - 以及针对中文转义问题的补丁方法
本文详细介绍了如何使用 `ldapjs` 库在 Node.js 中实现与 Windows AD 的交互,包括用户搜索、身份验证、密码修改和重置等功能。通过创建 `LdapService` 类,提供了与 AD 服务器通信的完整解决方案,同时解决了中文字段在 LDAP 操作中被转义的问题。
|
14天前
|
JavaScript
js学习--九宫格抽奖
js学习--九宫格抽奖
13 2
|
14天前
|
JavaScript
js学习--抽奖
js学习--抽奖
10 1
|
14天前
|
JavaScript 前端开发 API
|
14天前
|
JavaScript API UED
vue.js怎么实现全屏显示功能
【10月更文挑战第7天】
8 1
|
19天前
|
JavaScript 搜索推荐
JS中的模糊查询功能
JS中的模糊查询功能
22 1
|
13天前
|
前端开发 JavaScript
使用 JavaScript 实现图片预览功能
使用 JavaScript 实现图片预览功能
12 0
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
84 2
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的小区物流配送系统附带文章源码部署视频讲解等
105 4
|
4月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的宠物援助平台附带文章源码部署视频讲解等
77 4