用js html写个抽奖页面,用JS实现简单的网页抽奖
我们在上网做问卷调查或投票结束后,时常都会遇到抽奖,不过基本都是假的哈。下面将由简单的js代码来实现一下。
首先思路:1.写出需要的HTML和CSS样式 2.js实现滚动,停止,弹出奖品框。文中所示的代码已上传至GitHub啦。GitHub - tanzhuokun/GetAward.github.io: 抽奖JS简单实现
样式结果:
image.png
点击“开始抽奖”就进行背景色滚动,当然也可以写成另一种样式,抽奖按钮在中间,8个奖品即可,用CSS改变下样式就OK啦。
CSS样式展示如下:
#wrap {
text-align: center;
width: 500px;
margin: 100px auto;
position: relative;
}
#img{
width: 100px;
height: 100px;
margin-left: 40px;
margin-top: 20px;
}
#ul1 {
width: 303px;
height: 303px;
margin: 50px auto;
padding: 0;
border-top: 1px solid black;
border-left: 1px solid black;
}
#ul1 li {
float: left;
border-right: 1px solid black;
border-bottom: 1px solid black;
list-style: none;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
#tooltips {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
z-index: 999;
display: none;
}
#info {
width: 400px;
height: 200px;
background-color: white;
margin: 150px auto;
position: relative;
}
#info .title {
width: 100%;
height: 40px;
background-color: #009f95;
line-height: 40px;
color: white;
padding-left: 20px;
box-sizing: border-box;
}
#info .btn button {
background-color: #009f95;
color: white;
outline: none;
font-size: 10px;
width: 60px;
height: 30px;
margin-left: 300px;
}
#info .content {
position: absolute;
top: 95px;
left: 190px;
box-sizing: border-box;
}
HTML代码:
开始抽奖
- 电脑
- 100万
- 很遗憾~
- 很遗憾~
- 键盘
- iphoneX
- 100元购物卷
- 王者2日游
- 很遗憾~
确定
抽奖弹出框效果:
image
谈谈写的时候遇到的坑吧。写js时,获取随机中奖数字和遍历的索引,两者容易出现bug,特别取余之后。另外还有就是循环次数,也就是通过循环的li标签来控制,这三者间要么背景色对不上内容,要么直接无线循环了。js展示如下:
var oBtn = document.getElementById('btn');
var aLi = document.getElementsByTagName('li');
var oTooltips = document.getElementById('tooltips');
var oConfirm = document.getElementById('confirm');
var oContent = document.getElementById('content');
var oImg = document.getElementById('img');
var nowIndex = 0;//定义滚动指定的li
oBtn.onclick = function(){
var number = getRandom(10,28);//获取中奖随机号码
//抽奖背景切换
var scrollLi = setInterval(function(){
console.log(number)
colorChange(aLi,nowIndex);
nowIndex++;
//中奖or为中奖内容设置
if(nowIndex==number)
{
clearInterval(scrollLi);
oTooltips.style.display = "block";
if(aLi[nowIndex%9].innerHTML=="很遗憾~"){
oContent.innerHTML ='sorry~ 大明 ' + aLi[nowIndex%9].innerHTML;
oImg.src="img/fool.png"
nowIndex = 0;
}else{
oContent.innerHTML ='恭喜~ 大明 获得了' + aLi[nowIndex%9].innerHTML;
oImg.src="img/love.png"
nowIndex = 0;
}
}
},100)
}
//改变颜色
function colorChange(aLi,nowIndex){
//把所有li背景设置为白色
for (var i= 0;i
aLi[i].style.backgroundColor = "white"
}
//背景
aLi[(nowIndex+1)%9].style.backgroundColor = "red";
}
//点击确认后消失
oConfirm.onclick = function(){
oTooltips.style.display = "none";
}
//获取随机获奖数字
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1) + min)
}
基本抽奖功能实现了,但可能代码不是很标准,欢迎评论讨论讨论,共同进步!!!
用js html写个抽奖页面,用JS实现简单的网页抽奖相关推荐
- js写css字体,js如何写出css动画 ?js写css动画的方法(代码)
本篇文章给大家带来的内容是关于js如何写出css动画 ?js写css动画的方法(代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 使用setTimeout()或者setInter ...
- php 随机数 抽奖 页面,源生JS做出抽奖页面
这次给大家带来源生JS做出抽奖页面,源生JS做出抽奖页面的注意事项有哪些,下面就是实战案例,一起来看一下. 效果图: 图片素材 : 代码如下,复制即可使用: 幸运抽奖页面 /*CSS代码*/ *{ p ...
- js方法写在html中,在js中写html代码怎么写
在js中写html代码的方法:首先使用div标签创建一块区域,给div标签添加一个id属性:然后在js中将一段html代码保存在html变量中:最后使用innerHTML属性,将html代码动态写入d ...
- 翻牌抽奖 php,PHP+jQuery开发简单的翻牌抽奖实例
PHP+jQuery开发简单的翻牌抽奖实例,实现流程:页面放置6个方块作为奖项,当抽奖者点击某一块时,方块翻转到背面,显示中奖信息,这个奖品是随机的,不是固定的. 在页面上放置6个奖项: 1 2 3 ...
- 如何用html弄出抽奖的网页,用JS实现简单的网页抽奖
我们在上网做问卷调查或投票结束后,时常都会遇到抽奖,不过基本都是假的哈.下面将由简单的js代码来实现一下. 首先思路:1.写出需要的HTML和CSS样式 2.js实现滚动,停止,弹出奖品框.文中所示的 ...
- 【原创】cs+html+js+css模式(五):页面调用JS的编写
1. 回顾: 上面的几章,把我们在服务器端需要写得代码与内容已经介绍完了,大家应该能基本理解是怎么与服务器端代码交互的了吧,主要是用到了HttpHander类来进行信息的窃取,也用了v ...
- 用php写一个美食页面,以美食为主题的网页设计案例10个
以美食为主题的网页设计案例10个 美食,无疑是在这个吃货纵横的时代中大家最愿意探讨的话题.厨师满足了我们的味蕾,而设计师也可以用他们的方式为浏览者调制出一种美好的精致和个性,色彩.文字和图片就是他们驾 ...
- 网站登录页面php代码,一个简单的网页密码登陆php代码
代码如下: $password = "1234"; // 这里是密码 $p = ""; if(isset($_COOKIE["isview" ...
- JS手写上传文件、React手写上传文件
目录 JS手写 React上传文件 JS手写 <!DOCTYPE html> <html lang="en"><head><meta ch ...
最新文章
- 【C#串口编程计划】C#通讯类库构建
- php如何查询数据是否存在,PHP判断数据库中的记录是否存在的方法,php数据库_PHP教程...
- 2010年12月blog汇总:敏捷个人
- 修改mint-ui的主题色
- 从IBM SVF看传统存储改造的三大要点:软件定义、容量与速度
- 扔掉 Postman,Apifox 才是 YYDS!
- assert self.binded
- 德信创业系2014版
- 对象创建方法,对象的内存分配,对象的访问定位
- 事件驱动java实现_基于spring实现事件驱动
- java定义构造方法_JAVA基础学习之路(三)类定义及构造方法
- 国内交流电频率和电压的历史渊源
- java在什么环境变量_Java-环境变量
- 封条格式用word怎么打_封条格式用word怎么打
- spark shuffle流程入门
- php 压缩及解压文件,php zip文件的解压与压缩
- mysql数据库备份sql语句_mysql用户管理、常用sql语句及数据库的备份
- java list去重工具_开发常用小工具类:list集合去重
- cad的计算机功能,CAD的基本功能有哪些
- VUE项目开发,使用开发者工具查看源文件
热门文章
- 买整体橱柜的五大误区
- 最大游戏工会YGG转型DAO,DAO能否成为下一个爆点?
- HBuilderX的下载和安装--详细
- java如何给密码加密_Java如何实现密码加密
- centos8设置静态IP
- 超级详细的Lua语言的基础教程
- SOLIDWORKS Premium 2022 SP5.0 三维设计绘图软件
- 【Delphi入门】运算符与表达式
- Base128编码规范
- 10000多套机械手毕业设计 课程设计 毕业论文 图纸 分享/上下料机械手、搬运机械手、苹果采摘机械手、液压机械手、三自由度机械手、水果采摘机械手、六自由度机械手、焊接机械手、码垛机械手、四自由……