Js随机数+限时抽奖

最新推荐文章于 2023-11-01 22:43:43 发布
最新推荐文章于 2023-11-01 22:43:43 发布
阅读量182 收藏 1
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49756833/article/details/116228195
版权
本文通过HTML、CSS和JavaScript实现了一个简单的抽奖效果。利用JavaScript的随机数生成功能，结合定时器，创建了点击开始按钮后随机选择奖项并限时停止的互动体验。在CSS部分，可以根据需求设计奖品展示样式。最终，该抽奖功能适用于前端开发中的互动场景。
摘要由CSDN通过智能技术生成

     下面我用图片和语言文字来完成JS随机数+限时抽奖的效果，我们先看HTML部分。如下：

把css做出最下面图片即可，当然也可以做圆形等等；

这个js的思路就是简单分为三点；

  1. 点击开始，触发一个定时器
  2. 定时器内部，随机一个数，通过这个数来获取  奖品所在的元素
  3. 必须设置一个时间点，停止定时器

把开始按钮和相应的div给获取到，再定义一个值为空值；

再往下如下图已加注释；

最后效果图如下：

最低0.47元/天 解锁文章
雾树
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
一个简单的 JS 抽取随机数源代码
04-13
自己写了一个 JS 抽取随机数的例子。供自己以后参考，也希望可以方便到大家。运行效果图可以去博客页面看：http://blog.csdn.net/defonds/archive/2010/04/13/5480056.aspx。
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实现随机数抽奖
gxm13835177730的博客
05-09 6177
&lt;!DOCTYPE html&gt;&lt;html lang="zh"&gt;&lt;head&gt;&lt;title&gt;幸运抽奖&lt;/title&gt;&lt;script type="text/javascript"&gt; var randNum=Math.random()*100;function testTime(){document.getEl
JavaScript随机抽奖
wendy0818的博客
12-03 612
html> html> head lang="en"> meta charset="UTF-8"> title>随机抽奖title> style> .box{width:600px;height:500px;margin:0 auto;border:dashed #ccc 2px;} button{width:120px;height:40p
js随机抽奖
style201904的博客
05-22 880
随机抽奖 <p>张三</p> <button>点击停止</button> var arr = ['张三','李四','老王','王五','周公']; var pTxt = document.getElementsByTagName('p')[0]; var btn = document.getElementsByTagName('but...
随机数+组合
03-30
在IT行业中，随机数和组合是两个非常重要的概念，它们广泛应用于各种软件开发场景，如游戏编程、模拟仿真、加密算法、数据统计等。在这个特定的案例中，我们看到的"随机数+组合"可能指的是如何在Java程序中生成...
matlab生成随机数+源代码
02-16
在MATLAB中生成随机数是一项常见的任务，广泛应用于模拟、统计分析、机器学习等领域。MATLAB提供了多种函数来生成不同类型的随机数，包括均匀分布、正态分布以及其他各种概率分布的随机数。以下是对MATLAB生成随机数...
JS实现转动随机数抽奖的特效代码
10-23
本文将详细介绍如何使用JavaScript实现一个转动随机数的抽奖特效代码。本代码不仅涉及JavaScript基础知识，还结合了HTML和CSS，用以创建一个具有转动效果的抽奖转盘。 ### JavaScript基础知识点 #### 1. ...
html5+js抽奖大转盘源码
04-17
此外，JavaScript可能还实现了随机数生成算法，以确保每次抽奖结果的随机性。 jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和动画效果等任务。在这个项目中，文件名"jQuery-turntable"暗示了开发者...
MFC 随机数生成器 抽奖器
09-12
在这个特定的项目中，“MFC 随机数生成器 抽奖器”是一个利用MFC构建的程序，其功能是生成指定范围内的随机数，模拟抽奖过程。下面我们将详细讨论相关知识点。 1. **MFC框架**：MFC是微软为Windows平台提供的一个...
js实现随机抽奖
11-21
前言 在前端的开发当中，我们肯定会遇到随机抽奖的需求。我们要怎么去实现呢？下面就来分享随机抽奖的JS代码，有需要的小伙伴可以复制到编译器当中运行查看效果。 随机抽奖的JS代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #wrap { text-align: center; width: 500px; margin: 100px auto; position: relative; } #ul1 { width: 303px;
js实现简易的单数字随机抽奖（0-9）
10-23
主要介绍了js实现简易的单数字0-9随机抽奖，可以控制抽取随机数开始与停止,需要的朋友可以参考下
javascript 随机抽奖程序代码
10-29
javascript 随机抽奖程序代码,主要是利用了js的Math.random方法。需要的朋友可以参考下。
js实现简单随机抽奖的方法
12-04
本文实例讲述了js实现简单随机抽奖的方法。分享给大家供大家参考。具体实现方法如下： 代码如下: <html> <title>js随机抽奖程序</title> <head><meta http-equiv=Content-Type content=”text/html; charset=gb2312″> </head> <body> [removed] var alldata = “a,b,c,d,e,f,g,h,i,j,k” var alldataarr = alldata.split(“,”); var num = alldata
js随机抽奖程序
paolei的笔记
11-16 4926
直接黏贴代码 随机抽奖程序 <!-- var alldata = "ASP,PHP,AJAX,ASP.NET,CSHARP,VB.NET,DELPHI,VB,VC,JS" //抽奖数据，以逗号分隔 var alldataarr = alldata.split(
JS实现随机抽奖功能
A20201130的博客
01-10 3892
点击开始按钮开始抽奖，div依次变红！下面是js代码，需要的自取 <script> var but1 = document.getElementById("btn1") var but2 = document.getElementById("btn2") var alldiv = document.querySelectorAll(".father>div") console.log(alldiv);
js简易随机抽奖
yl9552的博客
11-13 203
js简易抽奖效果 这是纯js知识点实现的哦 不多说上代码 <style> * { margin: 0; padding: 0; list-style: none; } .all { width: 318px; height: 318px; margin: 100px auto; } .grid{ color: white; } #center{ color: ; }
JavaScript实现随机抽奖功能（附完整源码）
最新发布
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-01 809
JavaScript实现随机抽奖功能（附完整源码）
JavaScript实现随机抽奖功能
NXBBC的博客
06-18 3437
可根据学号、姓名等方式实现随机滚动抽奖
如何创建随机数+UUID
06-10
在Java中，可以使用java.util.UUID类来生成UUID，同时使用java.util.Random类来生成随机数。下面是一个示例代码，可以生成随机数和UUID的组合： ```java import java.util.UUID; import java.util.Random; public ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值