如何编写可以产生用户指定数量的CSS正方形的脚本

编程问答 2022-06-10

问题描述

所以我试图让脚本显示一定数量的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>

我开始阅读有关循环的文章，因为我认为这可能是我需要做的。但是我还不了解他们。

解决方法

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
    }
}
, 

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);
        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>

htmljavascript