如何寫抽獎程序

使用簡單html + js 製作照片隨機抽獎程序.

應用場景有各種場合的抽獎,比如同學會上。

方法/步驟

在電腦的隨便個地方(比如桌面)創建新的文件夾,命名為 抽獎 (名字沒關係)。

打開這個文件夾。繼續創建以下幾個文件。

在打開的文件空白地方右鍵新建一個文件夾命名問photo,放入同學當年(小學初中高中)的照片,每張照片以該同學的名字命名,後綴名都需要是 .jpg。

回到文件夾「抽獎」下,獎製作一張背景圖(詳看各種ps經驗)放於改文件夾下,命名為 background.JPG。

右鍵新建文本文檔,連同後綴名在內,將名稱命名為 cj.js

其內容如下:

var arrAllNames=["張三","李四","王五","這裡","將","同學們","的","名字","逐一","打入","這個","數組","格式","就像","這樣"];

var a = 0;

function Inital()

{

document.getElementById("main_body").background = "background.JPG";

}

function funDisplayName()

{

alert(funGetName());

}

function funGetName()

{

var str=decodeURIComponent(document.getElementById("imgFace").src);

var idx1=str.lastIndexOf(".");

var idx2=str.lastIndexOf("/");

var filename=str.substring(idx2+1,idx1);

return filename;

}

function funclick(ipt)

{

var btnTitle="";

if(ipt.value=="開始")

btnTitle="停";

else

btnTitle="開始";

ipt.value=btnTitle;

if(btnTitle=="開始")

{

var timerid=parseInt(document.getElementById("txtTimerID").value);

if(isNaN(timerid))

{

window.clearInterval()

}

else

{

window.clearInterval(timerid)

}

arrAllNames.splice(a,1);

}

if(btnTitle=="停")

{

a=0;

document.getElementById("txtTimerID").value=window.setInterval(

function()

{

a++;

if(a==arrAllNames.length) {a=0;}

document.getElementById("imgFace").src = "photos/"+arrAllNames[a]+".jpg";

},100)

}

}

新建文本文檔,其內容如下,複製好後,將全稱改為 抽獎.htm:

<html>

<head>

<title>抽獎</title>

<meta http-equiv="Content-Type" content="text/html;charset=utf-8">

<script src="cj.js" ></script>

</head>

<body id="main_body" onload="Inital()" style="background-size: cover;">

<form id="Form1" method="post" runat="server">

<table align="right">

<tr>

<td height="400px">

<img id="imgFace" src="" width="384px" height="569px"/>

</td>

<td width="100px"></td>

</tr>

<tr>

<td colspan="2">

<input type="button" id="btn1"  value="開始" onclick="funclick(this); return; " >

<input type="hidden" id="txtTimerID">

<input type="hidden" id="txtAllEmpName">

<select>

<option value="1">一等獎</option>

<option value="2">二等獎</option>

<option value="3">三等獎</option>

</select>

<input type="button" id="btnShowName" value="顯示名字" onclick="funDisplayName();return;">

</td>

</tr>

</table>

</form>

</body>

</html>

到此,創建文件完畢,如圖所示。

雙擊 抽獎.htm,如果默認是ie瀏覽器,有可能會出現如圖,需要點擊【允許阻止的內容】,其他瀏覽器一般沒問題。

隨後彈出的窗口點【是】,出現如紅色圖所示。

點擊【開始】,照片自動跳轉,再點【停】,這時候可以讓同學們猜下這位同學是誰。然後點擊【顯示名字】。

調節照片跳轉的頻率在cj.js。如圖位置。100就是0.1秒切換一次,這裡可以自由設置,然後保存刷新頁面,效果即顯。

本文內容整理自網絡, 文中所有觀點看法不代表淘大白的立場