简单适用的抽奖小程序
文章目录
前言
大约每个学习过前端的学习者来说，都接触过生活所见到的方方面面，今天分享一个在企业、学校、和生活中都常用的小程序——抽奖小程序，它用到了HTML5的内容，相信你一定会有所收获的。
提示：提示：需要下载代码的可以跳转底部，有下载地址！
一、为什么开发此小程序？
1.作为新手：加深记忆，学会不同的开发思想。
2.生活所需。
3.拿来即用，方便。
二、效果展示
1.图片展示
（示例）：
2.视频展示
（示例）：
https://live.csdn.net/v/169591
三、效果展示
HTML5：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta http-equiv="Content-Language" content="zh-CN"/>
<title>抽奖</title>
<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="./list.js"></script>
<style type="text/css">
body {text-align:center;padding-top:50px;background-image: url("list.jpg");background-repeat:no-repeat; background-size:100% 600px}
#Result {border:3px solid #40AA53;margin:0 auto;text-align:center;width:60%;padding:50px 0;background:#efe;}
#ResultNum {font-weight:bold;font-size:120pt;font-family:Verdana}
#Button {margin:50px 0 0 0;}
#Button input {font-size:40px;padding:0 50px;}
.List {margin: 20px 100px;text-align: center;}
#ListSpan {margin: 10px 200px;width: 60%;}
.footer {position:fixed;bottom:10px;right:50px;font:bold large monospace; }
audio{
display: none;
}
</style>
<script type='text/javascript'>
<!--
var g_Interval = 100;
var candidates = $(list);
var g_Count = candidates.length;
var g_Timer;
var running = false;
var num = 0;
var index = 1;
function beginRndNum(trigger){
if(running){
running = false;
clearTimeout(g_Timer);
$(trigger).val("开始");
$('#ResultNum').css('color','red');
$('#ListSpan').append(index + ' :' +candidates[num] + ' ');
index++;
if(candidates.length>1){
candidates.splice(num,1);
}
}
else{
running = true;
$('#ResultNum').css('color','black');
$(trigger).val("停止");
beginTimer();
}
}
function updateRndNum(){
num = Math.floor(Math.random()*candidates.length);
$('#ResultNum').html(candidates[num]);
}
function beginTimer(){
g_Timer = setTimeout(beat, g_Interval);
}
function beat() {
g_Timer = setTimeout(beat, g_Interval);
updateRndNum();
}
//-->
$(document).keypress(function(event){
if(event.keyCode==32){
$('#StartBtn').click();
}
});
</script>
</head>
<body>
<h1 style="font-size: 60px; color: red;">抽奖</h1>
<div id="Result">
<span id="ResultNum"><span style="font-size:60pt;color:red;">祝您中奖！</span></span>
</div>
<div id="Button">
<input id="StartBtn" type='button' value='开始' onclick='beginRndNum(this)'/>
</div>
<div class="List">
<div id="ListSpan"></div>
</div>
<div class="footer">
By SUM, 2014
</div>
<audio autoplay="autoplay" controls="controls"loop="loop" preload="auto"
src="list.mp3">
</audio>
</body>
</html>JavaScript：
var list = [
'李峰',
'黄晓飞',
'朱云飞',
'陈赟',
'陈尚伦',
'钱国忠'
];
总结
以上就是今天要讲的内容，本文仅仅简单介绍了抽奖的实现效果，你也可以加以改进，变成微信小程序也可以，而HTML提供了大量能使我们快速便捷地实现关注世界的效果，希望对此兴趣的人继续探索深入。
源码下载地址：
版权声明：本文为qinluyu111原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。