如何将使用 JS 创建的元素相乘

Question

                container = document.querySelector('.itemContainer');       

                for(i = 0; i < 30; i++){
                    container.innerHTML += '<div class="item"></div>';
        

                    if((i % 5) == 0){ 
                        document.querySelectorAll('.item')[i].style.setProperty("--width", 4+"px");
                    }       

                    document.querySelectorAll('.item')[i].style.transform = "rotate(" + i * 6 + "deg)";     
                }

                * {
                    margin       : 0;
                    padding:   : 0;
                    box-sizing : border-box;
                }

                body {
                    width                   : 100%;
                    height                  : 100vh;
                    display                 : flex;
                    justify-content : center;
                    align-items         : center;
                }

                .mainContainer {
                    position                 : relative;
                    width                    : 440px;
                    height                   : 200px;
                    display                  : flex;
                    justify-content  : center;
                    align-items          : center;
                    justify-content  : space-around;
                    border-radius    : 5px;
                    border                   : 1px solid black;
                    background-color : silver;
                }

                .itemContainer{
                    position                : relative;
                    width                   : 130px;
                    height                  : 130px;
                    display                 : flex;
                    justify-content : center;
                    align-items         : center;
                    border-radius   : 50%;
                }

                .item {
                    position                : absolute;
                    width                   :2px;
                    height                  :100%;
                    display                 : flex;
                    justify-content : center;
                }

                .item::before {
                    top              : 0px;
                    content      : '';
                    position     : absolute;
                    background : var(--background, black);
                    width        : var(--width, 2px);
                    height       : 10px;
                    text-align : center;
                }

                .item::after {
                    bottom       : 0px;
                    content      : '';
                    position   : absolute;
                    background : var(--background, black);
                    width        : var(--width, 2px);                       
                    height       : 10px;
                }

            <div class="mainContainer">
                <div class="itemContainer">H</div>
                <div class="itemContainer">M</div>
                <div class="itemContainer">S</div>
            </div>

 I want to use my "Clock Dial" drawn with JS in different Divs. 

无法相乘。我糊涂了。感谢您提供的所有帮助。

每个 div 都会显示时钟的各个部分：小时、分钟、秒。

感谢您的帮助。希望代码足够清晰。

我在下面粘贴了“lorem”文本来发送我的问题？ ！ :)

Lorem ipsum dolor sit amet，consectetur adipisicing elit。 Culpa eum enim optio ut quisquam？ Iusto，iure veniam 别名，ducimus reprehenderit laboriosam eum aut molestiae dolor esse saepe facilis dolore consequatur autem quaerat illuminvente quia sint libero nesciunt！

Answer 1

你必须创建一个函数并像这样重用代码

更新 HTML：

<div class="mainContainer">
  <div id="h" class="itemContainer">H</div>
  <div id="m" class="itemContainer">M</div>
  <div id="s" class="itemContainer">S</div>
</div>

JS：

function makeCircle(circle) {
  container = document.querySelector('#'+circle);

  for(i = 0; i < 30; i++){
    container.innerHTML += '<div class="item '+circle+' "></div>';
    if((i % 5) == 0){ 
      document.querySelectorAll('.item.'+circle)[i].style.setProperty("--width", 4+"px");
    }       
    document.querySelectorAll('.item.'+circle)[i].style.transform = "rotate(" + i * 6 + "deg)";     
  }
}

makeCircle('h');
makeCircle('m');
makeCircle('s');