简单适用的抽奖小程序

最新推荐文章于 2023-09-24 12:41:38 发布

初尘屿风

最新推荐文章于 2023-09-24 12:41:38 发布

阅读量1.6k

点赞数 1

分类专栏：初尘屿风 SpringBoot 前端文章标签： html5 css javascript

本文链接：https://blog.csdn.net/qinluyu111/article/details/118731279

版权

初尘屿风同时被 3 个专栏收录

191 篇文章 10 订阅

订阅专栏

SpringBoot

23 篇文章 1 订阅

订阅专栏

前端

19 篇文章 0 订阅

订阅专栏

简单适用的抽奖小程序

文章目录

前言

大约每个学习过前端的学习者来说，都接触过生活所见到的方方面面，今天分享一个在企业、学校、和生活中都常用的小程序——抽奖小程序，它用到了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

初尘屿风

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
1
评论
简单适用的抽奖小程序

大约每个学习过前端的学习者来说，都接触过生活所见到的方方面面，今天分享一个在企业、学校、和生活中都常用的小程序——抽奖小程序，它用到了HTML5的内容，相信你一定会有所收获的。
复制链接

扫一扫

专栏目录

简单适用的抽奖小程序

简单适用的抽奖小程序

文章目录

前言

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

二、效果展示

1.图片展示

2.视频展示

三、效果展示

总结

“相关推荐”对你有帮助么？