html+css+js实现抽奖功能

「爱情、让人受尽委屈。」 2022-06-06 08:15 287阅读 0赞

html+css+js实现抽奖功能

一、代码

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ padding: 0; margin: 0; } #uls{ width: 500px; height: 500px; margin: 50px auto; } li{ width: 150px; height: 150px; background: skyblue; float: left; list-style: none; margin:5px; color: #fff; text-align: center; line-height: 150px; font-size: 20px; font-weight: bold; } #uls li button{ width: 50px; height: 30px; } .light{ width: 150px; height: 150px; background: #666; color: #fff; } </style> </head> <body> <ul id='uls'> <li>600元优惠券</li> <li>800元优惠券</li> <li>1000元优惠券</li> <li>800元优惠券</li> <li><button id='btn1'>开始</button> <button id='btn2'>停止</button></li> <li>600元优惠券</li> <li>600元优惠券</li> <li>1000元优惠券</li> <li>800元优惠券</li> </ul> <script> var btn1=document.getElementById("btn1"); var btn2=document.getElementById("btn2"); var arr=[0,1,2,5,8,7,6,3];//按这个下标依次旋转 var lis=document.getElementsByTagName("li"); var num=0; //定义初识下标 btn1.οnclick=function(){ btn1.disabled=true; time=setInterval(function(){ lis[arr[num]].className=""; num++; if(num>7){ num=0; } lis[arr[num]].className="light"; },50) } btn2.οnclick=function(){ btn1.disabled=false; clearInterval(time); } </script> </body> </html>

二、效果预览

![Center][]

[Center]: /images/20220606/2fdd7f75b6f54778bb8f8e0795b0fc35.png

发表评论取消回复

表情：

评论列表（有 0 条评论，287人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue 转盘抽奖功能，可控制抽奖概率

实现逻辑：思路：首先需要一个转盘，然后需要一个抽奖按钮定位在中间，图片提前设计或者用背景颜色代替（这里用的是图片，然后计算概率），使用css完成转动效果，每次转动完成之后情

刺骨的言语ヽ痛彻心扉/ 2024年03月24日 20:10/ 0 赞/ 80 阅读

相关实现不同概率抽奖功能

<table style="padding:0px; margin:0px; font-family:'Microsoft YaHei',Verdana,sans-serif,

迷南。/ 2024年02月17日 17:19/ 0 赞/ 26 阅读

相关 php 实现抽奖功能

阅读目录抽奖功能 1 抽奖功能 2 抽奖功能 1 最近做的小程序有一个抽奖功能，这里记录下实现抽奖功能的具体流程前提：有一组奖品数据如下

亦凉/ 2023年10月06日 16:16/ 0 赞/ 17 阅读

相关【JavaWeb】JQuery实现抽奖的动画效果功能

这篇博客，教你怎么用JQuery框架实现抽奖送老婆功能哈哈哈！开个玩笑，就是简单的抽奖功能代码如下： <!DOCTYPE html>

╰+攻爆jí腚メ/ 2023年03月02日 05:25/ 0 赞/ 18 阅读

相关 php如何实现抽奖功能,PHP实现概率抽奖功能

php代码如下<?php header("Content-type: text/html; charset=utf-8"); $jiangpin = array( arr

清疚/ 2023年01月17日 15:55/ 0 赞/ 248 阅读

相关 jquery抽奖功能开发

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

╰+攻爆jí腚メ/ 2023年01月01日 05:47/ 0 赞/ 194 阅读

相关 php 抽奖活动_PHP实现活动人选抽奖功能

本文介绍情景为活动人选抽奖，通过简单随机抽取指定人数，依次列举被抽中的人名。示例代码如下：活动人选 $lotterPeopleArr = array(); $num =

淡淡的烟草味﹌/ 2022年11月12日 05:23/ 0 赞/ 213 阅读

相关 html在抽奖图片自动效果图,jQuery实现图片随机切换、抽奖功能(实例代码)

效果图： ![6fd82368231662cde47321f948add457.gif][] 源代码： HTML： ![mei0.jpg][] ![mei0.jpg]

﹏ヽ暗。殇╰゛Y/ 2022年10月06日 03:57/ 0 赞/ 238 阅读

相关 html+css+js实现抽奖功能

html+css+js实现抽奖功能一、代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

「爱情、让人受尽委屈。」/ 2022年06月06日 08:15/ 0 赞/ 288 阅读

相关二、小功能模块——抽奖

这个是简单版本的，适合新手，但是所有的复杂的都是在简单的基础上进行修饰，原理是一样的，越努力越优秀先来讲一下思路： 1、用h2标签放置中奖人名单 2、有两个按钮（1

缺乏、安全感/ 2022年03月12日 16:38/ 0 赞/ 228 阅读