分享一下JS写的抽奖功能-可以用于现场、公司内部活动的抽奖

HDHCMS(建网站+客户管理)系统 2013-10-11 11:16:39
JS写的抽奖功能
很简单的JS程序，没有做配置功能
可以用于现场、公司内部活动的抽奖
代码运行效果：http://www.99rfid.com/cj.htm

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>js-test</title>
</head>
<style type=text/css>
.DonforAll{Float:Left;Width:333px;}
.DonforAll .DonforKj{Float:left;Width:110px;height:60px;Padding-Top:30px;Margin:1px auto auto 1px;BackGround:#D6F271;color:#156A00;Font-Weight:600;text-align:center;}
.DonforXs{Float:Left;Width:100%;Font-Weight:600;Font-Size:14px;Height:auto;Clear:both;Color:#ff0000;Padding:0 0 20px 0;}
.Donfor{Float:Left;Width:100%;}
</style>
<script language=javascript>
<!---
var all=8;
var aa;
//document.getElementById("d0").innerHTML="<input type=button value='抽奖' onclick='doexe()'>";
//document.getElementById("d0").innerHTML +=" <input type=button value='停止' onclick='doexit()'>";
function doexe(){
var a=parseInt(Math.random() * 8)+1;
var t=parseInt(Math.random() * 30)+80;
var d=1;
document.getElementById("cjan").style.display="none";
document.getElementById("listjp").innerHTML="<br><br><span style='color:#ff0000;'>抽奖中，请等待····<br><br></span>";
document.getElementById("aa").value=a;
document.getElementById("dd").value=d;
document.getElementById("tt").value=t;
aa=setTimeout("turn()",200);
}
function reexe(){
var a=parseInt(Math.random() * 8)+1;
var t=parseInt(Math.random() * 30)+80;
var d=1;
document.getElementById("cjan").style.display="none";
document.getElementById("aa").value=a;
document.getElementById("dd").value=d;
document.getElementById("tt").value=t;
for(var i=1;i<=all;i++){
//document.getElementById("d"+i).innerHTML="";
document.getElementById("d"+i).style.backgroundColor="#D6F271";
document.getElementById("d"+i).style.color="#ffffff";
}
aa=setTimeout("turn()",200);
}
//a 中奖号
//c 转数
//t 统计数
//d 转的当前号
function turn(){
var a=parseInt(document.getElementById("aa").value);
var d=parseInt(document.getElementById("dd").value);
var t=parseInt(document.getElementById("tt").value);
if(t==1){
for(var i=1;i<=all;i++){
if(i==a){
//document.getElementById("d"+i).innerHTML="<b>中奖了<br>哈哈</b>";
document.getElementById("d"+i).style.backgroundColor="951700";
document.getElementById("d"+i).style.color="#ffffff";
document.getElementById("listjp").innerHTML="<br><br><span style='color:#ff0000;'>恭喜您，您所中的奖品是："+document.getElementById("d"+i).innerHTML +"<br><br></span>";
}else{
//document.getElementById("d"+i).innerHTML="";
document.getElementById("d"+i).style.backgroundColor="#D6F271";
document.getElementById("d"+i).style.color="#156A00";
}
document.getElementById("d0").innerHTML="<input type=button value='重来' id=cjan onclick='reexe()'><input type=button value='停止' onclick='doexit()'>";
}
}else{
//alert(t);
if(d>all)d=1;
for(var i=1;i<=8;i++){
if(i==d){
document.getElementById("d"+i).style.backgroundColor="951700";
document.getElementById("d"+i).style.color="#ffffff";
}else{
document.getElementById("d"+i).style.backgroundColor="#D6F271";
document.getElementById("d"+i).style.color="#156A00";
}
}
d++;
}
t--;
document.getElementById("aa").value=a;
document.getElementById("dd").value=d;
document.getElementById("tt").value=t;
if(t==0){
document.getElementById("cjan").style.display="";
clearTimeout(aa);
}else{
if(t>60){
//alert(t);
aa=setTimeout("turn()",100);
}else{
if(t>20){
aa=setTimeout("turn()",200);
}else{
aa=setTimeout("turn()",500);
}
}
}
}
function doexit(){
document.getElementById("cjan").style.display="";
document.getElementById("listjp").innerHTML="<br><br><span style='color:#ff0000;'>抽奖被中断，无奖项····<br><br></span>";
clearTimeout(aa);
}
//-->
</script>
<body>
<input type=hidden id=aa value=''>
<input type=hidden id=dd value=''>
<input type=hidden id=tt value=''>
<div class=DonforAll>
<div class=DonforKj id="d1">洗衣粉</Div>
<div class=DonforKj id="d2">冰箱</Div>
<div class=DonforKj id="d3">洗衣机</Div>
<div class=DonforKj id="d8">平板</Div>
<div class=DonforKj id="d0" style='text-align:center;color:#2E8600;font-weight:600;cursor:pointer;'>
<input type=button value='抽奖' id=cjan onclick='doexe()'><input type=button value='停止' onclick='doexit()'>
</div>
<div class=DonforKj id="d4">DV</Div>
<div class=DonforKj id="d7">数码相机</Div>
<div class=DonforKj id="d6">IPhone5</Div>
<div class=DonforKj id="d5">液晶电视</Div>
</div>
<div class=DonforXs>抽奖结果如下：</div>
<div id=listjp class=DonforXs>请抽奖或重来-----未抽奖状态</div>
</body>
</html>
...全文
581 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
HDHCMS(建网站+客户管理)系统 2013-10-17
  • 打赏
  • 举报
 回复
这个确实比较简单，我是新手啊，莫笑，呵呵
HDHCMS(建网站+客户管理)系统 2013-10-17
  • 打赏
  • 举报
 回复
一人5分，OVER
HDHCMS(建网站+客户管理)系统 2013-10-15
  • 打赏
  • 举报
 回复
引用 6 楼 T121581 的回复:
想法不错，看完之后 还是有点失望
为啥失望？呵呵。
T121581 2013-10-15
  • 打赏
  • 举报
 回复
想法不错，看完之后 还是有点失望
wg5945 2013-10-14
  • 打赏
  • 举报
 回复
不可以的，我来帮你吧~~
HDHCMS(建网站+客户管理)系统 2013-10-14
  • 打赏
  • 举报
 回复
自己结贴可以么
三石-gary 2013-10-14
  • 打赏
  • 举报
 回复
Null_Reference 2013-10-14
  • 打赏
  • 举报
 回复
HDHCMS(建网站+客户管理)系统 2013-10-14
  • 打赏
  • 举报
 回复
楼上是好人啊
javascript函数的解释
javascript函数的解释，解释了具体函数的功能，一、函数JavaScript函数集合 1.document.write(""); 输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4.一个浏览器窗口中的DOM顺序是:...
qsutil:QsUtil是一个JavaScript查询字符串库，可用于Web应用程序
QsUtil是用于Web应用程序JavaScript实用程序库。 主抽奖正在从地址栏中删除参数： 您是否曾经创建过一个页面，在该页面中传递诸如?updated=1类的查询字符串会显示UI警报？ 如果用户刷新页面，他们是否应该再次看到...
探索 LuckyCanvas：轻量级的JavaScript抽奖组件
探索 LuckyCanvas：轻量级的JavaScript抽奖组件 项目地址:https://gitcode.com/buuing/lucky-canvas 项目简介 LuckyCanvas 是一个基于 JavaScript 和 HTML5 Canvas 开发的开源抽奖组件库。它提供了一种简单、灵活的...
简易抽奖器功能
主要为大家详细介绍了JS实现简单抽奖功能，文中示例代码简洁明了
2.7K Star，酷炫抽奖程序开源了
该项目现在支持使用 Docker 进行部署。Docker 是一个轻量级的容器化平台，可以让您快速地部署、测试和运行应用程序。本文档将向您介绍如何使用 Docker 部署该项目。
JavaScript

87,910

社区成员

224,616

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章