快捷導(dǎo)航

js實(shí)現(xiàn)網(wǎng)頁抽獎(jiǎng)實(shí)例

更新時(shí)間：2015年08月05日 17:46:06 作者：皮蛋

這篇文章主要介紹了js實(shí)現(xiàn)網(wǎng)頁抽獎(jiǎng)的方法,實(shí)例分析了javascript隨機(jī)數(shù)及時(shí)間函數(shù)的相關(guān)使用技巧,非常簡單實(shí)用,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)網(wǎng)頁抽獎(jiǎng)的方法。分享給大家供大家參考。具體如下：

這段網(wǎng)頁抽獎(jiǎng)程序，基于javascript代碼實(shí)現(xiàn)，簡單的演示如何使用JS來實(shí)現(xiàn)抽獎(jiǎng)功能，點(diǎn)擊“開始抽獎(jiǎng)”按鈕，程序即開始抽獎(jiǎng)了，需要停止的時(shí)候按“停止”，以前發(fā)過類似的抽獎(jiǎng)程序有幾個(gè)了，有興趣的自己在本站網(wǎng)頁特效欄目搜索“抽獎(jiǎng)”看下。

運(yùn)行效果如下圖所示：

具體代碼如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<title>抽獎(jiǎng)程序</title>
<script type="text/javascript"> 
var randNum=Math.random()*10;
function testTime(){
document.getElementById("testtime").innerHTML="<h2>"+Math.floor(Math.random()*10)+"</h2>";
}
function setTime(mark){
timer=null;
timer=setInterval(testTime,12);
if(mark=='stop'){
  clearInterval(timer);
}
return timer;
}
function clearTime(timer){ }
</script>
<style type="text/css">
<!--
body {font-family: Arial;color:#fff;margin: 0px;padding: 0px;background:#000;text-align:center;}
#happyness{font-size:186px;line-height:186px;margin-top:100px;}
-->
</style>
</head>
<body>
</body>
<button onClick="timer=setInterval(testTime,12);" value="" style="width:100px;height:30px">開始抽獎(jiǎng)</button>
<button onClick="clearInterval(timer);" value="Stop" style="width:100px;height:30px">停止</button>
<div id="testtime" style="font-size:25px"></div>
</html>

希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

原生js實(shí)現(xiàn)輪播圖的示例代碼
本篇文章主要介紹了原生js實(shí)現(xiàn)輪播圖的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-02-02
javascript屏蔽右鍵代碼
屏蔽右鍵在某些特殊的情況下還是比較有用的，下面與大家分享個(gè)常用的屏蔽方法
2014-05-05
數(shù)據(jù)結(jié)構(gòu)中的各種排序方法小結(jié)(JS實(shí)現(xiàn))
下面小編就為大家?guī)硪黄獢?shù)據(jù)結(jié)構(gòu)中的各種排序方法小結(jié)(JS實(shí)現(xiàn))。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-07-07
通過js簡單實(shí)現(xiàn)將一個(gè)文本內(nèi)容轉(zhuǎn)譯成加密文本
將文本內(nèi)容轉(zhuǎn)譯成加密文本，在某些情況下還是比較實(shí)用的，下面通過js簡單實(shí)現(xiàn)下，感興趣的朋友不要錯(cuò)過
2013-10-10
基于MVC方式實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)(JavaScript)
這篇文章主要為大家詳細(xì)介紹了基于MVC方式實(shí)現(xiàn)三級(jí)聯(lián)動(dòng)的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-01-01
利用JavaScript實(shí)現(xiàn)檢測用戶是否在線功能
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)檢測用戶是否在線功能，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下
2022-12-12
分享純手寫漂亮的表單驗(yàn)證
最近沒有項(xiàng)目做，閑來沒事，于是自己動(dòng)手寫了幾個(gè)表單驗(yàn)證，特此分享供大家參考
2015-11-11
JS中的6種打斷點(diǎn)的方式實(shí)例總結(jié)
斷點(diǎn)調(diào)試是啥?難不難? 斷點(diǎn)調(diào)試其實(shí)并不是多么復(fù)雜的一件事,簡單的理解無外呼就是打開瀏覽器,打開sources找到j(luò)s文件,在行號(hào)上點(diǎn)一下罷了,下面這篇文章主要給大家介紹了關(guān)于JS中6種打斷點(diǎn)方式的相關(guān)資料,需要的朋友可以參考下
2022-04-04
js 計(jì)數(shù)排序的實(shí)現(xiàn)示例(升級(jí)版)
這篇文章主要介紹了js 計(jì)數(shù)排序的實(shí)現(xiàn)示例(升級(jí)版),文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-01-01
js實(shí)現(xiàn)響應(yīng)按鈕點(diǎn)擊彈出可拖拽的非模態(tài)對(duì)話框完整實(shí)例【測試可用】
這篇文章主要介紹了js實(shí)現(xiàn)響應(yīng)按鈕點(diǎn)擊彈出可拖拽的非模態(tài)對(duì)話框,結(jié)合完整實(shí)例形式分析了原生JavaScript實(shí)現(xiàn)的可拖拽非模態(tài)對(duì)話框?qū)崿F(xiàn)技巧與使用方法,需要的朋友可以參考下
2023-04-04