js動(dòng)態(tài)添加帶圓圈序號(hào)列表的實(shí)例代碼
更新時(shí)間：2021年02月18日 11:11:01 作者：一晃的春夏秋冬
這篇文章主要介紹了js動(dòng)態(tài)添加帶圓圈序號(hào)列表的實(shí)例代碼,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
1.先在body里面添加ul標(biāo)簽
<!-- 無(wú)序列表 --> <ul id="list"> </ul>
2.通過(guò)js獲取到id等于list的標(biāo)簽 定義一個(gè)空字符串用來(lái)連接增加的標(biāo)簽，并展示出來(lái)
如圖的js代碼展示的是前三個(gè)顏色不同，余下的顏色相同的圓圈序號(hào)
function autoAddList(){
var oUl = document.getElementById('list');
// var arr = ['湖南','廣西','新疆','上海']
var str = "";
for (let i = 1; i < 13; i++) {
if (i == 1) {
str += '<li><a style="color: white"><span id="listOne" style="background-color: rgb(187, 7, 7)">' + i + '</span></a></li>' + '<br>';
}else if (i == 2) {
str += '<li><span style="background-color: #ffad33">' + i + '</span></li>' + '<br>';
}else if (i == 3) {
str += '<li><span style="background-color: green">' + i + '</span></li>' + '<br>';
}else{
str += '<li><span style="background-color: #339cff">' + i + '</span></li>' + '<br>';
}
}
oUl.innerHTML = str;
}
3.css樣式修改
/*設(shè)置列表樣式*/
ul{
list-style-type: none;
}
list-style-type: none表示無(wú)標(biāo)識(shí)，屬性也有空心圓、實(shí)心方塊、數(shù)字等
序號(hào)排的整齊需要設(shè)置span的樣式
/*設(shè)置為行內(nèi)塊狀元素*/
li span{
display:inline-block;
}
效果如下圖所示
到此這篇關(guān)于js動(dòng)態(tài)添加帶圓圈序號(hào)列表的文章就介紹到這了,更多相關(guān)js動(dòng)態(tài)添加序號(hào)列表內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
JavaScript數(shù)組排序reverse()和sort()方法詳解
這篇文章主要介紹了JavaScript數(shù)組排序reverse()和sort()方法詳解,需要的朋友可以參考下2017-12-12
require.js是javascript模塊化編程中常用的一個(gè)JS庫(kù)。這篇文章主要介紹了require.js 加載過(guò)程與使用方法,需要的朋友可以參考下2018-10-10
詳解如何在Javascript中使用Object.freeze()
這篇文章主要介紹了詳解如何在Javascript中使用Object.freeze()，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
JavaScript實(shí)現(xiàn)生成隨機(jī)密碼的示例詳解
使用JavaScript我們可以輕松地在客戶端生成隨機(jī)密碼,本文我們將實(shí)現(xiàn)一個(gè)簡(jiǎn)單的隨機(jī)密碼生成器,能夠生成指定長(zhǎng)度和包含特定字符集的密碼,有需要的可以參考下2024-01-01
這篇文章主要介紹了詳解Howler.js Web音頻播放終極解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
這篇文章主要介紹了JS模擬按鈕點(diǎn)擊功能的方法,結(jié)合實(shí)例形式分析了JavaScript模擬點(diǎn)擊按鈕事件的實(shí)現(xiàn)技巧,并附帶了JavaScript模擬點(diǎn)擊鏈接的實(shí)現(xiàn)方法,需要的朋友可以參考下2015-12-12
理解JavaScript中的事件...2006-09-09
js構(gòu)造函數(shù)constructor和原型prototype原理與用法實(shí)例分析
這篇文章主要介紹了js構(gòu)造函數(shù)constructor和原型prototype原理與用法,結(jié)合實(shí)例形式分析js構(gòu)造函數(shù)constructor和原型prototype基本原理、功能、使用方法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
這篇文章主要介紹了在Iframe中獲取父窗口中表單的值(示例代碼)。需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-11-11
這篇文章主要介紹了七種JS實(shí)現(xiàn)數(shù)組去重的方式，下面文章以JS數(shù)組去重的相關(guān)資料展開(kāi)全文內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下2021-12-12