欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JS實(shí)現(xiàn)九宮格抽獎效果

 更新時間:2017年04月01日 09:31:37   作者:完美續(xù)航  
本篇文章主要介紹了原生JS實(shí)現(xiàn)九宮格抽獎效果的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧

效果圖:

代碼如下:

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <title></title>
 <style>
 *{margin:0;padding:0;}
 #container{width:310px;height:310px;margin:30px auto;}
 #ul1{width:310px;height:310px;list-style:none;}
 #ul1 li,#ul1 a{width:100px;height:100px;border:1px solid #565656;float:left;text-align:center;line-height:100px;}
 #ul1 a:hover{cursor:pointer;color:orange;font-size:18px;}
 #ul1 .active{background:red;color:#fff;}
 #pp{line-height:32px;color:#9a9a9a;text-align:center;}
 </style>
</head>
<body>
<div id="container">
 <ul id="ul1">
 <li>一等獎</li>
 <li>二等獎</li>
 <li>三等獎</li>
 <li>四等獎</li>
 <a>開始</a>
 <li>五等獎</li>
 <li>六等獎</li>
 <li>七等獎</li>
 <li>八等獎</li>
 </ul>
 <p id="pp"></p>
</div>
<script>
 var container = document.getElementById('container'),
 li = container.getElementsByTagName('li'),
 aa = container.getElementsByTagName('a')[0],
 pp = document.getElementById('pp'),
 timer = null;
 function start(){
 var i = 0;
 var num = Math.floor(Math.random() * li.length) + 20;
 if(i<num){
 timer = setInterval(function(){
 for(var j=0;j<li.length;j++){
  li[j].className = '';
 }
 li[i%li.length].className = 'active';
 i++;
 if(i === num){
  clearInterval(timer);
  if(num%li.length === 0){
  pp.innerHTML += "恭喜您中了:8 等獎" + '<br/>';
  }else{
  pp.innerHTML += "恭喜您中了:"+ parseInt(num%li.length) + " 等獎"+ '<br/>';
  }
 }
 },130);
 }
 }
 aa.onclick = function(){
 start();
 }
</script>
</body>
</html>

以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!

相關(guān)文章

  • ES6中promise詳解及用法實(shí)例

    ES6中promise詳解及用法實(shí)例

    Promise是異步編程的一種解決方案,比傳統(tǒng)的解決方案——回調(diào)函數(shù)和事件——更合理和更強(qiáng)大,下面這篇文章主要給大家介紹了關(guān)于ES6中promise詳解及用法的相關(guān)資料,需要的朋友可以參考下
    2022-11-11
  • js Map List 遍歷使用示例

    js Map List 遍歷使用示例

    在知道的key的情況下遍歷map自然就跟數(shù)組一樣的訪問羅,這里就不說了,示例如下,感興趣的朋友可以參考下哈,希望對大家有所幫助
    2013-07-07
  • 移動端js圖片查看器

    移動端js圖片查看器

    這篇文章主要為大家詳細(xì)介紹了js圖片查看器的制作方法,可以實(shí)現(xiàn)圖片的滑動等效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-11-11
  • javascript關(guān)鍵字加亮加連接

    javascript關(guān)鍵字加亮加連接

    我想在頁面里把想要的關(guān)鍵詞加亮凸出(用顏色區(qū)分出來)顯示,這樣讓客戶一眼能看到重的東西,然后在加亮的關(guān)鍵詞上可以加上超連接.請問高手們怎么實(shí)現(xiàn)宋的功能.就像搜索引擎的那種..搜索關(guān)鍵詞的時候就顯示紅色的.
    2008-06-06
  • promise封裝wx.request的方法

    promise封裝wx.request的方法

    這篇文章主要介紹了promise封裝wx.request的方法,本文給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2021-05-05
  • JS樣式獲取的封裝方法實(shí)例詳解

    JS樣式獲取的封裝方法實(shí)例詳解

    這篇文章主要介紹了JS樣式獲取的封裝方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-09-09
  • JS動畫定時器知識總結(jié)

    JS動畫定時器知識總結(jié)

    這篇文章給大家總結(jié)了關(guān)于JS動畫中定時器的相關(guān)用法以及相關(guān)知識點(diǎn)總結(jié),有需要的朋友可以參考學(xué)習(xí)下。
    2018-03-03
  • Javascript中暫停功能的實(shí)現(xiàn)代碼

    Javascript中暫停功能的實(shí)現(xiàn)代碼

    Javascript中暫停功能的實(shí)現(xiàn)代碼...
    2007-03-03
  • 一文詳解如何在uniapp中優(yōu)雅地使用WebView

    一文詳解如何在uniapp中優(yōu)雅地使用WebView

    最近工作中遇到webview,對于我這個剛接觸前端的小白來說真的不懂啥意思,下面這篇文章主要給大家介紹了關(guān)于如何在uniapp中優(yōu)雅地使用WebView的相關(guān)資料,需要的朋友可以參考下
    2023-01-01
  • Javascript計(jì)算時間差的函數(shù)分享

    Javascript計(jì)算時間差的函數(shù)分享

    獲得時間差,時間格式為 年-月-日 小時:分鐘:秒 或者 年/月/日 小時:分鐘:秒
    2011-07-07

最新評論