参考下面写的小程序,是一个跑马灯效果。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>抽奖</title>
<style>
*{margin:0;padding:0;}
#box{width:400px;height:400px;border:2px #C6C solid;margin:20px auto;background:#99F;}
#box>div{position:absolute;width:60px;height:40px;color:#F03;font-size:20px;border:2px #F63 solid;opacity:0.4;line-height:40px;background:#F96;}
#butt{position:absolute;background:#F6C;color:#36F;font-size:16px;margin-top:200px;margin-left:150px;}
#span{width:300px;height:40px;margin-left:160px;display:block;border:2px #F63 solid;float:left;line-height:40px;}
#span i{font-style:normal;}
</style>
</head>
<body>
<span id="span">离抽奖结束还有:<i></i><i></i><i></i><i></i></span>
<div id="box" class="box">
<div>一等奖</div>
<div style="margin-left:336px">二等奖</div>
<div style="margin-left:336px;margin-top:356px;">三等奖</div>
<div style="margin-top:356px;">安慰奖</div>
<button id="butt" onclick="butt()">点击抽奖</button>
</div>
<script type="text/javascript">
var opa=document.getElementById("box").getElementsByTagName("div");
var ii=document.getElementById("span").getElementsByTagName("i");
for(var i=0;i<opa.length;i++){
opa[i].style.opacity=0.4;
}
//var span=document.getElementById("span").style;
var i=0,
t,tt,r,
count1=1,//限制一等奖只中一次,当一等奖抽完后顺延到二等奖
count2=3,//限制二等奖只中3次,当二等奖抽完后顺延到三等奖
count3=10,//限制等奖只中10次
prize=1,//抽奖是否结束
time=200,
curr=0;//每次抽奖完成才能再次点击
var toDate = new Date(2016,7,29,19,55,0);
var dt,currDate;
function obtain(){//倒计时
currDate=new Date();
dt=Math.ceil((toDate.getTime()-currDate.getTime())/1000);<!--转换成s-->
ii[0].innerHTML=parseInt(dt/(24*60*60))+'天';
ii[1].innerHTML=Math.floor(dt%(24*60*60)/(60*60))+'时';
ii[2].innerHTML=Math.floor(dt%(24*60*60)%(60*60)/60)+'分';
ii[3].innerHTML=Math.floor(dt%60)+'秒';
if(dt<=0){
prize=0;
ii[0].innerHTML=0+'天';ii[1].innerHTML=0+'时';ii[2].innerHTML=0+'分';ii[3].innerHTML=0+'秒';
if(prize==0&&s==0){alert("抽奖已结束");clearInterval(tt);}
}
}
tt=setInterval(obtain,1000);
function butt(){
curr++;
if(count1==0&&count2==0&&count3==0){
prize=0;
}
if(curr==1&&prize==1){
if(i!=0){
opa[i].style.opacity=0.4;
}
i=0;
clearInterval(t);
r=parseInt(Math.random()*10000)+1;//产生1-10000的随机数
//r=1;
opa[i].style.opacity=1;
t=setInterval(move,time);
}else if(curr!=1&&prize==1){alert("请等待本次抽奖完成再抽奖");alert("请点击确定继续");}
else if(prize==0){alert("抽奖已结束");}
}
/*function move(r){
switch(r){
case 1:
}
}*/
function move(){
opa[i].style.opacity=0.4;
if(i<opa.length-1){
i++;
}else{i=0;}
opa[i].style.opacity=1;
time+=50;
console.log("r="+r+","+"time="+time);
if(r==1&&count1>0){//中一等奖
clearInterval(t);
t=setInterval(move,time);
if(time==800){
clearInterval(t);
time=200;
count1--;
curr=0;
console.log("中一等奖的次数还有:"+count1+"次");
}
}else if((r%2999==0||r==1&&count1==0)&&count2>0){//中二等奖
clearInterval(t);
t=setInterval(move,time);
if(time==850){
count2--;
clearInterval(t);
time=200;
curr=0;
console.log("中二等奖的次数还有:"+count2+"次");
}
}else if((r%1000==0||r%2999==0&&count2==0||r==1&&count1==0)&&count3>0){//中三等奖
clearInterval(t);
t=setInterval(move,time);
if(time==900){
time=200;
count3--;
clearInterval(t);
curr=0;
console.log("中三等奖的次数还有:"+count3+"次");
}
}else{//安慰奖
clearInterval(t);
t=setInterval(move,time);
if(time==950){
clearInterval(t);
curr=0;
time=200;
}
}
}
</script>
</body>
</html>
❷ 初学者一个很简单的数字抽奖的Javascript有几个不太明白的地方
第一个问题: beginRndNum的参数传递的不是按钮的id
这个问题其实是$()的参数问题,虽然题目中没有明写,这里的$应该是jQuery对象, jquery获取一个dom对应的元素节点有很多种方法,最常见的是传入dom的id,格式是$("#btm"),是一个字符串,字符串内部是一系列特定格式的选择符表示方法;另一种较常见的方式是直接传递dom对象,格式是var domObj = document.getElementById("btn");var jqueryObj = $(domObj),正好对应到此例中的$(this)
所以$(trigger)就等效成了$(document.getElementById("btn")),同样可以控制val()
第二个问题:
三个函数的作用:
updateRndNum只负责生成随机数并更新页面上随机数的展示;
beat 负责触发一次updateRndNum,并每隔一段时间(1ms)在调一下自身(这样子就形成了一直循环的样子) 这里其实有个误区,1ms的精度在浏览器中还达不到
beginTimer 只负责吧beat第一次调起来.
beginRndNum 则负责用户的启动和停止两个动作,启动的时候触发beginTimer,停止的时候关掉beat对应的计时器中止以后的beat调用.
❸ 你好,我网站有一个纯js抽奖页面,我已经实现了可抽奖初始次数等于会员金币数(问题里的php代码)
用AJAX吧,每次抽奖之后跟后台进行交互,获取用户抽奖后金币数~同时后台也需要对用户金币数进行校验,每次抽奖后减少用户金币= =`
varM_Money=<?phpecho$cfg_ml->M_Money;?>;
varC_Money=10;
$('button').click(function(){
if(M_Money>=C_Money){
runCup();
$('button').attr("disabled",true);
$.ajax({
url:'choujiang.php',
data:{res:抽奖结果},
method:'POST',
success:function(res){
M_Money=res.M_Money;
$('button').removeAttr("disabled",true);
//抽奖结果通知
//Todo
}
});
}
else{
alert("亲,抽奖次数已用光!充值金币或点击“邀请好友”");
}
})
❹ js随机抽奖一二三等奖不重复的抽奖逻辑怎么设置
<!DOCTYPEhtml>
<html>
<head>
<title>js随机抽奖一二三等奖不重复的抽奖逻辑怎么设置</title>
<metacharset="UTF-8"/>
<script>
//添加一个随机函数
Math.rand=function(min,max){
functionsubRand(min,max){
min=min?min:0;
max=max?max:9;
varresult=0;
do{
result=Math.random().toString().substr(2,1);
}while(!(result>=min&&result<=max));
returnresult;
}
functiongetBit(maxBit){
maxBit=maxBit?maxBit:max.toString().length;
varresult=[],
count=0;
for(vari=0;i<maxBit;i++){
result.push(subRand());
if(i!=0&&result[i]==result[i-1]){
count++;
}
}
returnmaxBit-count;
}
min=min?min:0;
max=max?max:0;
varresult='',
bit=getBit();
do{
result='';
for(vari=0;i<bit;i++){
result=result+subRand();
}
result=parseInt(result);
}while(!(result>=min&&result<=max));
returnresult;
}
//console.log(Math.rand(0,100));
//LuckDraw抽奖类参数一奖池数组,参数二中奖数量返回中奖索引
functionLuckDraw(pool,numberOfWinners){
varresults=[],
//是否已经中奖
isExists=function(index){
for(vari=0;i<results.length;i++){
if(results[i]==index){
returntrue;
}
}
returnfalse;
},
subLuckDraw=function(){
do{
result=Math.rand(0,pool.length-1);
}while(isExists(result));
returnresult;
}
for(vari=0;i<numberOfWinners;i++){
results.push(subLuckDraw());
}
returnresults;
}
varpool=[
'关',
'张',
'赵',
'马',
'黄',
'曹老板'
];
winners=LuckDraw(pool,3);//返回从奖池中中奖的索引,假设123等奖都只有一名的话各取一个即可
//假设123等奖一等奖1名,二等奖2名,三等奖3名,只需要调用这个函数第二个参数设置为总和6即可
//然后从结果中第一个索引为一等奖23索引为二等奖,456索引为三等奖
console.log(winners);
</script>
</head>
<body>
<script>
for(vari=0;i<winners.length;i++){
document.write(pool[winners[i]]+'恭喜你中了'+(i+1)+'等奖<br/>');
}
</script>
</body>
</html>
❺ 用html5+js 做一个转盘抽奖怎么做,求源码!
5分给你个程序。。。
自己参考改吧
<input type="button" value="开始旋转" onclick="spin();" style="float: left;" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<canvas id="wheelcanvas" width="500" height="500"></canvas>
<script type="application/javascript">
var colors = ["#B8D430", "#3AB745", "#029990", "#3501CB",
"#2E2C75", "#673A7E", "#CC0071", "#F80120",
"#F35B20", "#FB9A00", "#FFCC00", "#FEF200"];
var restaraunts = ["北京", "上海", "天津", "南京",
"杭州", "深圳", "武汉", "济南",
"重庆", "大连", "合肥", "郑洲"];
var startAngle = 0;
var arc = Math.PI / 6;
var spinTimeout = null;
var spinArcStart = 10;
var spinTime = 0;
var spinTimeTotal = 0;
var ctx;
function draw() {
drawRouletteWheel();
}
function drawRouletteWheel() {
var canvas = document.getElementById("wheelcanvas");
if (canvas.getContext) {
var outsideRadius = 200;
var textRadius = 160;
var insideRadius = 125;
ctx = canvas.getContext("2d");
ctx.clearRect(0,0,500,500);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.font = 'bold 12px sans-serif';
for(var i = 0; i < 12; i++) {
var angle = startAngle + i * arc;
ctx.fillStyle = colors[i];
ctx.beginPath();
ctx.arc(250, 250, outsideRadius, angle, angle + arc, false);
ctx.arc(250, 250, insideRadius, angle + arc, angle, true);
ctx.stroke();
ctx.fill();
ctx.save();
ctx.shadowOffsetX = -1;
ctx.shadowOffsetY = -1;
ctx.shadowBlur = 0;
ctx.shadowColor = "rgb(220,220,220)";
ctx.fillStyle = "black";
ctx.translate(250 + Math.cos(angle + arc / 2) * textRadius, 250 + Math.sin(angle + arc / 2) * textRadius);
ctx.rotate(angle + arc / 2 + Math.PI / 2);
var text = restaraunts[i];
ctx.fillText(text, -ctx.measureText(text).width / 2, 0);
ctx.restore();
}
//Arrow
ctx.fillStyle = "black";
ctx.beginPath();
ctx.moveTo(250 - 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius + 5));
ctx.lineTo(250 + 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 + 0, 250 - (outsideRadius - 13));
ctx.lineTo(250 - 9, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius - 5));
ctx.lineTo(250 - 4, 250 - (outsideRadius + 5));
ctx.fill();
}
}
function spin() {
spinAngleStart = Math.random() * 10 + 10;
spinTime = 0;
spinTimeTotal = Math.random() * 3 + 4 * 1000;
rotateWheel();
}
function rotateWheel() {
spinTime += 30;
if(spinTime >= spinTimeTotal) {
stopRotateWheel();
return;
}
var spinAngle = spinAngleStart - easeOut(spinTime, 0, spinAngleStart, spinTimeTotal);
startAngle += (spinAngle * Math.PI / 180);
drawRouletteWheel();
spinTimeout = setTimeout('rotateWheel()', 30);
}
function stopRotateWheel() {
clearTimeout(spinTimeout);
var degrees = startAngle * 180 / Math.PI + 90;
var arcd = arc * 180 / Math.PI;
var index = Math.floor((360 - degrees % 360) / arcd);
ctx.save();
ctx.font = 'bold 30px sans-serif';
var text = restaraunts[index]
ctx.fillText(text, 250 - ctx.measureText(text).width / 2, 250 + 10);
ctx.restore();
}
function easeOut(t, b, c, d) {
var ts = (t/=d)*t;
var tc = ts*t;
return b+c*(tc + -3*ts + 3*t);
}
draw();
</script>
❻ 使用JavaScript完成一个抽奖程序,当单击页面上开始抽奖按钮时,在1~36中选取7个互不相同
1~36个数取7个不同的,需要用while循环+随机数去取出7个数。
在while循环里面,可以判断取出来的数(用switch),是否是28,18,8. 如果有输出相应的奖项,如果没有,就输出其它的。然后将这7个数,打印出来就好了。
JavaScript(缩写为JS)是一种高级的、多范式、解释型的编程语言,是一门基于原型、函数先行的语言,它支持面向对象编程、命令式编程以及函数式编程。
它提供语法来操控文本、数组、日期以及正则表达式,不支持I/O(比如网络、存储和图形等),但可以由它的宿主环境提供支持。它已经由ECMA(欧洲计算机制造商协会)通过ECMAScript实现语言的标准化。它被世界上的绝大多数网站所使用,也被世界主流浏览器支持。
❼ js写抽奖转盘怎么设置中奖几率
js用向后端发送请求,然后后端通过一些算法计算出要中的奖项或者旋转的角度,返回到回前端,js根据返回的奖项或者旋答转的角度,来决定最终停止的位置。
中奖几率基本不写在js里,因为js可以被破解和修改,都是写在后端的。
❽ 怎么用html5实现 抽奖效果
做抽奖,用 Epub360!可视化编辑器,封装组件拼接,完成抽奖活动。
❾ js转盘抽奖求解释里面部分代码的原理
应该是界面效果切换代码
costheta = Math.cos(rad);
sintheta = Math.sin(rad);
是js数学函数
el.style.filter 是IE的滤镜函数,其他浏览器应该无效的版
window.navigator.userAgent.indexOf("Chrome")>=1)
是判断当前使权用的浏览器函数,根据不同浏览器调用不同代码来实现效果
其他的不太清楚了
❿ 求一个用javascript编写的抽奖代码可以循环抽奖!
||IE打开
===================
<html>
<head>
<meta http-equiv="Content-Language" content="zh-cn">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Js模拟抽奖的效果</title>
</head>
<body>
<style type="text/css">
.a1{
position:relative;
font-family:Verdana;
font-size:20px;
color:#889978;
}
</style>
<script language="JavaScript">
function lotto(){
if (!document.all && !document.layers)
return
for (j=1; j < 48; j++)//stop zero!?
{
var a=Math.round(Math.random()*j+1);
var b=Math.round(Math.random()*j+1);
var c=Math.round(Math.random()*j+1);
var d=Math.round(Math.random()*j+1);
var e=Math.round(Math.random()*j+1);
var f=Math.round(Math.random()*j+1);
}
var x=new Array(a,b,c,d,e,f);
if ((x[0] == x[1]) || (x[0] == x[2]) || (x[0] == x[3]) || (x[0] == x[3]) || (x[0] == x[5]) ||
(x[1] == x[2]) || (x[1] == x[3]) || (x[1] == x[4]) || (x[1] == x[5]) ||
(x[2] == x[3]) || (x[2] == x[4]) || (x[2] == x[5]) ||
(x[3] == x[4]) || (x[3] == x[5]) ||
(x[4] == x[5]) || (x[5] == x[4]))
lotto();//restart
else
{
var y=x.toString();
var z=y.split(',');
for (i=0; i < z.length; i++)
{
z[i]=z[i]+" ";
if (z[i].length < 3)//add '0' to singles
z[i]="0"+z[i]+" ";
}
z=z.sort();
Nos=z[0]+z[1]+z[2]+z[3]+z[4]+z[5];
if (document.all)
{document.all.layer1.innerHTML=Nos;}//OR Z!
else if (document.layers)
{
document.layers.layer1.document.open();
document.layers.layer1.document.write("<span style='position:absolute;top:0px;left:0px;font-family:Verdana;font-size:20px;color:#888888;text-align:center'> "+Nos+"</span>");
document.layers.layer1.document.close();
}
T=setTimeout('lotto()',10);
}
}
//-->
</script>
<table border='0' width=250 height=50>
<tr valign='middle'>
<td align='center'>
<form name=form>
<input type=button value='点击看看你有没有中将' onClick="lotto(),setTimeout('clearTimeout(T)',3000)">
</form>
<span id=layer1 class=a1>Result</span>
</td>
</tr>
</table>
</body>
</html>