js制作随机抽奖，（指定数字范围内随机出现一个数字）

已于 2022-05-30 07:58:31 修改
阅读量3.9k 收藏 13
点赞数 9
分类专栏： 乱七八糟 文章标签： js 随机数 抽奖 抽奖系统 js小案例
于 2021-03-26 21:22:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45549336/article/details/115255581
版权

转载请注明出处，原文链接https://blog.csdn.net/qq_45549336/article/details/115255581?spm=1001.2014.3001.5501在这里插入图片描述
在这里插入图片描述

<html>

<head>
        
    <meta charset="UTF-8">
        <title>抽奖</title>
        <style type="text/css">
        body {
            background-color:#130f40;
            font-size: 70px;
            text-align: center;
            margin: 0;
            padding: 0;
        }

        .start-button {
            width: 270px;
            height: 40px;
            border-width: 0px;
            border-radius: 3px;
            background: #1E90FF;
            cursor: pointer;
            outline: none;
            font-family: Microsoft YaHei;
            color: white;
            font-size: 17px;
           
        }

        .start-button:hover {
            /* 鼠标移入按钮范围时改变颜色 */
            background: #5599FF;
        }
    </style>
     
    <script type="text/javascript">
        var run = false;
        function count() {
            num.innerHTML = parseInt(Math.random() * 100);
        }
        function a() {
            if (true == run) {
                clearInterval(timerID);
                start.value = "开始";
                run = false;
            } else if (false == run) {
                timerID = setInterval("count()", 10);
                start.value = "暂停";
                run = true;
            }
        }
    </script>
</head>

<body>
    <div style="font-size: 250px;">
        <font id="num" face="impact" color="#eb4d4b">100</font>
        <div></div>
        <input class="start-button" type="button" id="start" value="开始抽奖" onclick="a()" />
    </div>

</body>

</html>

转载请注明出处，原文链接https://blog.csdn.net/qq_45549336/article/details/115255581?spm=1001.2014.3001.5501

四阶张量
关注
  • 9
    点赞
  • 踩
  • 13
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
JavaScript实现随机抽奖功能（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-01 815
JavaScript实现随机抽奖功能（附完整源码）
数字翻滚抽奖特效js
12-05
数字翻滚抽奖特效js
JavaScript实现的抽奖效果【数字跳动版】
weixin_30909575的博客
11-04 318
直接上代码吧，效果可以复制了去看 <!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN"><html><head><title></title><metahttp-equiv="Content-Type"content="text/html...
前端JS特效第53波：随机数字抽奖程序中奖结果显示特效代码
最新发布
wangtianming88的专栏
07-25 222
随机数字抽奖程序中奖结果显示特效代码
JavaScript实现随机抽奖代码
爱酷码的博客
12-29 2670
点击开始抽奖，然后设定人员开始不定的改变，直到点击停止为止 代码如下 <div class="div"> <h2>Who?</h2> <img src="cankao/start.jpg" width="100" id="q"> <img src="cankao/end.jpg" width="100" id="p"> </div> </body> <script> var u
用js写随机抽奖代码
weixin_56726579的博客
02-28 944
<!-- 样式 --> <style> .title { width: 300px; height: 50px; background-color: orange; text-align: center; margin: 0 auto; margin-bottom: 20px; line-h.
js实现简易的单数字随机抽奖（0-9）
10-23
在本文中，我们将会探讨如何使用JavaScript来创建一个简易的单数字随机抽奖程序。这个程序允许用户通过点击按钮来启动和停止随机数字的生成过程，数字范围为0到9。实现这一功能需要利用到JavaScript的几个关键知识点...
jquery随机数字抽奖程序特效代码
03-20
在抽奖程序中，开发者可能需要设定一个数字范围，比如1到100，然后生成并显示一个在这个范围内的随机数字作为中奖号码。 接下来是"jQuery特效"部分。jQuery提供了一套丰富的API用于创建动画效果，如淡入淡出、滑动...
js抽奖实现随机抽奖代码效果
10-26
本文将详细介绍一个简单的JS随机抽奖代码，帮助开发者快速实现这一功能。 #### 二、代码分析 ##### 2.1 基本结构 该随机抽奖代码主要包括以下几个部分：HTML结构、JavaScript逻辑处理。 **HTML结构** ```html ...
jquery输入数字随机抽奖特效的简单实现代码
10-22
本次分享的内容是如何使用jQuery实现一个简单的数字随机抽奖特效。 首先，该抽奖特效的主要功能包括两个操作：点击“开始”按钮产生随机数以及点击“停止”按钮显示最终结果。页面布局由三个区域构成，分别显示三个...
javascript 随机抽奖程序代码
10-29
知识点一：JavaScript语言...这些注释对于理解和使用JavaScript随机抽奖程序至关重要，它们指示用户如何操作代码，以便在本地环境中测试和运行。在部署任何Web程序时，提供清晰的用户指南和操作提示是一个好的实践。
js 滚动手机号随机抽奖
01-12
真实有效，如果对各位有效的，请回来给我一个好评，谢谢！
一个炫酷的抽奖系统源码
06-28
一个炫酷的抽奖系统，由于公司最近在搞一个抽奖活动所以就搞了这样一个简单的抽奖系统，也可以作为活跃用户气氛。也可以用来上课签到点名场景，没有任何规则，完全随机产生用户操作
jQuery实现简易数字摇奖程序
03-25
jQuery实现简易数字摇奖程序。 实现思路：首先用random生成一个四位的随机数，转换为字符串并分割返回成数组。利用each()遍历每一个滚动的元素，设置其backgroundPositionY来实现滚动的效果。
随机抽取数字（ 可用于摇号抽奖）
04-10
使用VBA实现。 无需手动修改代码，只需切换到“修改抽取范围”PPT页面，再进行数字修改即可，简单超级好用。 有记录框，可连续抽取多次，有滚动动画，抽奖体验不错。 不过只能抽取数字，如需抽取姓名可选择另一PPT资源。 PS: 仅建议装配Office（非WPS）电脑的用户下载使用 如果是2016版本则更佳
用 javascript 实现随机抽奖 ( 从 1 到 输入值之间任取一个整数值）
weixin_30633405的博客
08-03 238
这个脚本用 javascript 实现随机抽奖 ( 从 1 到 输入值之间任取一个整数值）。 比如输入10， 点击 Start 就会显示从1到10之间的随机整数。 <html> <head> <title>randomnumber.html</title> <script type="text/javascript"> ...
JS:随机数抽奖
weixin_59519449的博客
09-15 444
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <body> <button type="button" id="btn" onclick="Random()">抽奖</button> <div class="wrap"> </di.
js随机抽奖
style201904的博客
05-22 882
随机抽奖 <p>张三</p> <button>点击停止</button> var arr = ['张三','李四','老王','王五','周公']; var pTxt = document.getElementsByTagName('p')[0]; var btn = document.getElementsByTagName('but...
JavaScript实现随机抽奖功能
NXBBC的博客
06-18 3445
可根据学号、姓名等方式实现随机滚动抽奖
用html和js写一个随机抽奖程序
05-25
好的，以下是一个简单的随机抽奖程序的HTML和JS代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>随机抽奖程序</title> </head> <body> <h1>随机抽奖程序</h1> <p>请输入参加抽奖的人员名单，每个名字之间用逗号隔开：</p> <textarea id="nameList"></textarea><br> <button onclick="start()">开始抽奖</button><br><br> <h2 id="result"></h2> <script> function start() { var names = document.getElementById("nameList").value.split(","); var winner = names[Math.floor(Math.random() * names.length)]; document.getElementById("result").innerHTML = "恭喜 " + winner + " 中奖！"; } </script> </body> </html> ``` 首先是一个简单的HTML页面，包含一个输入框用于输入参加抽奖的人员名单，一个按钮用于开始抽奖，以及一个用于显示中奖结果的标题。 在JS代码中，当用户点击“开始抽奖”按钮时，我们首先获取输入框中的名单，使用`split()`方法将其转换为一个数组。然后，我们使用`Math.random()`方法生成一个0到1之间的随机数，乘以名单长度后向下取整，得到一个随机的数组下标，即为中奖者的位置。最后，我们将中奖者的名字显示在页面上。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值