如何寫抽獎程式?

Tags: 照片, 程式,

使用簡單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:

抽獎

到此,建立檔案完畢,如圖所示。

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

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

如何寫抽獎程式

如何寫抽獎程式

如何寫抽獎程式

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

如何寫抽獎程式

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

如何寫抽獎程式

相關問題答案