HTML js for循环实现多个div

HTML有时会写大概相同的超多div，费时费力。在这里记一下使用js实现的小技巧。
直接上代码：

<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>/*使用js不要忘记在head中加入标签来支持jquery（更方便）*/

<script>/*div基本上是一样的，一个一个写太浪费时间。于是有js来完成所有div的实现*//*样式也得在这里完成，在css文件中或是在头中都不好完成css样式的循环*/for (var i=-70;i<=100;i++){a='<div style="';/*Math.round(N) 对N数进行取整 Math.random() 是产生一个随机数*/a+="background-color: rgb("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+");";a+='">';a+=i;a+='</div>';/*$(".stage") 是jquery选择到一个class为stage的元素append是将我们a添加到他的子节点（子元素）中 */$(".stage").append(a);}</script>

HTML js for循环实现多个div相关推荐

关于JS的循环和函数，由入门到放弃
1.条件语句if if 语句 if 语句是 ECMAScript 中最常用的语句之一,事实上在许多计算机语言中都是如此. if 语句的语法: if (condition) statement1 els ...
JS事件循环 Event Loop
前言刚学前端的时候一直听别人说 JS 是单线程.单线程.单线程的,其实完整的应该是在浏览器环境下 JS 执行引擎是单线程的. 那么什么是线程?为什么JS是单线程的? 1. 进程和线程进程和线程的主 ...
CSS+JS自动循环滚动的多图片幻灯切换展示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Linux事件循环阻塞,深入浅析Node.js 事件循环、定时器和process.nextTick()
什么是事件循环尽管JavaScript是单线程的,但通过尽可能将操作放到系统内核执行,事件循环允许Node.js执行非阻塞I/O操作. 由于现代大多数内核都是多线程的,因此它们可以处理在后台执行的多 ...
JS实现一行内多列DIV同高
JS实现一行内多列DIV同高代码 <script language="javascript" type="text/javascript"> ...
JS基础——循环很重要
介绍循环之前,首先要说一下同样很重要的if-else结构,switch-case结构 ①if-else结构 if(判断条件) { 条件为true时执行 } else{ 条件为false时执行 } ②i ...
[js] js的循环结构有哪些？
[js] js的循环结构有哪些? for for in while do while 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌谣一 ...
js在div中追加html,JS把内容动态插入到DIV的实现方法
/p> "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> Testing example.js 文件内容: window. ...
JS事件循环机制：同步与异步任务之宏任务微任务
JS事件循环机制:同步与异步任务之宏任务微任务阅读目录 javascript事件循环 setTimeout和setInterval中的执行时间宏任务和微任务 javascript是单线程,一 ...

HTML js for循环实现多个div

HTML js for循环实现多个div相关推荐

最新文章

热门文章