在JS中如何用for循环数字做出一个V字形

Posted 2023-04-05

<script>
window.onload=function()
var aDiv=document.getElementsByTagName('div')

for(var i=0;i<100;i++)
document.body.innerhtml+='<div>'+i+'</div>'
aDiv[i].style.left=i%10*60+'px'
aDiv[i].style.top =parseInt(i/10)*52+'px';


</script>
上面是数字用%取模换行的效果，我做出来了。
想问下用数字做个V形状的，要怎么做？

参考技术A 可以循环出个表格，第一行第一个单元格和最后一个单元格有字符，其他格为空；
第二行第二个单元格和倒数第二个单元格有字符，其他格为空，以此类推，直到最后一行只有中间的单元格有字符，其他为空。追问

别打字行吗？我就想看代码

Vue中如何用鼠标滑轮进行横向滑动不显示滚动条

1.页面

      //父盒子
      <div class="navHistory gzparkNavWarp" @mousewheel="handleMouseWheel">
      //子盒子
        <el-tag
          class="gzparkNav"
          v-for="tag in tags"
          :key="tag.name"
          closable
          :type="tag.type"
          :disable-transitions="true"
          @close="handleClose(tag)"
        >
           tag.name 
        </el-tag>
      </div>

2.在vue methods方法中定义

methods: 
    //滑动鼠标滚轮实现横向滚动
    handleMouseWheel(e) 
      const scrollLeft = document.querySelector(".gzparkNavWarp").scrollLeft;
      const offsetWidth = document.querySelector(".gzparkNavWarp").offsetWidth;
      const scrollWidth = document.querySelector(".gzparkNavWarp").scrollWidth;
      if (e.wheelDelta < 0 && scrollLeft + offsetWidth < scrollWidth) 
        document.querySelector(".gzparkNavWarp").scrollLeft =
          document.querySelector(".gzparkNavWarp").scrollLeft + 100;
       else if (e.wheelDelta > 0 && scrollLeft > 0) 
        document.querySelector(".gzparkNavWarp").scrollLeft =
          document.querySelector(".gzparkNavWarp").scrollLeft - 100;
      
    ,
  

<style lang="scss" scoped>
.navHistory //父盒子
  width: 100%;
  height: 40px;
  border-bottom: 1px solid #ccc;
  display: flex;
  align-items: center;
  overflow: hidden;//清除滚动条
  .gzparkNav //子盒子
    margin: 0 10px;
  

</style>