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


Posted in Javascript onFebruary 18, 2021

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

Javascript 相关文章推荐
javascript AutoScroller 函数类
May 29 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
从零学JSON之JSON数据结构
May 19 Javascript
jQuery实现数秒后自动提交form的方法
Mar 05 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
jQuery实现的简单排序功能示例【冒泡排序】
Jan 13 Javascript
Boostrap栅格系统与自己额外定义的媒体查询的冲突问题
Feb 19 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
Angular中实现树形结构视图实例代码
May 05 Javascript
vue 返回上一页,页面样式错乱的解决
Nov 14 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
Nov 16 Javascript
js实现简单图片拖拽效果
Feb 22 Javascript
原生微信小程序开发中 redux 的使用详解
Feb 18 #Javascript
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 #Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 #Vue.js
Vue如何实现变量表达式选择器
Feb 18 #Vue.js
WebStorm无法正确识别Vue3组合式API的解决方案
Feb 18 #Vue.js
JavaScript实现手风琴效果
Feb 18 #Javascript
代码块高亮可复制显示js插件highlight.js+clipboard.js整合
Feb 15 #Javascript
You might like
建立动态的WML站点(一)
2006/10/09 PHP
php 类自动载入的方法
2015/06/03 PHP
PHP+redis实现添加处理投票的方法
2015/11/14 PHP
yii分页组件用法实例分析
2015/12/28 PHP
Symfony2学习笔记之模板用法详解
2016/03/17 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
js 获取子节点函数 (兼容FF与IE)
2010/04/18 Javascript
Js sort排序使用方法
2011/10/17 Javascript
javascript将url中的参数加密解密代码
2014/11/17 Javascript
JavaScript基本的输出和嵌入式写法教程
2015/10/20 Javascript
javascript每日必学之多态
2016/02/23 Javascript
微信小程序(订阅消息)功能
2019/10/25 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
用python实现简单EXCEL数据统计的实例
2017/01/24 Python
如何在python中使用selenium的示例
2017/12/26 Python
Python编程pygame模块实现移动的小车示例代码
2018/01/03 Python
Python面向对象类的继承实例详解
2018/06/27 Python
pytorch标签转onehot形式实例
2020/01/02 Python
解决python中显示图片的plt.imshow plt.show()内存泄漏问题
2020/04/24 Python
python中前缀运算符 *和 **的用法示例详解
2020/05/28 Python
如何基于matlab相机标定导出xml文件
2020/11/02 Python
Django filter动态过滤与排序实现过程解析
2020/11/26 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
美国百年历史早餐食品供应商:Wolferman’s
2017/01/18 全球购物
可持续未来的时尚基础:Alternative Apparel
2019/05/06 全球购物
社会实践自我鉴定
2013/11/07 职场文书
善意的谎言事例
2014/02/15 职场文书
怎样写离婚协议书
2014/09/10 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
春节慰问信范文
2015/02/15 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书
导游词之山海关
2019/12/10 职场文书
redis三种高可用方式部署的实现
2021/05/11 Redis
Win11安全功能升级:内置防网络钓鱼功能
2022/04/08 数码科技
Go获取两个时区的时间差
2022/04/20 Golang