Блог

Главная - Вопросы по программированию - Как написать скрипт, который может создавать заданное пользователем количество квадратов css

Как написать скрипт, который может создавать заданное пользователем количество квадратов css

#javascript #html #css

#javascript #HTML #css

Вопрос:

Итак, я пытаюсь заставить скрипт отображать определенное количество черных квадратов css, когда в приглашении вводится число, я действительно понятия не имею, как подойти к этому вот мой код до сих пор

   <!DOCTYPE html>
  <html>
  <head>
  <style>
.square {
  width: 100px;
  height: 100px;
  background-color: black;

}

</style>
<div class="square"> 

 </div>

 </head>
 <body>
 <script>
 var msg = prompt('How Many squares?');

 </script>

 </body>
 </html>

Я начал читать о циклах, так как подумал, что это может быть то, что мне нужно сделать. но я пока их не понимаю.

Комментарии:

1. Если вы еще не понимаете цикл, продолжайте изучать, так как он вам понадобится для решения этой проблемы

2. Так что, я думаю, я был на правильном пути, и это полезно знать, я буду продолжать изучать их.

Ответ №1:

 let msg = parseInt(prompt('How Many squares?')); //need to convert the input to number as it's always a string
if(msg > 0){
    let body = document.querySelector('body'); //selector for where you want the elements to go
    let element = `
    <div class="square"></div>
    `; //html string
    for (let i = 0; i < msg - 1; i  ) { //I like starting loops from 0 so need to subtract 1 from msg
        body.insertAdjacentHTML('afterBegin', element); //insert the html element inside the selector
    }
}

Ответ №2:

 const squre_container = document.getElementById('square-container');

var inp = parseInt(prompt('how many squres do you want', 5));

for(let i=0; i<inp; i  ){
  let sq = document.createElement('div');
  sq.setAttribute('class', 'square');
  squre_container.appendChild(sq);
}  
 .square {
  width: 100px;
  height: 100px;
  background-color: black;
}

#square-container{
  width: 100vw;
  height: 100vh;
}  
 <div id='square-container'></div>

Я желаю, чтобы вы удалили этот вопрос, так как это касается конкретной проблемы программирования, а не обучающей гильдии. Без использования позиционирования, такого как grid и flexbox , код в конечном итоге склеивается. Этот пост не дает прямого ответа на ваш вопрос, но предоставляет высококачественный обучающий ресурс, нажмите на черный ящик, а затем на другие поля, чтобы посмотреть, что произойдет.

 const available_container = document.getElementById('available-container');
const using_container = document.getElementById('using-container');
const switch_available = document.getElementById('available-panel-app');

let available_state = true;
let available_amount = 3;
let using_amount = 2;

available_gtc = Math.ceil(Math.sqrt(available_amount));
let frs = Array.from(Array(available_gtc), ()=>'1fr').join(' ');

available_container.style.gridTemplateColumns = frs;
available_container.style.gridTemplateRows = frs;
using_container.style.gridTemplateColumns = '1fr';

for (let i = 0; i < available_amount; i  ){
    let app = document.createElement('div');
    app.setAttribute('class', 'available-app');
    available_container.appendChild(app);
}

for (let i = 0; i < using_amount; i  ){
    let app = document.createElement('div');
    app.setAttribute('class', 'using-app');
    using_container.appendChild(app);
}

const available_apps = document.querySelectorAll('.available-app');
const using_apps = document.querySelectorAll('.using-app');


const random_color = () => '#' (Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0');


function available_category(app){
    app.addEventListener('click', ()=>{
        if(available_state){return;}
        app.classList.add('vanish');
        setTimeout(()=>{
            app.classList.remove('available-app');
            app.classList.add('using-app');
            using_container.appendChild(app);
            app.classList.remove('vanish');
            app.classList.add('matter');
            setTimeout(()=>{
                app.classList.remove('matter');
            }, 1000);
        }, 1000);
        using_category(app);
    });
}

function using_category(app){
    app.addEventListener('click', ()=>{
        if(available_state){return;}
        app.classList.add('vanish');
        setTimeout(()=>{
            app.classList.remove('using-app');
            app.classList.add('available-app');
            available_container.appendChild(app);
            app.classList.remove('vanish');
            app.classList.add('matter');
            setTimeout(()=>{
                app.classList.remove('matter');
            }, 1000);
        }, 1000);
        available_category(app);
    });
}

// color
available_apps.forEach(app=>{
    app.style.backgroundColor = random_color();
    available_category(app);
});

using_apps.forEach(app=>{
    app.style.backgroundColor = random_color();
    using_category(app);
});

switch_available.addEventListener('click', ()=>{
    if(available_state){
        available_container.style.display = 'grid';
        available_container.classList.add('matter');
        setTimeout(()=>{
            available_container.classList.remove('matter');
        }, 1000);
    }else{
        available_container.classList.add('vanish');
        setTimeout(()=>{
            available_container.classList.remove('vanish');
            available_container.style.display = 'none';
        }, 1000);
    }
    available_state = !available_state;
});  
 #available-container{
    position: fixed;
    border: 1px solid;
    width: calc(95vw - 100px);
    height: 100vh;
}

#using-container{
    position: fixed;
    right: 0;
    border: 1px solid;
    width: 100px;
    height: 100vh;
}

/*flexbox*/
#available-container{
    display: none;
    overflow: hidden;
}

#using-container{
    display: grid;
    overflow: hidden;
}

#available-panel-app{
    background-color: black;
    width: 5rem;
    height: 5rem;
}

.available-app{
    width: 8rem;
    height: 8rem;
}

.using-app{
    width: 5rem;
    height: 5rem;
}

.vanish{
  opacity: 0;
  transition: opacity 1s;
  animation: disappear 1s;
}

.matter{
  opacity: 1;
  transition: opacity 1s;
  animation: appear 1s;
}

@keyframes appear{
  0%{
    transform: scale(.1);
    opacity: 0;
    border-radius: 100%;
  }
  100%{
    transform: scale(1);
    opacity: 1;
    border-radius: 0;
  }
}

@keyframes disappear{
  0%{
    transform: scale(1);
    opacity: 1;
    border-radius: 0;
  }
  100%{
    transform: scale(.1);
    opacity: 0;
    border-radius: 100%;
  }
}  
 <div id="available-container">
</div>

<div id='using-container'>
    <div id='available-panel-app'></div>
</div>