简单适用的抽奖小程序

文章目录

前言

一、为什么开发此小程序？

二、效果展示

1.图片展示

2.视频展示

三、效果展示

总结

前言

大约每个学习过前端的学习者来说，都接触过生活所见到的方方面面，今天分享一个在企业、学校、和生活中都常用的小程序——抽奖小程序，它用到了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 + '&nbsp:' +candidates[num] + '&nbsp;&nbsp;&nbsp;');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提供了大量能使我们快速便捷地实现关注世界的效果，希望对此兴趣的人继续探索深入。

源码下载地址：

https://download.csdn.net/download/qinluyu111/20272067

简单适用的抽奖小程序相关推荐

编写一个随机抽奖程序php,基于PHP实现简单的随机抽奖小程序
摘要:一个抽奖小程序,概论可控,也可某个奖品在前端显示,而程序中根本不可能获得!把所有的概率x10后相加起来,新数组中每项的值等于它前几个的和加上它本身.然后随即生成一个0到最大数之间的一个数,通过循 ...
随机循环抽奖小程序_c语言,基于JavaScript实现简单的随机抽奖小程序
对于抽奖这样的小程序使用诸如VB,Delphi等工具来实现会比较的方便,由于本人机器上没有装这样的应用程序,所以只能另寻其道.为了使抽奖程序能够无需配置平台直接可以在任何一台机器上运行,开发工具和编译 ...
简单php抽奖,基于PHP实现简单的随机抽奖小程序_PHP
一个抽奖小程序,概论可控,也可某个奖品在前端显示,而程序中根本不可能获得!把所有的概率x10后相加起来,新数组中每项的值等于它前几个的和加上它本身. 然后随即生成一个0到最大数之间的一个数,通过循环查 ...
用php制作中奖系统,基于PHP随机抽奖小程序，很简单！
原标题:基于PHP随机抽奖小程序,很简单! 文章来自于:博客网址:https://blog.csdn.net/shaolong1013/article/details/78763057 一个抽奖小程 ...
python 活动随机抽奖小程序简单直白
开始学习python相关知识,看最近有不少随机抽奖小程序,自己也做一个试试思路: 建立一个抽奖人名单,可以打乱后直接按顺序取,也可以不打乱随机抽. 建立一个奖项名单,按顺序一个一个抽将随机化成顺序 ...
python抽奖简单小程序游戏_python实现抽奖小程序
本文实例为大家分享了python实现抽奖小程序的具体代码,供大家参考,具体内容如下设计一个抽奖服务背景:有x个奖品,要求在y天内发完:每天至少发放z个奖品:每天抽奖人数不定,事先会假设一个范围是m ...
如何用excel制作xy曲线图_用Excel制作一个简易抽奖小程序，可一次抽取多人
抽奖程序在很多场合都能派上用场,比如商场开业促销.课堂点名.抽取幸运观众等.我们今天就用Excel来制作一个简单的抽奖小程序,仅做参考. 抽奖小程序是下图这个样子的.我们按一下键盘上的F9键,即可完成 ...
python 抽奖库_用 python 写一个年会抽奖小程序
使用 pyinstaller 打包工具常用参数指南 pyinstaller -F demo.py 参数含义 -F 指定打包后只生成一个exe格式的文件 -D –onedir 创建一个目录,包含exe ...
数字抽奖小程序_发挥想象力，用 PowerBI 做抽奖小程序
前几天在 QQ群发起了大型PowerBI娱乐学习节目,并玩了抽奖环节,那么没有理由不想一想,如何使用 PowerBI 制作一个抽奖小程序. 效果如下: 大家一下就嗨起来了. 每个人手持一张卡片,哈哈 ...
微信抽奖小程序开发_分享微信抽奖小程序制作的步骤
各位商家在节日期间做活动的时候,都希望用更少的费用去或者更好的宣传和推广的效果.比较常见的就是抽奖活动小程序.无须玩家下载,通过微信扫码或者指定入口就可以参与. 方便,效果又好. 那么,性价比高的抽奖 ...

简单适用的抽奖小程序

简单适用的抽奖小程序

文章目录

前言

一、为什么开发此小程序？

二、效果展示

1.图片展示

2.视频展示

三、效果展示

总结

简单适用的抽奖小程序相关推荐

最新文章

热门文章