微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

js动态添加带圆圈序号列表方法的精讲

coldplay.xixi
发布： 2021-02-18 18:04:30
转载
2363人浏览过

js动态添加带圆圈序号列表方法的精讲

免费学习推荐：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表示无标识，属性也有空心圆、实心方块、数字等

序列猴子开放平台
序列猴子开放平台

具有长序列、多模态、单模型、大数据等特点的超大规模语言模型

序列猴子开放平台 0
查看详情 序列猴子开放平台

序号排的整齐需要设置span的样式

/*设置为行内块状元素*/li span{
	display:inline-block;}
登录后复制

效果如下图所示
在这里插入图片描述

相关免费学习推荐：javascript（视频）

以上就是js动态添加带圆圈序号列表方法的精讲的详细内容，更多请关注php中文网其它相关文章！

相关标签：
javascript

大家都在看：

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。

下载
来源：CSDN网
收藏 点赞
上一篇：jquery 怎么判断指定样式是否存在 下一篇：浅谈JavaScript中的事件冒泡和事件捕获
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
js中this的六种模式 this的指向取决于函数调用方式，共六种绑定模式：1.全局环境中this指向window（浏览器）或global（Node.js）；2.独立调用时非严格模式指向全局对象，严格模式为undefined；3.作为对象方法调用时this指向调用者；4.构造函数中this指向新创建的实例；5.显式绑定通过call、apply、bind指定this值；6.箭头函数的this继承外层作用域，不可被显式改变。关键在于调用方式而非定义位置。
2025-11-10 16:17:02
695
可靠的AWS SDK JS S3请求超时处理策略 AWSSDKforJavaScript在处理S3操作时，其内置的httpOptions.timeout可能表现出不一致性，导致请求超时设置失效或长时间挂起。本文将介绍一种更稳健的解决方案，通过结合使用AWSSDK请求对象的abort()方法与JavaScript的setTimeout函数，实现对S3请求的精确和可预测的超时控制，从而有效避免资源浪费和应用程序阻塞。
2025-11-10 16:14:25
670
React/JSX与TypeScript：解决自定义HTML标签的类型声明问题 本文详细介绍了在React/JSX项目中使用自定义HTML标签（如SliderRevolution的rs-fullwidth-wrap）时，如何解决TypeScript报告的类型错误。通过讲解declareglobal和namespaceJSX的正确用法，并提供具体代码示例，指导开发者如何为非标准DOM元素扩展JSX.IntrinsicElements接口，从而确保代码的类型安全和编译通过。
2025-11-10 16:14:03
889
自定义工具栏在全屏模式下不显示按钮的解决方案 在使用自定义工具栏并启用全屏功能时，开发者可能会遇到工具栏在进入全屏模式后消失的问题，导致无法退出全屏。本文将深入探讨这一常见UI挑战，并提供两种有效的解决方案：一是通过调整HTML结构，移除可能导致冲突的特定属性和元素；二是通过CSS样式覆盖，利用position和高z-index值确保工具栏在全屏状态下依然可见，从而恢复其功能性。
2025-11-10 16:07:02
342
JavaScript 箭头函数：this 绑定与使用场景 箭头函数的this绑定取决于定义时的上下文且不可更改，适合用于数组方法回调、异步操作和工具函数，但不应用于对象方法、事件处理或构造函数，以避免this指向错误。
2025-11-10 16:07:04
809
React组件重复渲染、Key警告与数据获取优化实践 本文旨在解决React组件在数据获取和列表渲染中常见的重复渲染、keyprop警告问题。通过深入探讨useEffect的执行机制，我们将学习如何实施条件性数据加载以避免不必要的API请求，并强调keyprop在优化列表性能和避免错误中的核心作用，确保组件的高效稳定运行。
2025-11-10 15:58:02
151
Puppeteer 自动化：可靠点击动态页面元素的策略 在使用Puppeteer进行网页自动化时，开发者常遇到因页面元素类名动态变化而导致的点击失效问题。本文旨在提供一套健壮的解决方案，通过采用更通用的元素选择器和在页面上下文中执行点击操作，有效克服这类挑战。我们将探讨如何识别稳定属性、利用page.evaluate()模拟原生点击，并结合最佳实践确保自动化脚本的稳定性和可靠性，从而提升Puppeteer脚本的适应性。
2025-11-10 15:47:01
773
PHP 表单提交：解决 $_POST 无法获取按钮点击事件的常见问题 本教程旨在解决PHP开发中$_POST无法正确接收表单提交数据，特别是按钮点击事件的问题。文章深入分析了这一常见现象的根本原因——HTML表单结构缺失，并提供了详细的解决方案。通过构建正确的结构，确保所有相关输入元素和提交按钮被包含在内，从而使PHP后端能够成功捕获并处理用户提交的数据，实现预期的业务逻辑。
2025-11-10 15:43:01
486
TypeScript在大型JavaScript项目中的类型系统设计 TypeScript类型系统提升大型项目可维护性与安全性，需明确模块边界、使用泛型增强复用性、实施严格检查并渐进迁移，保持类型一致实用。
2025-11-10 15:42:03
372
在WordPress菜单中实现链接定向到指定iframe的教程 本教程详细介绍了如何在WordPress中，通过自定义代码将菜单项链接的目标（target）属性设置为指定的iframe名称，而非默认的_blank。文章将指导您修改functions.php文件以应用nav_menu_link_attributes过滤器，并强调确保目标iframe在页面中正确存在且其name属性与链接目标匹配的关键步骤，从而实现菜单链接在特定iframe中打开。
2025-11-10 15:37:01
337
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部