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)簽

<!-- 無序列表 -->
<ul id="list">
	
</ul>

2.通過js獲取到id等于list的標(biāo)簽定義一個(gè)空字符串用來連接增加的標(biāo)簽，并展示出來

如圖的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表示無標(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 加載過程與使用方法介紹
require.js是javascript模塊化編程中常用的一個(gè)JS庫。這篇文章主要介紹了require.js 加載過程與使用方法,需要的朋友可以參考下
2018-10-10
詳解如何在Javascript中使用Object.freeze()
這篇文章主要介紹了詳解如何在Javascript中使用Object.freeze()，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
JavaScript實(shí)現(xiàn)生成隨機(jī)密碼的示例詳解
使用JavaScript我們可以輕松地在客戶端生成隨機(jī)密碼,本文我們將實(shí)現(xiàn)一個(gè)簡單的隨機(jī)密碼生成器,能夠生成指定長度和包含特定字符集的密碼,有需要的可以參考下
2024-01-01
詳解Howler.js Web音頻播放終極解決方案
這篇文章主要介紹了詳解Howler.js Web音頻播放終極解決方案,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-08-08
JS模擬按鈕點(diǎn)擊功能的方法
這篇文章主要介紹了JS模擬按鈕點(diǎn)擊功能的方法,結(jié)合實(shí)例形式分析了JavaScript模擬點(diǎn)擊按鈕事件的實(shí)現(xiàn)技巧,并附帶了JavaScript模擬點(diǎn)擊鏈接的實(shí)現(xiàn)方法,需要的朋友可以參考下
2015-12-12
理解JavaScript中的事件
理解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中獲取父窗口中表單的值(示例代碼)
這篇文章主要介紹了在Iframe中獲取父窗口中表單的值(示例代碼)。需要的朋友可以過來參考下，希望對(duì)大家有所幫助
2013-11-11
七種JS實(shí)現(xiàn)數(shù)組去重的方式
這篇文章主要介紹了七種JS實(shí)現(xiàn)數(shù)組去重的方式，下面文章以JS數(shù)組去重的相關(guān)資料展開全文內(nèi)容，具有一定的參考價(jià)值，需要的小伙伴可以參考一下
2021-12-12