HTML怎么实现抽奖变色,html+css+js实现简单抽奖

HTML

Document

10元

800元

1000元

80元

开始

停止

600元

60元

100元

20元

CSS

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;

}

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";

console.log(lis[arr[num]].className);

},30);

};

btn2.οnclick=function(){

// var loc = location.href;

// var n1 = loc.length;//地址的总长度

// var n2 = loc.indexOf("=");//取得=号的位置

// var username = decodeURI(loc.substr(n2 + 1, n1 - n2));//取=号后面的内容

// document.getElementById("username").value = username;

// console.log(username);

// var obj = document.getElementById("uls").getElementsByTagName("li");

setTimeout(function(){ clearInterval(time); },0);

btn1.disabled=false;

// var prize= obj[arr[num]].innerHTML;

// alert(prize);

};

HTML怎么实现抽奖变色,html+css+js实现简单抽奖相关推荐

绘制抽奖转盘（CSS+JS）
绘制抽奖转盘 HTML部分 CSS部分 JS部分最终效果 Hello!这里是万物之恋,今天来教大家用css+js来简单绘制一个抽奖轮盘(不可转动) HTML部分 <div class=&quo ...
html如何画出抽奖的转盘,css 如何“画”一个抽奖转盘
主要描述的是如何运用 css 绘制一个抽奖转盘,并运用原生 js 实现转盘抽奖效果. 先来张效果图: 布局一般来说,转盘一般有四个部分组成:外层闪烁的灯.内层旋转的圆盘.圆盘上的中奖结果.指针. 所 ...
html+css+js制作简单网站首页
一个简单的网站主页主要由html+css+js制作 1.图片展示这是首页的上半部分,主要内容有:顶部标头.顶部导航栏.图片轮播图. ```css <!DOCTYPE html> < ...
css + js实现简单无缝滚动字幕
css + js实现无缝滚动字幕利用js和css就可以很方便的实现一个无缝滚动字幕,使得列表在一个方框里不停滚动目录 css js实现无缝滚动字幕实现思路 html 代码 css 代码 js 代 ...
HTML+CSS+JS实现简单登录模板
本文主要为大家详细介绍.展示如何用HTML+CSS+JS来实现简单登录界面,有需要的小伙伴可以自行学习,希望可以帮助到大家哟! 一.进行布局,选择标签 <body><div clas ...
【HTML+CSS+JS】简单的登录注册验证
登录注册验证简单的小说明效果源码 HTML 登录注册.html loginSuccess.html CSS JS pageChange.js Click.js 简单的小说明本文是基于https ...
变色html css js
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
如何用html弄出抽奖的网页,用JS实现简单的网页抽奖
我们在上网做问卷调查或投票结束后,时常都会遇到抽奖,不过基本都是假的哈.下面将由简单的js代码来实现一下. 首先思路:1.写出需要的HTML和CSS样式 2.js实现滚动,停止,弹出奖品框.文中所示的 ...
HTML+CSS+JS实现简单滚动效果
html代码段,需要引用"autoScroll.js"和"autoScroll.css"两个文件 <!DOCTYPE html> <html ...

HTML怎么实现抽奖变色,html+css+js实现简单抽奖

HTML怎么实现抽奖变色,html+css+js实现简单抽奖相关推荐

最新文章

热门文章