JS實現簡單的抽獎轉盤效果示例
更新時間：2019年02月16日 11:53:01 作者：s_psycho
這篇文章主要介紹了JS實現簡單的抽獎轉盤效果,涉及javascript數值計算與頁面元素屬性動態(tài)操作相關實現技巧,需要的朋友可以參考下
本文實例講述了JS實現簡單的抽獎轉盤效果。分享給大家供大家參考，具體如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>chabaoo.cn JS抽獎轉盤</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">點擊抽獎</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>
使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試上述代碼，可得如下運行效果：
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript數學運算用法總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript數組操作技巧總結》、《JavaScript排序算法總結》、《JavaScript遍歷算法與技巧總結》、《JavaScript查找算法技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
相關文章
Bootstrap是twitter的工程師在業(yè)余時間開發(fā)的，是一款目前非常流行的前端框架。本文給大家介紹第一篇初識bootstrap的相關知識，非常不錯具有參考借鑒價值，感興趣的朋友一起學習吧2016-06-06
這篇文章主要介紹了js壓縮利器2007-02-02
Three.js?中的屏幕空間環(huán)境光遮蔽SSAO
這篇文章主要為大家介紹了Three.js?中屏幕空間環(huán)境光遮蔽SSAO的原理及實現解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-04-04
這篇文章主要介紹了JavaScript中的函數的相關資料，幫助大家更好的理解和學習JavaScript，感興趣的朋友可以了解下2020-09-09
這篇文章主要為大家詳細介紹了如何通過JavaScript實現簡單的電子簽名功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-11-11
原生Javascript實現繼承方式及其優(yōu)缺點詳解
JS作為面向對象的弱類型語言,繼承也是其非常強大的特性之一,那么這篇文章主要給大家介紹了關于原生Javascript實現繼承方式及其優(yōu)缺點的相關資料,需要的朋友可以參考下2021-07-07
這篇文章主要介紹了Openlayers3實現車輛軌跡回放功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-09-09
很多瀏覽器都有自動填寫功能，我在input上使用了autocomplete="off"，但在有的瀏覽器上還是被記住了用戶名跟密碼，請問有沒有更有效及簡便的方法來防止瀏覽器記住用戶名及密碼2013-04-04
TypeScript是一種由微軟開發(fā)的自由開源的編程語言,主要提供了類型系統(tǒng)和對ES6的支持,下面這篇文章主要給大家介紹了關于TypeScript快速上手語法及結合vue3用法的相關資料,需要的朋友可以參考下2024-02-02
console.log()、alert()?都是JavaScript中用于在開發(fā)過程中輸出信息或向用戶顯示消息的不同方法,它們的主要區(qū)別在于目的、使用場景以及展示方式,本文將給大家介紹JavaScript?中怎么看數據返回值,需要的朋友可以參考下2024-07-07