js實現(xiàn)網(wǎng)頁抽獎實例
本文實例講述了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è)計有所幫助。
相關(guān)文章
JavaScript邏輯運算符相關(guān)總結(jié)
這篇文章主要介紹了JavaScript邏輯運算符的相關(guān)資料,幫助大家更好的理解和學(xué)習(xí)JavaScript,感興趣的朋友可以了解下2020-09-09mui開發(fā)中獲取單選按鈕、復(fù)選框的值(實例講解)
下面小編就為大家?guī)硪黄猰ui開發(fā)中獲取單選按鈕、復(fù)選框的值(實例講解)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-07-07在JavaScript中call()與apply()區(qū)別
這篇文章主要介紹了在JavaScript中call()與apply()區(qū)別 的相關(guān)資料,需要的朋友可以參考下2016-01-01使用PHP+JavaScript將HTML頁面轉(zhuǎn)換為圖片的實例分享
這篇文章主要介紹了使用PHP+JavaScript將HTML元素轉(zhuǎn)換為圖片的實例分享,文后結(jié)果的截圖只能體現(xiàn)出替換的字體,也不能說將靜態(tài)頁面轉(zhuǎn)為圖片可以加快加載,只是這種做法比較interesting XD需要的朋友可以參考下2016-04-04新手快速學(xué)習(xí)JavaScript免費教程資源匯總
這篇文章主要介紹了新手快速學(xué)習(xí)JavaScript免費教程資源匯總,都是非常不錯的學(xué)習(xí)站點,有需要的小伙伴可以參考下。2015-06-06js將列表組裝成樹結(jié)構(gòu)的兩種實現(xiàn)方式分享
最近做的任務(wù)提了新的需求,需要實現(xiàn)一個樹形結(jié)構(gòu),所以下面這篇文章主要給大家介紹了關(guān)于js將列表組裝成樹結(jié)構(gòu)的兩種實現(xiàn)方式,需要的朋友可以參考下2022-01-01