开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

手机号滚动抽奖代码js

手机号滚动抽奖是一种常见的活动形式，通常用于线上活动或促销。下面是一个简单的JavaScript实现，用于模拟手机号滚动抽奖的过程。

基础概念

数组：用于存储参与抽奖的手机号列表。
随机数生成：用于从数组中随机选择一个手机号。
DOM操作：用于更新页面上的显示内容。

优势

简单直观：用户可以清晰地看到抽奖过程。
易于实现：使用基本的JavaScript和HTML即可完成。
灵活性高：可以根据需求调整抽奖逻辑和样式。

类型

完全随机：每个手机号被抽中的概率相同。
加权随机：根据某些条件调整不同手机号的中奖概率。

应用场景

线上活动：如电商平台的促销活动。
会员福利：为会员提供抽奖机会。
社交媒体推广：通过抽奖吸引用户关注。

示例代码

以下是一个简单的手机号滚动抽奖的JavaScript代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机号滚动抽奖</title>
    <style>
        #result {
            font-size: 2em;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <button onclick="startRoll()">开始抽奖</button>
    <div id="result"></div>

    <script>
        const phoneNumbers = [
            '13800138000', '13900139000', '13700137000',
            '13600136000', '13500135000', '13400134000'
        ];

        function startRoll() {
            const resultElement = document.getElementById('result');
            let rolling = true;

            const rollInterval = setInterval(() => {
                if (!rolling) {
                    clearInterval(rollInterval);
                    return;
                }

                const randomIndex = Math.floor(Math.random() * phoneNumbers.length);
                resultElement.textContent = phoneNumbers[randomIndex];
            }, 100);

            setTimeout(() => {
                rolling = false;
                const finalIndex = Math.floor(Math.random() * phoneNumbers.length);
                resultElement.textContent = `恭喜中奖！手机号是：${phoneNumbers[finalIndex]}`;
            }, 3000);
        }
    </script>
</body>
</html>

解释

HTML部分：包含一个按钮和一个用于显示结果的<div>。
CSS部分：简单设置了结果文本的样式。
JavaScript部分：
- 定义了一个包含手机号的数组。
- startRoll函数负责启动抽奖过程。
- 使用setInterval模拟滚动效果，每隔100毫秒更新一次显示的手机号。
- 使用setTimeout在3秒后停止滚动，并显示最终中奖的手机号。

可能遇到的问题及解决方法

滚动效果不明显：可以增加滚动的时间间隔或减少滚动次数。
页面卡顿：确保JavaScript代码优化，避免在滚动过程中执行复杂的操作。
随机性问题：使用Math.random()生成的随机数在大多数情况下足够随机，但如果需要更高质量的随机数，可以考虑使用加密库。

通过以上代码和解释，你应该能够实现一个基本的手机号滚动抽奖功能，并理解其背后的原理和应用场景。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Python使用Tkinter实现滚动抽奖器

年底，抽奖这个话题很多人都会讨论，都希望可以中奖。接下来我就使用 Python 中的 Tkinter 模块来实现一个简单的滚动抽奖器。...Tkinter 提供了非常丰富的图形界面功能，实现一个抽奖器，只需要用到里面很少的一部分功能。二、使用Tkinter实现滚动抽奖器的步骤 1....设置文字显示框抽奖时，要在界面上快速地滚动显示当前的中奖者姓名，所以要设置一个文字显示框。...三、抽奖器代码实现和效果展示根据上面的简单分析，代码按步骤依次来实现，完整代码如下。...所以在代码中设置了两个全局变量 going 和 is_run，分别表示是否可以继续滚动(递归)显示下一个名额和当前抽奖器是否在运行，通过它们控制同时只有一次抽奖在运行。最后的抽奖器效果如下： ?

3.5K3 0

无缝循环滚动图片的JS代码

无缝循环滚动图片的JS代码，用来展示商品什么的最好了，图片URL可以自行替换，速度也可以自己调试。... 无缝滚动</

12.2K3 0

js无缝循环滚动图片示例代码

html代码 3 css代码 * { margin: 0; padding:...left; margin: 0; padding: 0; } #banner ul li img { width: 400px; height: 600px; } js...oUl.style.left = -oUl.offsetWidth/speed+'px'; } oUl.style.left = oUl.offsetLeft+speed+'px';//进行右横向滚动...//oUl.style.left = oUl.offsetLeft-2+'px';//进行左横向滚动 } //调用方法 var timer = setInterval(move,30)//速度

12.2K2 0

【开源解析】一款老虎机抽奖的数字滚动js组件

数字滚动组件最近遇到一个数字模拟老虎机滚动的问题，以前有做过几次。但是都没有对它进行沉淀，这次觉得应该把这个东西沉淀一下，方便日后使用。本组件主要针对移动端面。...使用方法下载本项目的numbers.js。... js...可以针对具体情况，对数字滚动做定制。...3，4为无差异化滚动 xxx$ 表示倒数的后三们为无差异滚动 } ); NUMBERS.scroll(); 单独定制有时候，一个页面内有多个数字滚动，并且每个滚动的具体定制不同，无法统一通过NUMBERS.set

4.3K4 0

JS实现抽奖（方形）

43 // 抽过的还能抽可定义抽奖次数-->次数限制 num需要定义 44 // 不定义抽奖次数...-->次数无限 num不需定义 45 // 抽过的不能抽可定义抽奖次数-->次数限制(次数不超过选择器长度) num需要定义 46...// 不定义抽奖次数-->次数等于选择器长度 num需要定义 47 48 /** 49 * [start 开始抽奖]...91 } else{ 92 93 key = false; 94 95 console.log("抽奖结束...key; 112 113 } 114 115 /** 116 * [start 开始抽奖] 117 * @param {[String]} selector

3.7K5 0

Js 简单的转盘抽奖

<style> .wrap { position: relative; /* display: flex; ...

5.9K1 0

golang随机抽奖代码

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/hotqin888/article/det...

2.7K2 0

JS-抽奖系统-实现原理

抽奖系统 .wrap { width: 300px; margin: 20px..., //思路出错的地方2，抽奖就是抽随机数，而不是一个i从0-7的加加加，最后只会是7的结果。 trap = 0, //方便二次按回车时结束抽奖【一键多用！】...timer = null; //思路出错的地方1，定时器要定义为全局变量 //开始抽奖 play.onclick = playCj; //因为需要多次引用，所以封装起来函数。...//结束抽奖 stop.onclick = stopCj; //封装开始抽奖函数 function playCj() { clearInterval(timer);...title.innerHTML = arr[i]; }, 30); play.className = 'play'; //更改样式直接用了一个class名字，这样js里省点代码。

8.4K4 0

【经典】抽奖系统(HTML，CSS、JS)

一个简单但功能强大的抽奖系统的示例，用于在网页上实现抽奖。...1、添加参与者 2、多次添加 3、点击抽奖功能介绍：参与者添加：用户可以输入参与者名字并点击“添加参与者”按钮将其加入列表。添加的名字会显示在页面下方的列表中。...开始抽奖：点击“开始抽奖”按钮，系统会随机从已添加的参与者中选出一个作为中奖者。抽奖结果会显示在页面上。动态更新：参与者列表动态更新，显示所有参与者的序号和名字。...点击“开始抽奖”，查看中奖结果。完整代码： <!...`; } 如果需要更多高级功能，例如奖品设置、多轮抽奖等，可以进一步扩展逻辑！嗨，我是命运之光。

4861 0

JS简易整页滚动

fullPage超简易版本 1.知识点 JS 滚动监听事件 JS 移动端touch监听事件函数节流 DOM操作 2.示例GIF ?...示例GIF 3.代码分析 1.CSS html, body设置 overflow 为 hidden, 让视图中只包括一个分页;设置滑动分页的长宽都是 100%; 外部容器设置 transition 过渡效果...向下滚动时, 当 currentPosition 比 -整体分页高度大的时候(绝对值相比小的时候), 向下滚动;向上滚动时, 当 currentPosition 大于 0 的时候, 向上滚动. /...滚动事件firefox与其他浏览器的事件不同, 所以需要进行判断. deltaY大于0的时候, 想下滚动; 反之, 向上滚动. var handlerWheel = throttle(scrollMove...mousewheel_event#The_detail_property https://developer.mozilla.org/en-US/docs/Web/API/Touch_events 5.整体代码

15.7K3 1

js 原生无缝滚动

innerHTML=demo1.innerHTML//克隆demo1为demo2 function Marquee(){ if(demo2.offsetHeight-demo.scrollTop滚动至...=setInterval(Marquee,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的...//克隆demo1为demo2 function Marquee(){ console.log(‘调用’) if(demo2.offsetHeight-demo.scrollTop滚动至...=setInterval(Marquee,speed)//设置定时器 demo.onmouseover=function() {clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的

37.7K3 0

JS判断滚动条是否停止滚动

背景：昨天一个同事有种需求，有一个展示数据区域的div，带滚动条，当滚动条滚动时，需要向后台发请求，计算数据，再拿到前台展示。 ...分析：由于数据量级别较大，所以当滚动条滚动时，如果时时向后台发请求，对服务器和浏览器都造成巨大的压力。想到的解决方案是，当滚动条停止时，再去发请求计算数据。...那么问题来了，如何判断滚动条是否停止了呢？解决：搜索了一下，js本身是无法判断滚动条是在滚动状态还是停止状态，只有通过其它方式了。...后来想到的思路是当滚动条滚动的时候，发起一个定期执行的方法，并记录一次当前滚动条到顶部的距离，这个方法中判断此时滚动条到顶部的距离是否和上次记录的相等，如果相等，那么说明停止滚动了，不相等，还在滚动。...代码： <!

17.4K0 0

左右滚动公告代码和上下滚动公告代码

左右滚动上下滚动

4.8K2 0

JS 阻止页面滚动

在升级到 ios11.3 系统后，阻止页面滚动的代码 e.preventDefault 代码失效了。...表示事件采用冒泡机制（capture 译为捕获），浏览器默认就是 false passive:false 表示我现在主动告诉浏览器该监听器将使用 e.preventDefault() 来阻止浏览器默认的滚动行为...所以 Safari 中默认使用了 passive:true，告诉浏览器，此监听事件中，不会阻止默认的页面滚动。...这将导致设置的 e.preventDefault() 代码失效。所以 Safari 默认是不会阻止滚动的。...即可实现阻止移动页面滚动的功能。

23.1K5 0

实现一个js抽奖玩玩？

更多请见：https://blog.csdn.net/weixin_44519496/article/details/120127169

1.5K3 0

html+css+js写抽奖程序

html+css+js写抽奖程序简介：本文讲解，如何使用html+css+js写抽奖程序，后面也会加上后端，记录每一次的抽奖的结果。 HTML结构这个html结构就十分的简单，几行而已。...button> CSS结构通过简单的css的渲染，然后使得这个显示的结果是这个样子，这些都是很简单那的，主要是需要思考的是这个，js...display: inline-block; margin-left: 40%; } #top{ margin-left: 15%; } js...代码如下： function fcRandom(n, m){ // 生成范围为[n, m]的随机数 let r = Math.floor(Math.random...} let a = new Set(); // console.log("我被点了") } 完整代码

430 0

jquery.rotate.js实现转盘抽奖活动

DOCTYPE html> jqueryrotate积分抽奖效果演示 js.../jquery-2.1.4.min.js "> js2.0/jquery.rotate/jquery.rotate.min.js...console.log($('.turnImg')[0].style.transform) } }) } } } }) }) 代码直接

3.4K2 0

Java抽奖系统（附完整代码）

来源：https://blog.csdn.net/qq_44140450 ---- 需求分析 1）实现三个基本功能：登录、注册、抽奖。...4）抽奖：功能实现前提：需有用户处于登录状态。该前提满足时，系统从已存在用户中随机抽取5位不同的用户标记为幸运用户，并判断正在登录状态的用户是否被抽中。...3）抽奖： ? 注意事项运行代码之前务必在user.txt中创建五个以上的用户。...完整代码 import java.util.Scanner; import java.util.ArrayList; import java.io.*; import java.util.StringTokenizer...=========>恭喜您在本次抽奖中获得幸运称号！":"=========>很遗憾，今日您未获奖！-_-！")

2.1K2 0

JS实现图片循环滚动

之前在前端的时候有遇到这样一个问题，实现 JS 图片的循环滚动，然后鼠标移入的时候停止滚动，鼠标移开继续滚动，这里无非就是设置了一个定时器，鼠标移上时清除定时器达到滚动停止的目的，鼠标移开时重设定时器，...代码如下： JS实现图片循环滚动 #roll {...setInterval(Marquee, speed) demo.onmouseover = function() { clearInterval(MyMar)//鼠标移上时清除定时器达到滚动停止的目的

19.8K3 0

js滚动到页面顶部

本文俺将教大家如何使用原生js的scrollTo来实现滚动到页面顶部。如果不需要使用动画来滚动，则不需要使用到任何插件。...我们可以使用原生的JavaScript window.scrollTo 传入0,0 将会立即滚动到页面左上角。...element.scrollTo(x-coord, y-coord); //或者 element.scrollTo(options) 参数 x-coord 是期望滚动到位置水平轴上距元素左上角的像素。...y-coord 是期望滚动到位置竖直轴上距元素左上角的像素。或者 options 是一个ScrollToOptions对象。

14.3K4 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭