基于insertBefore制作簡(jiǎn)單的循環(huán)插空效果
更新時(shí)間：2015年09月21日 11:30:38 投稿：mrr
這是一個(gè)基于insertBefore制作簡(jiǎn)單的循環(huán)插空效果，實(shí)現(xiàn)的數(shù)字下面循環(huán)插空效果，給需要的朋友分享。
效果圖展示：
【功能說明】
利用insertBefore制作簡(jiǎn)單的循環(huán)插空效果
【HTML代碼說明】
<ul class="list" id="list"> <li class="in">1</li> <li class="in">2</li> <li class="in">3</li> <li class="in">4</li> <li class="in">5</li> <li class="in">6</li> </ul>
【CSS代碼說明】
.in{
height: 20px;
line-height: 20px;
width: 20px;
background-color: blue;
text-align: center;
color: white;
}
【JS代碼說明】
var oList = document.getElementById('list');
//新增一個(gè)li元素
var oAdd = document.createElement('li');
//設(shè)置新增元素的css樣式
oAdd.className = "in";
oAdd.style.cssText = 'background-color:red;border-radius:50%';
//添加到oList中
oList.insertBefore(oAdd,null);
var num = -1;
var max = oList.children.length;
function incrementNumber(){
num++;
//oList.getElementsByTagName('li')[max]相當(dāng)于null，所以不報(bào)錯(cuò)
oList.insertBefore(oAdd,oList.getElementsByTagName('li')[num]);
if(num == max){
num = -1;
}
if(num == 0){
num = 1;
}
setTimeout(incrementNumber,1000);
}
setTimeout(incrementNumber,1000);
好了，以上就是本文的全部?jī)?nèi)容，代碼很簡(jiǎn)單吧，相信大家都可以看得懂，需要的朋友可以參考下本文，希望大家喜歡。
相關(guān)文章
淺析js實(shí)現(xiàn)網(wǎng)頁截圖的兩種方式
這篇文章主要介紹了淺析js實(shí)現(xiàn)網(wǎng)頁截圖的兩種方式，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Date() 日期對(duì)象是一個(gè)構(gòu)造函數(shù)必須使用new來調(diào)用創(chuàng)建我們的日期對(duì)象,本文給大家介紹JS中的Date()使用小結(jié),感興趣的朋友一起看看吧2024-01-01
本文主要介紹了js跨域的幾種解決方案,主要介紹了8種方式,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)HSL拾色器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
這篇文章介紹了JS圖片切換的具體方法，有需要的朋友可以參考一下2013-11-11
微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機(jī)號(hào)
最近改了一個(gè)公司項(xiàng)目,新增加了一個(gè)獲取用戶手機(jī)號(hào)功能,里面用到了關(guān)于獲取用戶信息和用戶手機(jī)號(hào)的功能,下面這篇文章主要給大家介紹了關(guān)于微信小程序登錄方法之授權(quán)登陸及獲取微信用戶手機(jī)號(hào)的相關(guān)資料,需要的朋友可以參考下2022-07-07
大家都知道在ES7中有了標(biāo)準(zhǔn)的回調(diào)函數(shù)嵌套的解決方案，新增了 async/await兩個(gè)關(guān)鍵詞，所以這篇文章主要給大家介紹了關(guān)于Javascript中如何利用Await減少回調(diào)嵌套的相關(guān)資料，需要的朋友可以參考借鑒，下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-11-11
layer彈出層 iframe層去掉滾動(dòng)條的實(shí)例代碼
今天小編就為大家分享一篇layer彈出層 iframe層去掉滾動(dòng)條的實(shí)例代碼，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-08-08
純JavaScript實(shí)現(xiàn)HTML5 Canvas六種特效濾鏡示例
實(shí)現(xiàn)了六款簡(jiǎn)單常見HTML5 Canvas特效濾鏡，并且封裝成一個(gè)純JavaScript可調(diào)用的API文件gloomyfishfilter.js，程序源代碼如下，感興趣的朋友可以參考下哈2013-06-06
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)課程選擇器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07