原生js实现简易抽奖系统
本文实例为大家分享了js实现简易抽奖系统的具体代码，供大家参考，具体内容如下
效果图
原理：
其实这里的原理就是通过按钮的状态是开始抽奖还是停止 如果i=ture 那就触发定时器 每50毫秒更换一次中奖的内容。如果i=false，那就清除定时器，显示最后的抽奖结果
下面我给大家画了个更直观的图
HTML结构与样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
h2 {
font-weight: normal;
}
.box {
width: 450px;
height: auto;
background: #fff;
border-radius: 3px;
margin: 50px auto;
padding-bottom: 1em;
box-shadow: 0 10px 10px 0 rgba(0, 0, 0, 0.2), 0 5px 15px 0 rgba(0, 0, 0, 0.19);
}
.header {
width: 100%;
height: auto;
padding: 0.5em 0.8em;
border-bottom: 1px solid #ccc;
box-sizing: border-box;
}
.body {
width: 100%;
height: auto;
text-align: center;
}
.body:after {
content: "";
display: block;
clear: both;
}
.body > div {
width: 180px;
margin: 0 auto;
}
.body > div > span {
padding-top: 1em;
float: left;
}
#tip {
display: none;
}
.footer {
width: 180px;
height: 30px;
background: #2ab8ff;
line-height: 30px;
text-align: center;
margin: 1em auto;
color: #ccc;
border: 1px solid #2193cc;
border-radius: 3px;
cursor: pointer;
}
.footer:hover {
background: #4ec1fb;
}
</style>
</head>
<body>
<div class="box">
<div class="header">
<h2>简易抽奖系统</h2>
</div>
<div class="body">
<div>
<span id="tip">恭喜你！获得：</span>
<span id="put"></span>
</div>
</div>
<div class="footer">
点击抽奖
</div>
</div>
js代码
<script>
/* 获取按钮 */
var btn = document.querySelector('.footer');
/* 获取提示的标签 */
var tip = document.querySelector('#tip');
/* 获取要输出的标签 */
var put = document.querySelector('#put');
/* 定义中奖的项目 */
var gift = ['QQ会员','黄钻','绿钻','黑钻','紫钻','红钻','蓝钻','钻皇'];
/* 定义i==true 用于判断 */
var i = true;
/* 定义定时器 */
var Timer;
var n = 0;
btn.onclick=function() {
if (i == true) {
btn.style.background = '#f1516c';
btn.style.borderColor = '#db2745';
tip.style.display = 'block';
Timer = setInterval(function() {
n++;
if (n == gift.length) {
n = 0;
}
put.innerHTML = gift[n];
},50)
btn.innerHTML = '停止';
i = false;
}else {
btn.style.background = '#2ab8ff';
btn.style.borderColor = '#2193cc';
clearInterval(Timer);
btn.innerHTML = '开始抽奖';
i = true;
}
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
JavaScript实现简单抽奖系统
本文实例为大家分享了JavaScript实现简单抽奖系统的具体代码,供大家参考,具体内容如下 模拟实现抽奖系统 前端使用JavaScript代码实现抽奖系统,代码如下: 样式代码: <style> body{ background: url("bg.jpg") no-repeat; background-size: 100%; } #box{ positi
-
JavaScript-定时器0~9抽奖系统详解（代码）
具体代码如下: <html> <head> <title>定时器0~9抽奖系统</title> <meta charset="UTF-8" /> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <script t
-
基于JavaScript实现抽奖系统
用JavaScript实现一个简单的抽奖系统,有[开始]按钮和[停止]按钮. 功能: - 点开始按钮开始抽奖,随机出现奖品名称: - 点停止按钮即可停止抽奖: - 按下回车键可切换开始抽奖和停止抽奖. 效果 html代码: 创建html结构,最基础的要含有显示的奖品名称和开始.停止按钮. <!doctype html> <html> <head> <title>抽奖系统</title> <meta charset="utf-8&q
-
用Javascript轻松制作一套简单的抽奖系统
作者:jegg 年底将至,许多公司忙着搞年会,会上一般都会有一些抽奖活动,下面的程序就是用javascript 写的一个简单的抽奖系统与大家共享. 此代码借鉴了网上的一些网友的代码,又加上了一些诸如不重复抽奖之类的改进.大概思路如下: 1.将所有的的抽奖数据(这里为手机号码)存入数组中. 2.使用random 函数随机产生该数组的INDEX 3.使用setInterval 函数以极短的时间间隔产生该数组随机INDEX所对应的手机号码,并显示. 4.使用removeEleAt(ind
-
js组件SlotMachine实现图片切换效果制作抽奖系统
前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的"SlotMachine组件",浏览一遍下来,勾起了小时候满满的回忆. 下面就带着大家来看看这么一个神奇的组件--SlotMachine吧. 一.组件预览 先来一发简单的效果压压惊 觉得太简单?别急,好戏在后头,试试手气先. 什么?还没达到想要的效果,好!下面,真实效果来一发. 点击了好长时间,都没有中奖,难怪小时候怎么都赢不了呢.不信邪,继续点击开始,终于有一次中奖的了,真心不容易. 还有我们年终抽奖效果,开始!停止! 二.代
-
javascript实现可键盘控制的抽奖系统
制作一个简易的抽奖系统!欢迎大家学习! JS原理:建立一个数组用来存储抽奖内容,例如 iphone6 等,当点击开始的时候,开启定时器,产生一个随机数,把对应文本的innerHTML改成数组所对应的内容. 如果想让某个抽奖几率变高,可以让数组中某个值重复次数多点.接下来看代码.. JavaScript代码 window.onload = function(){ var data = [ "iphone 6s plus", "苹果Mac 笔记本", "美的洗
-
慕课网题目之js实现抽奖系统功能
本文实例为大家分享了js实现抽奖系统功能的具体代码,供大家参考,具体内容如下 要求实现功能: 1.点击左侧按键,开始抽奖,点击右侧按键,停止抽奖: 2.敲击回车键,开始抽奖,再次敲击回车键,停止抽奖: 3.开始抽奖后,左侧按钮变色: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽奖</title
-
基于javascript实现简单的抽奖系统
本文实例为大家分享了js实现简单的抽奖系统,供大家参考,具体内容如下 <!doctype html> <html lang="en"> <head> <meta charset="gb2312"> <title>抽奖活动</title> <style> *{ margin:0;padding:0; } #title{ color:red;text-align:center;margi
-
原生js实现简易抽奖系统
本文实例为大家分享了js实现简易抽奖系统的具体代码,供大家参考,具体内容如下 效果图 原理: 其实这里的原理就是通过按钮的状态是开始抽奖还是停止 如果i=ture 那就触发定时器 每50毫秒更换一次中奖的内容.如果i=false,那就清除定时器,显示最后的抽奖结果 下面我给大家画了个更直观的图 HTML结构与样式 <!doctype html> <html lang="en"> <head> <meta charset="UT
-
原生Js实现简易烟花爆炸效果的方法
本文实例讲述了原生Js实现简易烟花爆炸效果的方法.分享给大家供大家参考.具体分析如下: 实现原理: 在一定范围内,随机生成一些div,形成烟花效果 复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>js烟花效果</title> <script type="text/javascript"> d
-
原生js实现仿window10系统日历效果的实例
舞动的灵魂版js日历,完全采用js实现,故而实现了与语言无关,jsp.asp.net php asp均可使用.无论你是开发软件,还是网站,均是不可或缺的实用代码. 该日历主要实现了获取当前时间时分秒,年月日星期,动态生成选择年的select,月的select,然后根据你所选中的年月,显示该年月对应的这一个月的日期. 点击上一个月,下一个月按钮,在下拉列表中显示对应的年月. <!DOCTYPE html> <html lang="en"> <head>
-
原生JS实现-星级评分系统的简单实例
今天我又写了个很酷的实例:星级评分系统(可自定义星星个数.显示信息) sufuStar.star(); 使用默认值5个星星,默认信息 var msg = [........]; sufuStar.star(10,msg); 自定义星星个数为10.显示信息msg格式参考默认值,条数必须和星星个数一致: 自己实现一些实例,有个好处,能增加应用各知识点的熟练度,还能检验出自己的薄弱项!一经发现,立即翻API文档恶补! 不知道是不是我太笨,这个实例居然写了整整一天! 不废话了,先说下这个实例涉及的知识点
-
Java简易抽奖系统小项目
本文实例为大家分享了Java简易抽奖系统的具体代码,供大家参考,具体内容如下 需求: 实现一个抽奖系统 1 注册 2 登录 3 抽奖 必须先注册 再登陆 再抽奖 随机产生4个随机数作为幸运卡号 用户注册后 登录的时候 用户名密码输入判断只有三次机会 需要做到 还有2次 还有1次 三次输入错误 不能再登录 产生10个随机数 将用户注册得到的随机数作为判断 代码如下: import java.util.*; public class Homeworktest { public sta
-
原生JS实现九宫格抽奖
本文实例为大家分享了JS实现九宫格抽奖的具体代码,供大家参考,具体内容如下 上代码: <div class="wrapper"> <div>谢谢惠顾</div> <div>十万元现金</div> <div>谢谢惠顾</div> <div>iphone11</div> <div>抽奖</div> <div>美的冰箱</div> <
-
原生js实现简易计算器
本文实例为大家分享了js实现简易计算器的具体代码,供大家参考,具体内容如下 最近,博主闲来无聊,就没事用js写了个简易计算器(博主是搞后端的,不是前端>_<).其实,感觉搞前端的很幸福,自己弄出点东西很有成就感,话不多说,附上源码. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算器</title> <style>
-
js实现简易弹幕系统
本文实例为大家分享了原生js实现弹幕效果的具体代码,供大家参考,具体内容如下 实现思路 1.先写好静态页面框架 <div id='father'> <div id="top"> <video src="./video/s10_2020129112346.mp4" controls autoplay muted loop></video> <!-- controls显示标准的视频控件 autoplay 视频自动播放
-
原生JS实现九宫格抽奖效果
效果图: 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title></title> <style> *{margin:0;padding:0;} #container{w
-
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
今天小编把之前保存的js特效视频看了一遍,跟着视频敲了敲嘻嘻,用原生js实现一个炫酷的登录页面.怎么个炫酷法呢,看看下面的图片大家就知道啦. 效果图: 不过在看代码之前呢,大家先和小颖看看css中的opacity.transition.box-shadow这三个属性. 1.opacity CSS3 opacity 属性 实例 设置一个div元素的透明度级别: div { opacity:0.5; } 在此页底部有更多的例子. 浏览器支持 Internet ExplorerFirefoxOpera