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