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

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

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

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

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

運行效果如下圖所示：

具體代碼如下：

<!DOCTYPE html>
<html lang="zh">
<head>
<title>抽獎程序</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">開始抽獎</button>
<button onClick="clearInterval(timer);" value="Stop" style="width:100px;height:30px">停止</button>
<div id="testtime" style="font-size:25px"></div>
</html>

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

您可能感興趣的文章:

js
抽獎

相關(guān)文章

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