js动态添加带圆圈序号列表的实例代码

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动态添加带圆圈序号列表的文章就介绍到这了,更多相关js动态添加序号列表内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JS实现为动态添加的元素增加事件功能示例【基于事件委托】

    JS实现为动态添加的元素增加事件功能示例【基于事件委托】

    本文实例讲述了JS实现为动态添加的元素增加事件功能.分享给大家供大家参考,具体如下: 我们在日常开发中有时会通过js创建一些元素,但是如果使用原始的for循环给创建的节点添加事件的方法往往行不通: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net js动态添加事件</title>

  • JS简单实现动态添加HTML标记的方法示例

    JS简单实现动态添加HTML标记的方法示例

    本文实例讲述了JS简单实现动态添加HTML标记的方法.分享给大家供大家参考,具体如下: 一 介绍 动态添加一个HTML标记可以使用createElement()方法来实现. CreateElement()方法可以根据一个指定的类型来创建一个HTML标记. 语法: sElement=document.createElement(sName) sElement:用来接收该方法返回的一个对象. sName:用来设置HTML标记的类型和基本属性. 二 应用 动态添加一个文本框 本示例通过单击"动态添加文

  • JavaScript数组，JSON对象实现动态添加、修改、删除功能示例

    JavaScript数组，JSON对象实现动态添加、修改、删除功能示例

    本文实例讲述了JavaScript数组,JSON对象实现动态添加.修改.删除功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>javascript里面的数组,json对象,动态添加,修改,删除示例</t

  • AngularJS表格添加序号的方法

    AngularJS表格添加序号的方法

    本文实例讲述了AngularJS表格添加序号的方法.分享给大家供大家参考,具体如下: 1.问题背景 AngularJS表格需要序号,可以利用$index来作为序号 2.实现实例 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>AngularJS之表格序号</title> <link rel="stylesheet" h

  • JavaScript 自动在表格前面增加序号

    JavaScript 自动为表格增加序号 .index_tab{width:100%;border-collapse:collapse;border:1px solid #005892;margin:8px 0;} .index_tab td{line-height:35px;border:1px solid #005892;padding-left:4px;} tr.tr_top td{line-height:32px;border:none;background-color:#005892;

  • JS点击动态添加标签、删除指定标签的代码

    1.div标签 <div id="mDiv3"> <p>1</p> <button onclick="myFun9()">添加</button> </div> 2.js function myFun9() { var mDiv3 = document.getElementById("mDiv3"); //获取组件1 var eleme = document.createEle

  • js动态添加带圆圈序号列表的实例代码

    js动态添加带圆圈序号列表的实例代码

    1.先在body里面添加ul标签 <!-- 无序列表 --> <ul id="list"> </ul> 2.通过js获取到id等于list的标签 定义一个空字符串用来连接增加的标签,并展示出来 如图的js代码展示的是前三个颜色不同,余下的颜色相同的圆圈序号 function autoAddList(){ var oUl = document.getElementById('list'); // var arr = ['湖南','广西','新疆','上

  • JS动态添加option和删除option(附实例代码)

    1.动态创建select 复制代码 代码如下: function createSelect(){ var mySelect = document.createElement("select"); mySelect.id = "mySelect"; document.body.appendChild(mySelect); } 2.添加选项option 复制代码 代码如下: function addOption(){ //根据id查找对象, var obj=docume

  • Angular动态添加、删除输入框并计算值实例代码

    Angular动态添加.删除输入框并计算值实例代码 摘要: 在学习群中交流时,有人分享了一个动态添加输入框的方法,我在其基础上进行了一些改进 这个功能本身并不复杂,但还是要注意,每个ng-model的对象必须是不同的,这样才能把它们分隔开. 下面是完整代码: JS: angular.module("myApp",[]) .controller("inputController",function($scope){ $scope.items=[]; //初始化数组,以

  • 使用JS组件实现带ToolTip验证框的实例代码

    使用JS组件实现带ToolTip验证框的实例代码

    本组件依赖JQuery 本人测试的JQuery 是1.8, 兼容IE8,IE9,谷歌,火狐等. //验证输入框 function ValidateCompent(input){ var _input = $(input).clone(true); _input.css("height",$(input).css("height")); _input.css("width", $(input).css("width")); va

  • js动态添加事件并可传参数示例代码

    复制代码 代码如下: var tt=function(obj) { return function() { alert(obj.tagName); //可以为外部定义的一个执行函数: } } function addfunction() { var bigobj=document.getElementById("mytable"); var rows =bigobj.rows; for(var j=0; j<rows.length; j++) { for(var i=0;i<

  • Java使用EasyExcel动态添加自增序号列

    Java使用EasyExcel动态添加自增序号列

    目录 前言 实现 思路 其它 总结 前言 本文将介绍如何通过使用EasyExcel自定义拦截器实现在最终的Excel文件中新增一列自增的序号列,最终的效果如下: 此外,本文所使用的完整代码示例已上传到GitHub. 实现 本文主要是通过自定义一个继承AbstractRowWriteHandler的拦截器来实现在最终导出的结果中新增序号列,通过修改源码中保存头部标题的Map内容来给自己添加的序号列留出位置,先展示最终的代码: /** * 自定义 excel 行处理器, 增加序号列 * * @aut

  • js动态添加的DIV中的onclick事件简单实例

    最简单的是这样: <input type="button" onclick="alert(this.value)" value="我是 button" /> 动态添加onclick事件: <input type="button" value="我是 button" id="bu"> <script type="text/javascript&quo

  • js动态添加表格逐行添加、删除、遍历取值的实例代码

    js动态添加表格逐行添加、删除、遍历取值的实例代码

    关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可. 功能包括:表格添加一行,表格删除一行,表格遍历取值等. 点击说明:点击添加按钮,则表格添加一行,可进行录入,删除按钮,可删除当前行,其他行不影响.删除或者添加,每行的的编号都会自动变化,套餐和价格是<input/>,内容是 <textarea></textarea>,点击保存按钮的时候,遍历表

  • Vue.js动态添加、删除选题的实例代码

    Vue.js动态添加、删除选题的实例代码

    大家先看看页面效果吧,当当当当``````````````````````` 图中第二个选题是小颖点击了"新增选题"按钮,然后出来的,当你点击了"删除选项"或"删除选题"按钮,就会删除相应的选项和选题. html代码 <template> <div class="main-container"> <div class="form-horizontal"> <temp

  • 用js动态添加html元素,以及属性的简单实例

    用js动态添加html元素,以及属性的简单实例 function test(){ //创建节点 var lswt_2=document.createElement("div"); //设置节点id lswt_2.id='lswtColse'; //设置节点属性 lswt_2.style.width='11px'; lswt_2.style.height='10px'; lswt_2.style.top='0px'; lswt_2.style.right='0px'; lswt_2.st

随机推荐