如何将用JS创建元素相乘

Question

null

js prettyprint-override">                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>

null

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

不能乘它。我很困惑。感谢所有的帮助。

每个div将显示时钟的部分：小时、分钟、秒。

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

我在下面贴了“Lorem”的文字来发送我的问题？！：）

Lorem ipsum dolor sit amet,consectetur Adipisinging Elit.Quisquam的罪？Iusto,iure veniam别名,ducimus reparraderit laboriosam eum aut molestiae dolor esse saepe falpriis dolore insulatur autem quaerat illum inventore 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');