抽奖活动前端源码-可录入抽奖人名单

抽奖活动代码

该代码以录入形式进行抽奖，抽奖内容以英文逗号间隔。话不多说，直接自己看。我也是借鉴网上源码自己改了给朋友凑合用的。

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>抽奖活动</title><style>*{margin: 0px;padding: 0px;}li{list-style: none;}body{font-family: "楷体";user-select:none;height: 100%;background-repeat: no-repeat;background-position: center top;/*background-color: red;*/}.section{position: relative;width:935px;height: 460px;background-color: rgba(0,0,0,.3);background-image: url('img/tb.jpg');background-size: 935px  460px;margin: 80px auto;text-align: center;}.section h2{height: 90px;line-height: 90px;font-size: 40px;color:#fff;}.section .s-result{height: 400px;color: #fff;}.s-result{float: left;width: 895px;height: 300px;line-height: 300px;margin-left: 20px;font-size: 60px;font-weight: bold;}.btn {position:absolute;bottom: -40px;width: 323px;height: 81px;border-radius: 30px;background-color: #000;cursor:pointer;}.btn1{margin-left: 100px}.btn2{margin-left: 500px}.btn-p{line-height: 81px;font-size: 50px;color: #fff;}input{width: 323px;height: 31px;font-size: 15px;}.result_box{margin-left: 20px;}.lableSt{border-radius: 30px;background-color: #000;cursor:pointer;color: #fff;height: 31px;padding: 12px;}</style>
</head>
<body><div class="section"><h2>看看谁最幸运！！</h2><div class="result_box"><input type="text" id="allNames"  placeholder="抽奖人员名单，以英文逗号（,）间隔" /> <label class="lableSt" onclick="inputName()" >录入抽奖人员</label></div><div class="s-result" id="nameMsg" ></div><div class="btn1 btn" onclick="start()"><p class="btn-p">点 击 抽 取</p></div><div class="btn2 btn"  onclick="stop()"><p class="btn-p" >停止</p></div></div><script>var alldata = "";var alldataarr = "";var num = 0;var timer;var  msg="";function change(){     document.getElementById("nameMsg").innerText = alldataarr[getRnd(0,num)]; }function inputName(){msg = document.getElementById("allNames").value;if(msg.trim()==""){alert("请录入抽奖人员名单");return;}else{alert("录入成功，请开始抽奖");alldata =　msg;alldataarr = alldata.split(",");num = alldataarr.length-1;}}function start(){     clearInterval(timer);if(msg.trim()==""){alert("请录入抽奖人员名单");return;}if( alldataarr == "" ){document.getElementById("nameMsg").innerText = "抽奖名单已抽完";}else if(alldata.indexOf(",") == -1 && alldata.trim().length > 0){document.getElementById("nameMsg").innerText = alldataarr;alldata = alldata.replace(document.getElementById("nameMsg").innerText,"");alldataarr="";}else{timer = setInterval('change()',46); //随机数据变换速度，越小变换的越快  }  }  function stop(){     clearInterval(timer);  //以下代码表示获得奖的，不能再获奖了。  重置刷新页面即可。  alldata = alldata.replace(document.getElementById("nameMsg").innerText,"").replace(",,",",");  // 去掉前置，最末尾的,  if (alldata.substr(0,1)==",")  {  alldata = alldata.substr(1,alldata.length);  }  if (alldata.substr(alldata.length-1,1)==",")  {  alldata = alldata.substring(0,alldata.length-1);  }  alldataarr = alldata.trim().split(",");    num = alldataarr.length-1; }     function getRnd(min,max){     return parseInt(Math.random()*(max-min+1));     } </script>
</body>
</html>

样式：
其中背景图片自己看源代码图片的背景图替换成自己想要的样式吧。

抽奖活动前端源码-可录入抽奖人名单相关推荐

代码式动态录入生成个人简历页面html页面前端源码
大家好,今天给大家介绍一款,代码式动态录入生成个人简历页面html页面前端源码(图1).送给大家哦,获取方式在本文末尾. 图1 整个页面分为两个部分,左右布局,左边动态输入一个代码编辑器,根据输入的代 ...
JavaScript实现的转盘抽奖html页面前端源码
大家好,今天给大家介绍一款,JavaScript实现的转盘抽奖html页面前端源码 (图1).送给大家哦,获取方式在本文末尾. 图1 点击中间的开始按钮,就可以转动转盘(图2) 图2 源码完整,需要的 ...
体检系统前端源码_给您的前端进行健康检查
体检系统前端源码 by Ewa Mitulska-Wójcik 伊娃·米图尔斯卡(EwaMitulska-Wójcik) 给您的前端进行健康检查 (Give your Front End a Heal ...
可能是全网首个前端源码共读活动，诚邀你加入一起学习
大家好,我是若川.众所周知,从8月份开始,我组织了源码共读活动,每周学习200行左右的源码,到现在持续了3个多月,坚持答疑解惑.帮助了不少人,还是挺开心的.另外,涌现了很多优秀的读者朋友,比如有就职于 ...
省钱兄游戏陪玩小程序APP源码uniapp前端源码适配支持（APP+小程序+H5）
开源代码是用户端uniapp静态部分源码,提供学习使用使用hbuilder导入即可运行,目前适配小程序,安卓,IOS,H5 游戏类型,我的信息,我的要求,立即找大神编辑,我想玩的游戏,我想找,其他 ...
钉钉（工作协同）应用之前端源码赏析
这几天在兴趣下翻看了钉钉(工作协同)应用的前端源码,分析其目录结构.构建工具及框架使用等,进行前端技术研究,分享我的总结成果. PS:不知道这应用的没关系,因为总结出来是前端通用的东西. PS:其应用 ...
小程序源码：社群微群人脉系统-多玩法安装简单
这是一款小编自营的一款人脉小程序系统小编自营大概有三个多月了吧一直没有给大家公开现在因为小编在实现新版本的功能添加与更新所以小编就把这一款开源分享给大家吧! 分享出来考虑到大家服务器等等效益所以 ...
小程序源码：社群微群人脉系统小程序版本源码下载带流量主功能实现广告效益
现在因为小编在实现新版本的功能添加与更新所以小编就把这一款开源分享给大家吧! 分享出来考虑到大家服务器等等效益所以小编就把后台给砍掉了所以大家就直接前端上传到微信开发者工具即可使用本款小程序群二 ...
4- vue django restful framework 打造生鲜超市 -restful api 与前端源码介绍
使用Python3.6与Django2.0.2(Django-rest-framework)以及前端vue开发的前后端分离的商城网站项目支持支付宝支付(暂不支持微信支付),支持手机短信验证码注册, ...
短网址生成+域名检测+短网址还原等四合一前端源码
介绍: 短网址生成+域名检测+短网址还原等四合一前端源码没有功能哦~!有会后端技术的可以拿去开发用!页面还是挺漂亮的,里面还有很多子页面都非常的好看! 网盘下载地址: http://kekewangL ...

抽奖活动前端源码-可录入抽奖人名单

抽奖活动代码

抽奖活动前端源码-可录入抽奖人名单相关推荐

最新文章

热门文章