杰晶网络

基于javascript实现简单的抽奖系统
网络编程 2025/1/21 佚名
3 2

本文实例为大家分享了js实现简单的抽奖系统，供大家参考，具体内容如下

<!doctype html>
<html lang="en">
<head>
 <meta charset="gb2312">
 <title>抽奖活动</title>
 <style>
*{
 margin:0;padding:0;
}
#title{
 color:red;text-align:center;margin:0 auto;width:240px;height:70px;padding-top:10px;background:opacity(0);
}
.btns{
 width:190px;height:30px;margin:0px auto;
}
 
.btns span{
 display:block;float:left;width:80px;height:28px;text-align:center;background:#036;color:#fff;cursor:pointer;border:1px solid #eee;border-radius:8px;font-family:"微软雅黑";font-size:14px;line-height:28px;margin-right:10px;
}
#txt{
 font-size:14px;color:#ccc999;text-align:center;margin:0 auto;width:190px;height:50px;padding-top:10px;
}
 </style>
 <script>
 var mytype=["iPhone6s","iPad Air2","DELL外星人","键鼠套装","1000元超市购物卡","200元话费充值卡","谢谢参与","品牌耳机","港澳台7日游","50元优惠券"],//定义奖品池
  timer=null,
  count=0;
//加载时触发
 window.onload=function(){
 var start = document.getElementById("start");
 var stop = document.getElementById("stop");
 
 start.onclick=startFun;//这个函数后面加括号，就直接调用了该函数，所以不要加
 stop.onclick=stopFun;
 
 //绑定键盘事件
 document.onkeyup=function(e){
  e = e || window.event;
 if(e.keyCode==13){
  if(count==0){
  startFun();
  count=1;
  }
 else{ 
  stopFun();
  count=0;
  }
 }
 }
 }
 
//点击开始，标题栏开始轮动
 function startFun(){
 clearInterval(timer);//开始时，清除计时器，避免二次触发
 var title = document.getElementById("title");
 var start = document.getElementById("start");
 
 timer = setInterval(function(){
  var num= Math.floor(Math.random()*mytype.length);
  title.innerHTML=mytype[num];
 },50);
 start.style.background="#ccc";
 
 }
 //点击停止，标题栏停止轮动并输出轮动结果
 function stopFun(){
 var start = document.getElementById("start"),
  txt = document.getElementById("txt"),
  title = document.getElementById("title");
 clearInterval(timer);//清除计时器，停止计时器
 start.style.background="#036";
 }
 
 
 </script>
<body>
 <div>
 <h2 id="title">开始抽奖！</h2>
 </div>
 <div class="btns">
 <span id="start">开始</span>
 <span id="stop">停止</span>
 </div>
 <div id="txt">支持回车键(Enter)开始/停止。</div>
</body>
</html>

效果图：

基于javascript实现简单的抽奖系统

想要学习更多关于javascript抽奖功能，请参考此专题：javascript实现抽奖功能

实现的功能就是这么简单，希望大家可以中大奖哦！

标签：
js,抽奖系统,抽奖
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
评论“基于javascript实现简单的抽奖系统”
暂无“基于javascript实现简单的抽奖系统”评论...
www.imxmx.com 杰晶网络
8,675无损音乐
1,324高清电影
213破解软件
120,141站长资源
一句话新闻
一口气升级7个大模型SaaS应用，百度智能云：突出一个“开箱即用” - 2025/1/21

这一波大模型产业落地浪潮里，不少企业其实处在 “干瞪眼“的状态。

一种情况是，很多大模型产品看得见却摸不着，在台上一个个遥遥领先——今天Sora技精四座，明天英伟达的机器人又赢得满堂彩，可是到了台下一问：啥时候能用上啊？答曰：遥遥无期。

另一种情况是，企业想用上大模型，却又难免瞻前顾后——既要考虑场景融合，又得兼顾安全性，还要考虑打通现有系统，再加上各种部署成本和繁琐的采购流程……最后只能拂袖：罢了，再等等吧。

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

昨天有一位朋友在大神群里分享，自己亚服账号被封号之后居然弹出了国服的封号信息对话框。

这里面让他访问的是一个国服的战网网址，com.cn和后面的zh都非常明白地表明这就是国服战网。

而他在复制这个网址并且进行登录之后，确实是网易的网址，也就是我们熟悉的停服之后国服发布的暴雪游戏产品运营到期开放退款的说明。这是一件比较奇怪的事情，因为以前都没有出现这样的情况，现在突然提示跳转到国服战网的网址，是不是说明了简体中文客户端已经开始进行更新了呢？

更新动态

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网