本文實例為大家分享了jquery輸入數字隨機抽獎特效代碼，供大家參考，具體內容如下
代碼如下：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>jQuery自定義數值抽獎活動代碼 - 何問起</title><base target="_blank" /> <script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js"></script> <script type="text/javascript" src="http://hovertree.com/texiao/jquery/76/pjs_01.js"></script> <style type="text/css"> #bigDiv { width: 1080px; margin: 0px auto; /*div網頁居中*/ 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 >何問起</a><a >特效庫</a><a >代碼說明</a></p> </div></body></html>js文件代碼如下：
/** * Created by 何問起 午后的陽光 on 2016/5/14. */var ran = 0;var range = 0;var myNumber;/*將產生隨機數的方法進行封裝*/function sjs(range) { ran = Math.random() * range;//[0,range)的隨機數 var result = parseInt(ran);//將數字轉換成整數 return result;}/*對顯示隨機數的方法進行封裝*/function showRandomNum() { var figure = sjs(range); $("#first").html(figure); var figure2 = sjs(range); $("#second").html(figure2); var figure3 = sjs(range); $("#third").html(figure3);}$(function () { /*點擊開始按鈕,產生的事件*/ $("#start").click(function () { range = prompt("請輸入隨機數范圍：", "168"); if (range == null)//http://hovertree.com/h/bjaf/3siyd3x7.htm { return; } if (range == 0) { return; } if (isNaN(range))//http://hovertree.com/h/bjaf/9vhm2l4f.htm { alert("請輸入數字"); return ; } /*將開始標簽禁用，停止標簽啟用*/ $("#start")[0].disabled = true; $("#stop")[0].disabled = false; if (range > 9999 || range<-999) { // by 何問起 $("#bigDiv div").css("font-size", "60px");//http://hovertree.com/h/bjaf/omgdn4mu.htm //return; } myNumber = setInterval(showRandomNum, 50);//多長時間運行一次，單位毫秒 }); /*點擊結束按鈕*/ $("#stop").click(function () { /*將開始標簽啟用，停止標簽禁用*/ $("#start")[0].disabled = false; $("#stop")[0].disabled = true; clearInterval(myNumber); });});以上就是，希望對大家學習jquery程序設計有所幫助。
新聞熱點
疑難解答
