js動態(tài)添加帶圓圈序號列表的實例代碼
更新時間：2021年02月18日 11:11:01 作者：一晃的春夏秋冬
這篇文章主要介紹了js動態(tài)添加帶圓圈序號列表的實例代碼,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
1.先在body里面添加ul標簽
<!-- 無序列表 --> <ul id="list"> </ul>
2.通過js獲取到id等于list的標簽 定義一個空字符串用來連接增加的標簽，并展示出來
如圖的js代碼展示的是前三個顏色不同，余下的顏色相同的圓圈序號
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樣式修改
/*設置列表樣式*/
ul{
list-style-type: none;
}
list-style-type: none表示無標識，屬性也有空心圓、實心方塊、數字等
序號排的整齊需要設置span的樣式
/*設置為行內塊狀元素*/
li span{
display:inline-block;
}
效果如下圖所示
到此這篇關于js動態(tài)添加帶圓圈序號列表的文章就介紹到這了,更多相關js動態(tài)添加序號列表內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
本篇文章主要是對JS二維數組的定義進行了說明介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
本篇主要是對js二維數組排序的簡單示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
不能把JavaScript中的類型轉換看作為強制類型轉換。2010-08-08
在學習JavaScript中的繼承機制時,我們常常會遇到原型和原型鏈這兩個概念,在初學階段,不理解這些概念很容易陷入迷茫,甚至會導致學習 JS 的路程變得曲折,本文將介紹JavaScript原型和原型鏈的概念、設計思想以及相關的使用方法,需要的朋友可以參考下2023-07-07
下面小編就為大家?guī)硪黄猨s 事件的傳播機制(實例講解)。小編覺得挺不錯的，現在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
隨便打開一個網頁，基本上都會看到無縫滾動或者輪播圖，比如淘寶還有360官網的首頁。那么這些滾動效果是怎么實現的呢？下面小編給大家分享關于網頁中的無縫滾動的js代碼，感興趣的朋友一起看下吧2016-06-06
這篇文章主要為大家詳細介紹了大轉盤抽獎小程序版和網頁版，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-01-01
這篇文章主要為大家詳細介紹了javascript利用canvas實現鼠標拖拽功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-07-07
使用JS前端加密庫sm-crypto實現國密sm2、sm3和sm4加密與解密
這篇文章主要介紹了使用JS前端加密庫sm-crypto實現國密sm2、sm3和sm4加密與解密,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了Bootstrap整體框架之JavaScript插件架構的相關資料，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12