源生js实现抽奖功能
这次给大家带来源生js实现抽奖功能，源生js实现抽奖功能的注意事项有哪些，下面就是实战案例，一起来看一下。
效果图：
<!DOCTYPE html><htmllang="en"><head> <metacharset="UTF-8"> <title>随机抽奖</title> <style> *{margin: 0;padding: 0;} body{ background:darksalmon; } h1,#ks,#js{ text-align: center; } #ks{ width: 100px; height: 70px; background: blueviolet; border-radius: 10px; line-height: 70px; margin:3% 0 0 40%; } #ks:hover{ width: 100px; height: 70px; background: tomato; border-radius: 10px; line-height: 70px; } #js{ width: 100px; height: 70px; background: blueviolet; border-radius: 10px; line-height: 70px; margin:-5% 0 0 50%; } #js:hover{ width: 100px; height: 70px; background: tomato; border-radius: 10px; line-height: 70px; } .jp{ border:3px solid #CD5C5C; border-radius:10px; width:95px; height:23px; background:#ff3030; padding-top:5px; text-align:center; color: #ff7ee1; } #jp{ width: 100%; height: 200px; background: orangered; position: absolute; margin-top: 300px; } #jp span{ font-size: 30px; } #tx{ font-size: 60px; color: #fff; } </style></head><body> <h1>抽奖了</h1> <pid="ks"onclick="ks()">开始抽奖</p><!--如何通过一个按钮实现开始和关闭？--> <pid="js"onclick="gb()">停止抽奖</p> <pid="jp"><span>恭喜你获得了：</span><spanid="tx"></span></p><script> var arr=["三星","苹果","华为・荣耀","小米","魅族","中兴・努比亚","酷派","vivo（蓝厂）","oppo(绿厂)"]; //循环添加的数组 var lieshu=3;//列数 console.log(arr.length); console.log("可以分："+arr.length/lieshu+"行"); for(var i=0;i<arr.length/lieshu;i++){//控制行数 for(varj=0;j<lieshu;j++){//控制列 if(i*lieshu+j<arr.length){ console.log("循环最内层："+i*lieshu+j); document.write("<p id=\"jiang"+(i*lieshu+j)+"\" class=\"jp\" style =\"" + "position:absolute;left:"+(j*110+500)+"px;" +"top:" +(i*50+200)+"px;\">"+ arr[i*lieshu+j]+"</p>"); /* document.write 网页内写文件 i*lieshu+j 为个数 * (j*110+500) 110 为列边距 500为整个表格；列偏移 * (i*40+300) 40 行间距 300为整个表格；列偏移 * * */ } } } var bs=-1;//用于循环过后变色 var t; function ks(){ /* 开始变色的方法*/ if(bs!=-1){ document.getElementById("jiang"+bs).style.background="#ff3030"; } var shuijisu=Math.floor(Math.random()*arr.length);//生成arr.length个 随机数向下取证 document.getElementById("jiang"+shuijisu).style.background="#3500cc"; bs =shuijisu;//shuijisu 代指添加元素的下表 t =setTimeout("ks()",100); }function gb() { clearTimeout(t); document.getElementById("tx").innerHTML =document.getElementById("jiang"+bs).innerHTML;//修改id="tx"类的值 }</script></body></html>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上是源生js实现抽奖功能的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
Video Face Swap
使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
7648
15
1392
52
91
11
73
19
36
110
豆包app有什么功能
Mar 01, 2024 pm 10:04 PM
豆包app里会有很多ai创作的功能，那么豆包app有什么功能呢？用户们可以通过这个软件来创作绘画，和ai进行聊天，还能够为用户生成文章，帮助大家搜索歌曲等。这篇豆包app功能介绍就能够告诉大家具体的操作方法，下面就是具体内容，赶紧看看吧！豆包app有什么功能答：可以绘画、聊天、写文、找歌。功能介绍：1、问题查询：可以通过ai来更快的找到问题的答案，什么样的问题都是可以询问。2、图片生成：可以有ai来为大家创建不同的图片，只需要告诉大家大概的要求。3、ai聊天：能够为用户们创建一个可以聊天的ai，
vivox100s和x100区别：性能对比及功能解析
Mar 23, 2024 pm 10:27 PM
vivox100s和x100手机都是vivo手机产品线中的代表机型，它们分别代表了vivo在不同时间段内的高端技术水平，因此这两款手机在设计、性能和功能上均有一定区别。本文将从性能对比和功能解析两个方面对这两款手机进行详细比较，帮助消费者更好地选择适合自己的手机。首先，我们来看vivox100s和x100在性能方面的对比。vivox100s搭载了最新的
自媒体到底是什么？它的主要特点和功能有哪些？
Mar 21, 2024 pm 08:21 PM
随着互联网的快速发展，自媒体这个概念已经深入人心。那么，自媒体到底是什么？它有哪些主要特点和功能呢？接下来，我们将一一探讨这些问题。一、自媒体到底是什么？自媒体，顾名思义，就是自己就是媒体。它是指通过互联网平台，个人或者团队可以自主创建、编辑、发布和传播内容的信息载体。不同于传统媒体，如报纸、电视、电台等，自媒体具有更强的互动性和个性化，让每个人都能成为信息的生产者和传播者。二、自媒体的主要特点和功能有哪些？1.低门槛：自媒体的崛起降低了进入媒体行业的门槛，不再需要繁琐的设备和专业的团队，一部手
excel抽奖小程序如何制作
Mar 20, 2024 am 11:40 AM
平时的工作中会遇到很多需要抽签进行的内容，传统的方法还是用纸质的号码随机抽号，随着电子软件的发展，我们可以用电脑制作抽签，今天欠们给大家分享的课程是excel抽奖小程序如何制作。1、首先我们打开Excel软件，打开我们准备好的表格，表格中要包含我们人的名字。 2、接着我们对右边的单元格进行合并，将今晚谁幸运填充为黑色，并将下方的单元格合并填充为红色，如下图所示。 3、接着我们在红色区域中输入randbetween函数，设置第一行为2，最后一行为7，如下图所示。 4、接着我们在前面输入ind
小红书账号管理软件有哪些功能？怎么经营小红书账号？
Mar 21, 2024 pm 04:16 PM
随着小红书在年轻人中的流行，越来越多的人开始利用这一平台分享各方面的经验和生活见解。如何有效管理多个小红书账号成为一个关键问题。在本文中，我们将讨论一些小红书账号管理软件的功能，并探讨如何更好地经营小红书账号。随着社交媒体的发展，许多人发现自己需要管理多个社交账号。对于小红书用户来说，这也是一个挑战。一些小红书账号管理软件可以帮助用户更轻松地管理多个账号，包括自动发布内容、定时发布、数据分析等功能。通过这些工具，用户可以更高效地管理他们的账号，提高账号的曝光率和关注度。另一、小红书账号管理软件有
PHP技巧：快速实现返回上一页功能
Mar 09, 2024 am 08:21 AM
PHP技巧：快速实现返回上一页功能在网页开发中，经常会遇到需要实现返回上一页的功能。这样的操作可以提高用户体验，让用户更加方便地在网页之间进行导航。在PHP中，我们可以通过一些简单的代码来实现这一功能。本文将介绍如何快速实现返回上一页功能，并提供具体的PHP代码示例。在PHP中，我们可以使用$_SERVER['HTTP_REFERER']来获取上一页的URL
什么是Discuz？Discuz的定义和功能介绍
Mar 03, 2024 am 10:33 AM
《探索Discuz：定义、功能及代码示例》随着互联网的迅猛发展，社区论坛已经成为人们获取信息、交流观点的重要平台。在众多的社区论坛系统中，Discuz作为国内较为知名的一种开源论坛软件，备受广大网站开发者和管理员的青睐。那么，什么是Discuz？它又有哪些功能，能为我们的网站提供怎样的帮助呢？本文将对Discuz进行详细介绍，并附上具体的代码示例，帮助读者更
Linux下GDM的功能和作用详解
Mar 01, 2024 pm 04:18 PM
Linux下GDM的功能和作用详解在Linux操作系统中，GDM（GNOMEDisplayManager）是一种图形化登录管理器，它提供了用户在系统中登录和注销的界面。GDM通常是GNOME桌面环境的一部分，但也可以被其他桌面环境所使用。GDM的作用不仅仅是提供一个登录界面，还包括用户会话管理、屏幕保护、自动登录等功能。GDM的功能主要包括以下几个方面：
