基于js的抽奖

最新推荐文章于 2024-03-19 12:11:00 发布
最新推荐文章于 2024-03-19 12:11:00 发布
阅读量4k 收藏 16
点赞数 7
分类专栏： web 文章标签： 九宫格抽奖代码 js应用 抽奖原理
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41534115/article/details/82619834
版权

抽奖活动的原理还是很简单的，通过代码一目了然，如果看不懂就私聊我，可以私下交流！

方法一：使用table写一个随机抽奖

这是html+js代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/test2.css">
    <title>抽奖</title>
</head>

<body>
    <div class="content">
        <div class="top">
            抽奖活动
        </div>
        <div class="body">
            <table>
                <tr>
                    <th>百度</th>
                    <th>腾讯</th>
                    <th>阿里</th>
                    <th>京东</th>
                    <th>华为</th>
                </tr>
                <tr>
                    <th>滴滴</th>
                    <th>蚂蚁金服</th>
                    <th>乐视</th>
                    <th>中国电网</th>
                    <th>中石化</th>
                </tr>
                <tr>
                    <th>美团</th>
                    <th>乐视</th>
                    <th>小米</th>
                    <th>网易</th>
                    <th>酷我</th>
                </tr>
                <tr>
                    <th>爱奇艺</th>
                    <th>盛大</th>
                    <th>短文学</th>
                    <th>浅墨诗韵</th>
                    <th>浪子一秋</th>
                </tr>
            </table>
        </div>
        <div class="bottom">
            <input type="button" name="" id="button" class="button" value="开始" onclick="toStart(this)">
        </div>
    </div>
</body>
<script type="text/javascript">
    var timer;
    var button = document.querySelector("#button");
    function toStart() {
        // 启动定时器
        if (timer == undefined) {
            timer = setInterval(changeStyle, 100);
            button.setAttribute("value", "停止");
        } else {
            clearInterval(timer);
            timer = undefined;
            button.setAttribute("value", "开始");
        }
    }
    // 改变样式
    var a, b;
    function changeStyle() {
        var tb = document.querySelector("table");
        console.log(a);
        if (a != undefined) {
            tb.rows[a].cells[b].style.backgroundColor = "white";
        }
        // 
        // 获取要操作的元素
        a = parseInt(Math.random() * 4);
        b = parseInt(Math.random() * 5);
        // console.log(a);
        var col = tb.rows[a].cells[b];
        col.style.backgroundColor = "red";
    }


</script>

</html>

方法二：使用span标签写

html+js代码如下

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="css/test2.css">
    <title>抽奖</title>
</head>

<body>
    <div class="content">
        <div class="top">
            抽奖活动
        </div>
        <div class="body" id="body">

        </div>
        <div class="bottom">
            <input type="button" name="" id="button" class="button" value="开始" onclick="toStart()">
        </div>
    </div>
</body>
<script type="text/javascript">
    // 获取要操作的元素
    var div = document.getElementById("body");
    // 动态添加span
    for (var i = 0; i < 25; i++) {
        // 创建一个新的标签
        var el = document.createElement("span");
        // 给标签设置内容
        el.innerText = i;
        // 添加子元素
        div.appendChild(el);
    }

    var timer;
    var button = document.querySelector("#button");
    function toStart() {
        // 启动定时器
        if (timer == undefined) {
            timer = setInterval(changeStyle, 100);
            button.setAttribute("value", "停止");
        } else {
            clearInterval(timer);
            timer = undefined;
            button.setAttribute("value", "开始");
        }
    }
    // 改变样式
    var selection;
    function changeStyle() {
        var spans = document.getElementsByTagName("span");
        if (selection != undefined) {
            console.log(selection);
            spans[selection].style.backgroundColor = "white";
        }
        selection = parseInt(Math.random() * 25);
        var spans = document.getElementsByTagName("span");
        var selectSpan = spans[selection];
        selectSpan.style.backgroundColor = "red";
    }

</script>

</html>

两个页面的css代码

*{
    margin: 0;
    padding: 0;
}
body{
    display: block;
}
.content{
    width: 500px;
    margin: auto;
}
.top{
    text-align: center;
    height: 50px;
    color: red;
    font-size: 30px;

}
table{
    width: 100%;
    border: 1px solid red;
    border-spacing: 0;
}
th{
    border: 1px dashed rgb(189, 189, 86);
    height: 40px;
}
.bottom{
    height: 50px;
    margin-top: 20px;
    text-align: center;
}
.button{
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}


/* test2-1 */
.body{
    width: 512px;
    height: 260px;
    border: 1px solid red;
}
span{
    display: inline-block;
    width: 100px;
    height: 50px;
    border: 1px dashed #b1da1f;
    line-height: 50px;
    text-align: center;
}

 

浪子一秋
关注
  • 7
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js实现年会现场幸运观众抽奖系统源码下载
11-03
js实现年会现场幸运观众抽奖系统源码下载 js实现年会现场幸运观众抽奖系统源码下载
面向初学者JS和HTML实现的抽奖程序
共同学习、强我国家
08-21 1304
1.定义一个数组，里面存储不同的奖品。2.定义一个函数，用于生成随机数来表示抽中的奖品。3.定义一个按钮，点击按钮触发抽奖函数。4.利用DOM操作，将随机抽中的奖品输出到网页中。）并向下取整，来生成0~5之间的随机整数，以表示抽中了哪个奖品。函数返回一个[0, 1)之间的随机数。数组的长度为6，因此需要将随机数乘以6（即。
HTML5 网页端年会抽奖源码，导入名单列表即可使用，2024金三银四
最新发布
m0_60388261的博客
03-19 954
0、index.html: 主入口，lucky-draw.html 为抽奖页面。1、关闭窗口、刷新网页都不会清空用户名单、中奖名单、奖项配置，所以误操作也没事，可以重新直接进入抽奖页继续操作，流程保持不变。2、必须手动在主页 index.html 中点击清空数据，才会清理用户名单、中奖名单、奖项配置等所有配置，相当于重置，否则在同一浏览器中会一直保留。3、支持 .xlsx、.xls、.csv 文件格式上传4、支持自定义奖项模式、默认抽奖模式5、已经中过奖的人不会重复中奖。
JS实现2种常见的抽奖效果
weixin_44646763的博客
06-19 2641
JS实现2种常见的抽奖效果，转盘抽奖 和 宫格抽奖
HTML实现转盘抽奖的简单通用模板
z2141830440的博客
11-29 1663
基本需求分析有一个由九个小正方形组成的大正方形，类似与一个3*3的矩阵，其中，最中间的小正方形颜色不同用于区分。为了实现抽奖的效果，我将外层的八个小正方形作为我的抽奖格，其中八个抽奖格中应该有一个格子的颜色不同于其他七个格子，用来表示当前抽中的物品，每次打开网页时，这个物品的位置应该是随机的当我开始抽奖时，这个被抽中的物品的颜色就会变成和其他七个格子的颜色一样，它相邻的一个格子的颜色则变为它原本的颜色就这样不停的变换，达到一个类似“动态”的效果，最后随机停在某个格子后就不再变换，表示为抽中的物品。
html实现酷炫的公司年会抽奖(附源码)
xcLeigh
01-11 1万+
html实现酷炫公司年会抽奖，可以直接配置员工信息然后使用的，实现动态配置员工信息，实现员工只能中一次奖，实现奖品可灵活配置，实现样式灵活调整，实现抽奖酷炫音效，并且有多种震撼音效可选，可以直接运行index.html使用。
基于JavaScript实现抽奖系统
10-18
主要为大家详细介绍了基于JavaScript实现抽奖系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于javascript实现简单的抽奖系统
10-22
主要为大家详细介绍了基于javascript实现简单的抽奖系统，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
基于js_javascript年会抽奖程序
12-27
实现滚动数字和音效的抽奖。 目前只有IE8上测试过，完好。 借鉴了互联网上的思想。 开源免费。亲们可以下载。
基于JavaScript实现幸运抽奖页面
10-18
主要为大家详细介绍了基于JavaScript实现幸运抽奖页面，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
用Javascript实现随机抽奖
StartQi的博客
09-06 4552
用Javascript*实现随机抽奖 思路：首先我们先把一组元素保存到数组arr中，再利用**随机生成的整数**和**数组下标**关联起来，这里的重点就是怎样获取随机的整数，下面跟着我一起来看看。
html简单随机抽奖页面（在线抽奖、随机选取、自动挑选）
热门推荐
杨明金的博客
07-19 10万+
效果： 代码： <!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:al
html+css+js写抽奖程序
jakelihua
01-10 2188
简介：本文讲解，如何使用html+css+js写抽奖程序，后面也会加上后端，记录每一次的抽奖的结果。
【JS案例】JS实现积分抽奖(内附源码)
Ghmin的博客
09-01 1060
JS实现积分抽奖(内附源码)
原生js完成一个简单的抽奖功能
提灯寻猫
12-18 2764
用原生js的方式完成简单的抽奖功能
js抽奖代码
weixin_51237312的博客
03-28 513
【代码】js抽奖代码。
html5实现最高端的公司年会抽奖（源码）
xcLeigh
12-23 2926
html5实现最高端的公司年会抽奖（源码），抽奖平台源码，可以直接配置员工信息然后使用的，实现动态配置员工信息，实现员工只能中一次奖，实现奖品可灵活配置，奖项分为特等奖、一等奖、二等奖、三等奖，也可以自己定义奖项，实现样式灵活调整，实现抽奖酷炫音效，并且有多种震撼音效可选，可以直接运index.html使用。
【案例篇5】HTML+CSS+JS实现九宫格转盘抽奖（源码）
风中追风
02-17 2414
随着前端技术的不断发展与进步，界面交互的样式要求和美感也越来越高，很多网页的交互都加上了css动画,这里作者给大家分享一个前端开发必掌握的九宫格转盘抽奖，赶紧学起来吧，直接拿到直接自己系统中抽奖使用，简单又实用。
html 挺帅抽奖的效果
hejias的专栏
02-15 689
其中，指定中奖人 lottery.times==lottery.cycle（第90行） <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable"/> <meta.
基于Javascript制作一个抽奖网页
04-05
但是，我可以提供一些基于Javascript制作抽奖网页的基本思路和步骤： 1. 设计抽奖页面的布局和样式，包括奖品展示区域、抽奖按钮、中奖提示等。 2. 定义奖品数组，包含每个奖品的名称、概率、图片等信息。 3. ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值