快捷導(dǎo)航

JS實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)轉(zhuǎn)盤(pán)效果示例

更新時(shí)間：2019年02月16日 11:53:01 作者：s_psycho

這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)轉(zhuǎn)盤(pán)效果,涉及javascript數(shù)值計(jì)算與頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)簡(jiǎn)單的抽獎(jiǎng)轉(zhuǎn)盤(pán)效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>www.dbjr.com.cn JS抽獎(jiǎng)轉(zhuǎn)盤(pán)</title>
  <style>
  *{
    margin:0;
    padding:0;
    list-style: none;
  }
    .big{
      width: 318px;
      height: 318px;
      margin:100px auto;
    }
    .big>div{
      width: 100px;
      height: 100px;
      background: pink;
      float: left;
      line-height: 100px;
      text-align: center;
      border: solid;
    }
    .big>div:nth-of-type(5){
      background: yellow;
      cursor: pointer;
    }
    #act{
      background: red;
    }
  </style>
</head>
<body>
<div class="big">
  <div class="small" id="act">1</div>
  <div class="small">2</div>
  <div class="small">3</div>
  <div class="small">8</div>
  <div id="cj">點(diǎn)擊抽獎(jiǎng)</div>
  <div class="small">4</div>
  <div class="small">7</div>
  <div class="small">6</div>
  <div class="small">5</div>
</div>
<script>
  var arrDiv=document.getElementsByClassName("small");
  var oCj=document.getElementById("cj");
  var num=0;
  var shijian=Math.random()*5000+3200;
  oCj.onclick=function(){
    oTime=setInterval(dianji,200);
  }
  function dianji() {
    num=num+1;
    if (num>arrDiv.length-1){
      num=0
    }
    for(j=0;j<arrDiv.length;j++){
      arrDiv[j].id="";
    }
    arrDiv[num].id="act";
    setTimeout(tingzhi,shijian);
    function tingzhi() {
      clearInterval(oTime)
    }
   }
</script>
</body>
</html>

使用在線(xiàn)HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼，可得如下運(yùn)行效果：

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專(zhuān)題：《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript數(shù)組操作技巧總結(jié)》、《JavaScript排序算法總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

第一篇初識(shí)bootstrap
Bootstrap是twitter的工程師在業(yè)余時(shí)間開(kāi)發(fā)的，是一款目前非常流行的前端框架。本文給大家介紹第一篇初識(shí)bootstrap的相關(guān)知識(shí)，非常不錯(cuò)具有參考借鑒價(jià)值，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
js壓縮利器
這篇文章主要介紹了js壓縮利器
2007-02-02
Three.js?中的屏幕空間環(huán)境光遮蔽SSAO
這篇文章主要為大家介紹了Three.js?中屏幕空間環(huán)境光遮蔽SSAO的原理及實(shí)現(xiàn)解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-04-04
談?wù)凧avaScript中的函數(shù)
這篇文章主要介紹了JavaScript中的函數(shù)的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)JavaScript，感興趣的朋友可以了解下
2020-09-09
基于JavaScript實(shí)現(xiàn)電子簽名功能
這篇文章主要為大家詳細(xì)介紹了如何通過(guò)JavaScript實(shí)現(xiàn)簡(jiǎn)單的電子簽名功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2022-11-11
原生Javascript實(shí)現(xiàn)繼承方式及其優(yōu)缺點(diǎn)詳解
JS作為面向?qū)ο蟮娜躅?lèi)型語(yǔ)言,繼承也是其非常強(qiáng)大的特性之一,那么這篇文章主要給大家介紹了關(guān)于原生Javascript實(shí)現(xiàn)繼承方式及其優(yōu)缺點(diǎn)的相關(guān)資料,需要的朋友可以參考下
2021-07-07
Openlayers3實(shí)現(xiàn)車(chē)輛軌跡回放功能
這篇文章主要介紹了Openlayers3實(shí)現(xiàn)車(chē)輛軌跡回放功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
防止瀏覽器記住用戶(hù)名及密碼的簡(jiǎn)單實(shí)用方法
很多瀏覽器都有自動(dòng)填寫(xiě)功能，我在input上使用了autocomplete="off"，但在有的瀏覽器上還是被記住了用戶(hù)名跟密碼，請(qǐng)問(wèn)有沒(méi)有更有效及簡(jiǎn)便的方法來(lái)防止瀏覽器記住用戶(hù)名及密碼
2013-04-04
TypeScript快速上手語(yǔ)法及結(jié)合vue3用法詳解
TypeScript是一種由微軟開(kāi)發(fā)的自由開(kāi)源的編程語(yǔ)言,主要提供了類(lèi)型系統(tǒng)和對(duì)ES6的支持,下面這篇文章主要給大家介紹了關(guān)于TypeScript快速上手語(yǔ)法及結(jié)合vue3用法的相關(guān)資料,需要的朋友可以參考下
2024-02-02
JavaScript查看數(shù)據(jù)返回值的方法
console.log()、alert()?都是JavaScript中用于在開(kāi)發(fā)過(guò)程中輸出信息或向用戶(hù)顯示消息的不同方法,它們的主要區(qū)別在于目的、使用場(chǎng)景以及展示方式,本文將給大家介紹JavaScript?中怎么看數(shù)據(jù)返回值,需要的朋友可以參考下
2024-07-07