voraa,
как то так ... //... const limit = 3; for (let i = 0; i < limit; i++) { //... elem.classList.add('active'); } |
wwwebtarget,
терпение, подождём вариант от voraa, |
Я уже дал свой вариант
Цитата:
|
случайный выбор блоков
вариант из двух циклов, без повторов и проверок на уникальность, случайность более "равномерная".
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .active { background-color: #FF0000; color: #FFFFFF; } </style> <script> document.addEventListener( 'DOMContentLoaded' , () => { const arr = [...document.querySelectorAll('div.status>span.online')] const limit = 3; const {length} = arr; for (let i = 0; i < length; i++) { const index = Math.floor(Math.random() * length); [arr[i], arr[index]] = [arr[index], arr[i]]; }; arr.length = limit; arr.forEach(({classList}) => classList.add('active')); }); </script> </head> <body> <div class="status"><span class="online">01</span></div> <div class="status"><span class="online">02</span></div> <div class="status"><span class="online">03</span></div> <div class="status"><span class="online">04</span></div> <div class="status"><span class="online">05</span></div> <div class="status"><span class="online">06</span></div> <div class="status"><span class="online">07</span></div> <div class="status"><span class="online">08</span></div> <div class="status"><span class="online">09</span></div> <div class="status"><span class="online">10</span></div> </body> </html> |
случайный выбор блоков
один цикл
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> .active { background-color: #FF0000; color: #FFFFFF; } </style> <script> document.addEventListener( 'DOMContentLoaded' , () => { const arr = [...document.querySelectorAll('div.status>span.online')] const limit = 3; for (let i = 0; i < limit; i++) { const {length} = arr; const index = Math.floor(Math.random() * length); const {classList} = arr.splice(index, 1)[0]; classList.add('active'); } }); </script> </head> <body> <div class="status"><span class="online">01</span></div> <div class="status"><span class="online">02</span></div> <div class="status"><span class="online">03</span></div> <div class="status"><span class="online">04</span></div> <div class="status"><span class="online">05</span></div> <div class="status"><span class="online">06</span></div> <div class="status"><span class="online">07</span></div> <div class="status"><span class="online">08</span></div> <div class="status"><span class="online">09</span></div> <div class="status"><span class="online">10</span></div> </body> </html> |
Цитата:
Если это не цикл, то что? |
Цитата:
|
Часовой пояс GMT +3, время: 03:27. |