導航:首頁 > 編程語言 > 抽獎js
抽獎js
發布時間：2021-12-09 07:52:34
參考下面寫的小程序，是一個跑馬燈效果。
<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>
與抽獎js相關的資料
- ie9調試js
- javaswing的登錄框
- javapropertiesini
- 執照jsp百度雲
- java02f
- javapdf轉換excel
- 養生搞笑程序員
- 造夢西遊3粉色氣球代碼
- java根據實體得到service
- java用ftp做數據傳輸方案
- iso響應手機qq代碼
- requirejs壓縮
- 程序改名插件
- 32位程序64位jdk
- java開發去小公司好嗎
- 怎樣添加win7程序圖標
- js多組圖片滾動
- jsreference
- java交行面試題
- javatext包
- 各類程序設計語言中哪種程序執行效率最高
- arcgisjs移動
- java多線程監聽
- javalistmap
- qq頭像掛件絕版代碼
- stm8s103源程序
- js12和K9
- 考勤登記管理系統java
- java漢字轉utf8
- eclipsejava可執行
- js遍歷對象集合
- html5和java
- java調用已有的dll
- 怎麼取消母版頁的js引用
- ios代碼怎麼實現內存清理
- 微信小程序和原生app
- jsp頁面添加滾動條
- launchpad應用程序
- java命令行運行class
- 造夢西遊3避水珠代碼
- java圖形數組
- javacookie客戶端生成唯一