簡介：jQuery自定義數(shù)值抽獎活動代碼是一款點擊開始按鈕計算機(jī)會產(chǎn)生玩家輸入范圍內(nèi)的隨機(jī)數(shù)，點擊停止按鈕，將顯示數(shù)字最終結(jié)果的效果。
效果圖如下：
代碼如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jQuery自定義數(shù)值抽獎活動代碼 - 武林網(wǎng)</title><base target="_blank" /> <script type="text/javascript" src="http://down.yulu.VeVB.COm/jquery/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="http://yulu.VeVB.COm/texiao/jquery/76/pjs_01.js"></script> <style type="text/css"> #bigDiv { width: 1080px; margin: 0px auto; /*div網(wǎng)頁居中*/ background-color: #494949; color: #FFFFFF; } h1 { text-align: center; /*文本居中*/ padding-top: 10px; } #first, #second, #third { width: 360px; height: 360px; font-size: 150px; line-height: 360px; text-align: center; float: left; /*讓三個盒子左浮動*/ } #first { background-color: #009BFF; opacity: 0.9; } #second { background-color: #007CCC; } #third { background-color: #005388; } input { font-size: 30px; font-weight: 900; } #start { margin-left: 40%; margin-right: 5%; }a{color:blue;} </style></head><body> <div id="bigDiv"> <h1>玩家幸運抽獎活動</h1> <div id="first"></div> <div id="second"></div> <div id="third"></div> <input type="button" value="開始" id="start"> <input type="button" value="停止" id="stop" disabled="disabled"> </div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';"> <p>適用瀏覽器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.</p> <p>來源： <a >武林網(wǎng)</a><a >特效庫</a><a >代碼說明</a></p> </div></body></html>js文件代碼如下：
var ran = 0;var range = 0;var myNumber;/*將產(chǎn)生隨機(jī)數(shù)的方法進(jìn)行封裝*/function sjs(range) { ran = Math.random() * range;//[0,range)的隨機(jī)數(shù) var result = parseInt(ran);//將數(shù)字轉(zhuǎn)換成整數(shù) return result;}/*對顯示隨機(jī)數(shù)的方法進(jìn)行封裝*/function showRandomNum() { var figure = sjs(range); $("#first").html(figure); var figure2 = sjs(range); $("#second").html(figure2); var figure3 = sjs(range); $("#third").html(figure3);}$(function () { /*點擊開始按鈕,產(chǎn)生的事件*/ $("#start").click(function () { range = prompt("請輸入隨機(jī)數(shù)范圍：", "168"); if (range == null)//http://yulu.VeVB.COm/h/bjaf/3siyd3x7.htm { return; } if (range == 0) { return; } if (isNaN(range))//http://yulu.VeVB.COm/h/bjaf/9vhm2l4f.htm { alert("請輸入數(shù)字"); return ; } /*將開始標(biāo)簽禁用，停止標(biāo)簽啟用*/ $("#start")[0].disabled = true; $("#stop")[0].disabled = false; if (range > 9999 || range<-999) { // by 何問起 $("#bigDiv div").css("font-size", "60px");//http://yulu.VeVB.COm/h/bjaf/omgdn4mu.htm //return; } myNumber = setInterval(showRandomNum, 50);//多長時間運行一次，單位毫秒 }); /*點擊結(jié)束按鈕*/ $("#stop").click(function () { /*將開始標(biāo)簽啟用，停止標(biāo)簽禁用*/ $("#start")[0].disabled = false; $("#stop")[0].disabled = true; clearInterval(myNumber); });});以上這篇jquery輸入數(shù)字隨機(jī)抽獎特效的簡單實現(xiàn)代碼就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持武林網(wǎng)。
新聞熱點
疑難解答
