js实现简单的抽奖系统
一个用js编写的简单的抽奖系统，供大家参考，具体内容如下
效果图如图所示：字节带闪动，点击开始，可进行抽奖，并且按钮变为结束按钮，然后点击结束按钮，可以结束，并抽奖成功。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>抽奖</title>
<style type="text/css">
table {
width: 400px;
height: 400px;
border: gray solid 1px;
border-collapse: collapse;
text-align: center;
margin: 0 auto;
margin-top: 100px;
}
.td {
border: gray solid 1px;
background-color: lightskyblue;
}
.td1 {
border: gray solid 1px;
background-color: red;
}
td:hover {
background-color: cornflowerblue;
}
div {
width: 100px;
height: 40px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
}
#btn {
width: 100px;
height: 40px;
}
#blink{
width: 300px;
height: 90px;
margin-left: auto;
margin-right: auto;
margin-top: 20px;
font-size: 70px;
font: "微软雅黑";
text-align: center;
font-weight: bold;
}
</style>
</head>
<body>
<div id="blink">
抽 奖 了
</div>
<table>
</table>
<div>
<input type="button" id="btn" value="开始" onclick="click1()" />
</div>
</body>
<script type="text/javascript">
/*利用二维数据+dom操作*/
var interval = 0;
var table = document.querySelector("table");
var arr = [
[1, 2, 3, 4, 5],
[6, 7, 8, 9, 10],
[11, 12, 13, 14, 15],
[16, 17, 18, 19, 20],
[21, 22, 23, 24, 25]
]
for(var i in arr) {
var tr = table.insertRow();
for(var j in arr[i]) {
var td = tr.insertCell();
td.setAttribute("class", "td");
td.innerHTML = arr[i][j];
}
}
//获取所有的td标签数组
var count = document.querySelectorAll("td");
function click1() {
//找到当前按钮
var btn = document.querySelector("#btn");
//判断按钮状态
if(btn.value == '开始') {
//点解后修改背景颜色
btn.style.backgroundColor = "red";
//修改按钮文字
btn.value = "结束";
//停止继续调用setInterval函数进行抽奖
clearInterval(interval);
interval = setInterval(function() {
var rad = Math.floor(Math.random() * 25);
for(var i = 0; i < count.length; i++) {
//通过遍历来重新给表设置样式
count[i].setAttribute("class", "td");
if(rad === i) {
//给抽到的人改变样式
count[i].setAttribute('class', 'td1');
}
}
}, 100)
} else {
//设置背景颜色
btn.style.backgroundColor = "gainsboro";
//修改按钮文字
btn.value = "开始";
clearInterval(interval);
}
}
function changeColor() {
var color = "#f00|#0f0|#00f|#880|#808|#088|yellow|green|blue|gray";
color = color.split("|");
document.getElementById("blink").style.color = color[parseInt(Math.random() * color.length)];
}
setInterval("changeColor()", 200);
</script>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
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轻松制作一套简单的抽奖系统
作者:jegg 年底将至,许多公司忙着搞年会,会上一般都会有一些抽奖活动,下面的程序就是用javascript 写的一个简单的抽奖系统与大家共享. 此代码借鉴了网上的一些网友的代码,又加上了一些诸如不重复抽奖之类的改进.大概思路如下: 1.将所有的的抽奖数据(这里为手机号码)存入数组中. 2.使用random 函数随机产生该数组的INDEX 3.使用setInterval 函数以极短的时间间隔产生该数组随机INDEX所对应的手机号码,并显示. 4.使用removeEleAt(ind
-
js组件SlotMachine实现图片切换效果制作抽奖系统
前言:前两天在网上找组件,无意中发现了我们儿时游戏机效果的"SlotMachine组件",浏览一遍下来,勾起了小时候满满的回忆. 下面就带着大家来看看这么一个神奇的组件--SlotMachine吧. 一.组件预览 先来一发简单的效果压压惊 觉得太简单?别急,好戏在后头,试试手气先. 什么?还没达到想要的效果,好!下面,真实效果来一发. 点击了好长时间,都没有中奖,难怪小时候怎么都赢不了呢.不信邪,继续点击开始,终于有一次中奖的了,真心不容易. 还有我们年终抽奖效果,开始!停止! 二.代
-
原生js实现简易抽奖系统
本文实例为大家分享了js实现简易抽奖系统的具体代码,供大家参考,具体内容如下 效果图 原理: 其实这里的原理就是通过按钮的状态是开始抽奖还是停止 如果i=ture 那就触发定时器 每50毫秒更换一次中奖的内容.如果i=false,那就清除定时器,显示最后的抽奖结果 下面我给大家画了个更直观的图 HTML结构与样式 <!doctype html> <html lang="en"> <head> <meta charset="UT
-
JavaScript实现简单抽奖系统
本文实例为大家分享了JavaScript实现简单抽奖系统的具体代码,供大家参考,具体内容如下 模拟实现抽奖系统 前端使用JavaScript代码实现抽奖系统,代码如下: 样式代码: <style> body{ background: url("bg.jpg") no-repeat; background-size: 100%; } #box{ positi
-
基于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
-
基于JavaScript实现抽奖系统
用JavaScript实现一个简单的抽奖系统,有[开始]按钮和[停止]按钮. 功能: - 点开始按钮开始抽奖,随机出现奖品名称: - 点停止按钮即可停止抽奖: - 按下回车键可切换开始抽奖和停止抽奖. 效果 html代码: 创建html结构,最基础的要含有显示的奖品名称和开始.停止按钮. <!doctype html> <html> <head> <title>抽奖系统</title> <meta charset="utf-8&q
-
慕课网题目之js实现抽奖系统功能
本文实例为大家分享了js实现抽奖系统功能的具体代码,供大家参考,具体内容如下 要求实现功能: 1.点击左侧按键,开始抽奖,点击右侧按键,停止抽奖: 2.敲击回车键,开始抽奖,再次敲击回车键,停止抽奖: 3.开始抽奖后,左侧按钮变色: html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>抽奖</title
-
javascript实现可键盘控制的抽奖系统
制作一个简易的抽奖系统!欢迎大家学习! JS原理:建立一个数组用来存储抽奖内容,例如 iphone6 等,当点击开始的时候,开启定时器,产生一个随机数,把对应文本的innerHTML改成数组所对应的内容. 如果想让某个抽奖几率变高,可以让数组中某个值重复次数多点.接下来看代码.. JavaScript代码 window.onload = function(){ var data = [ "iphone 6s plus", "苹果Mac 笔记本", "美的洗
-
js实现简单的抽奖系统
一个用js编写的简单的抽奖系统,供大家参考,具体内容如下 效果图如图所示:字节带闪动,点击开始,可进行抽奖,并且按钮变为结束按钮,然后点击结束按钮,可以结束,并抽奖成功. 代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>抽奖</title> <style type=&qu
-
JS实现简单的抽奖转盘效果示例
本文实例讲述了JS实现简单的抽奖转盘效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net JS抽奖转盘</title> <style> *{ margin:0; padding:0; list-style: none; } .big{
-
C语言实现简单的抽奖系统
本文实例为大家分享了C语言实现简单的抽奖系统的具体代码,供大家参考,具体内容如下 效果图 #include<stdio.h> #include<string.h> #include<stdlib.h> #include<conio.h> #include<time.h> #include <windows.h> struct data{ char id[20]; char name[20]; }; int t1
-
JS实现简单九宫格抽奖
用JavaScript写一个九宫格的抽奖盘,供大家参考,具体内容如下 点击中间的块,选中奖品的亮块会在边缘的8个块循环: 选中后,弹出选中的内容: 代码参考: HTML文件: <body> <div class="box"> <ul id="jiangPin"> <li><a href="javascript:viod(0);" ><span>奖品 1
-
JS实现简单的九宫格抽奖
本文实例为大家分享了JS实现简单九宫格抽奖的具体代码,供大家参考,具体内容如下 结构 <body> <div id="fa"> <div class="option">1</div> <div class="option">5</div> <div class="option">3<
-
js脚本编写简单刷票投票系统
本文实例为大家分享了js刷票投票系统的具体代码,供大家参考,具体内容如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <meta h
-
JS实现简单的选择题测评系统代码思路详解(demo)
包含内容:JS封装表单,JS校验表单 说是测评系统,感觉只能算是一个小小的Demo,很水,,没有数据库库,,仅使用JS做简单的选择题测评系统 -------------------------------------------------------------------------------- 一.设计思路 表单封装: [1]由于采用JS封装提交所以,不需要form标签 [2]放置多个input标签,作为输入项 [3]编写JS获取输入项,并通过get方式提交到另一个页面 校验表单(显示结