有没有办法用更少的行来编写我的 js 代码以使其更干净?

Is there a way I can write my js code in fewer lines to make it cleaner?

提问人:Ayodeji 提问时间:11/6/2023 最后编辑:ReynoAyodeji 更新时间:11/7/2023 访问量:78

问:

我正在尝试创建一个边框半径审阅器,其中矩形四边的边的边框半径会根据输入到链接到每条边的四个文本框中的值而变化。这是我的代码:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border-radius previewer</title>
  <style>
    body,
    .outer-square {
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .inner-square {
      border: 1px solid #000;
      width: 400px;
      height: 200px;
      background-color: rgb(255, 255, 255);
    }
    
    .outer-square {
      border: 1px solid #000000;
      width: 500px;
      height: 300px;
      background-color: rgb(211, 200, 200);
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      margin-top: 100px;
    }
    
    input {
      width: 10px;
    }
    
    p {
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <div class="outer-square" id="outer-square">
    <div class="inner-square" id="inner-square">
      <p id="top-left-output"></p>
      <p id="top-right-output"></p>
      <p id="bottom-left-output"></p>
      <p id="bottom-right-output"></p>
    </div>
  </div>
  <input type="text" id="top-left-border-radius" value="0">
  <input type="text" id="top-right-border-radius" value="0">
  <input type="text" id="bottom-left-border-radius" value="0">
  <input type="text" id="bottom-right-border-radius" value="0">
  <script>
    const innerSquare = document.getElementById('inner-square')
    const outerSquare = document.getElementById('outer-square')

    //Inputs
    const topLeftInput = document.getElementById('top-left-border-radius')
    const topRightInput = document.getElementById('top-right-border-radius')
    const bottomLeftInput = document.getElementById('bottom-left-border-radius')
    const bottomRightInput = document.getElementById('bottom-right-border-radius')

    //This section contains declaration of output
    const top_left_output = document.getElementById('top-left-output')
    const top_right_output = document.getElementById('top-right-output')
    const bottom_left_output = document.getElementById('bottom-left-output')
    const bottom_right_output = document.getElementById('bottom-right-output')


    //Adding event listeners
    topLeftInput.addEventListener('input', function(e) {
      top_left_output.textContent = `border-top-left-radius: ${topLeftInput.value}px;`
      outerSquare.style.borderTopLeftRadius = `${topLeftInput.value}px`
    })

    topRightInput.addEventListener('input', function(e) {
      top_right_output.textContent = `border-top-right-radius: ${topRightInput.value}px;`
      outerSquare.style.borderTopRightRadius = `${topRightInput.value}px`
    })

    bottomLeftInput.addEventListener('input', function(e) {
      bottom_left_output.textContent = `border-bottom-left-radius: ${bottomLeftInput.value}px;`
      outerSquare.style.borderBottomLeftRadius = `${bottomLeftInput.value}px`
    })

    bottomRightInput.addEventListener('input', function(e) {
      bottom_right_output.textContent = `border-bottom-right-radius: ${bottomRightInput.value}px;`
      outerSquare.style.borderBottomRightRadius = `${bottomRightInput.value}px`
    })
  </script>
</body>

</html>

这段代码大致可以满足我的要求。但我相信我应该能够用更少的代码行来做到这一点。我能够想出这个。但是,我无法在带有数据属性“output”的文本中添加文本。div

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Border-radius previewer</title>
  <style>
    body,
    .outer-square {
      background-color: white;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    
    .inner-square {
      border: 1px solid #000;
      width: 400px;
      height: 200px;
      background-color: rgb(255, 255, 255);
    }
    
    .outer-square {
      border: 1px solid #000000;
      width: 500px;
      height: 300px;
      background-color: rgb(211, 200, 200);
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-right-radius: 0px;
      margin-top: 100px;
    }
    
    input {
      width: 10px;
    }
    
    div {
      margin-left: 10px;
    }
  </style>
</head>

<body>
  <input type="text" data-border-radius="top-left-border-radius" value="0">
  <input type="text" data-border-radius="top-right-border-radius" value="0">
  <input type="text" data-border-radius="bottom-left-border-radius" value="0">
  <input type="text" data-border-radius="bottom-right-border-radius" value="0">

  <div class="outer-square" data-outer-square>
    <div class="inner-square" data-inner-square>
      <div data-output="top-left-border-radius"></div>
      <div data-output="top-right-border-radius"></div>
      <div data-output="bottom-left-border-radius"></div>
      <div data-output="bottom-right-border-radius"></div>
    </div>
  </div>

  <script>
    const innerSquare = document.querySelector("[data-inner-square]")
    const outerSquare = document.querySelector("[data-outer-square]")
    const inputs = document.querySelectorAll("[data-border-radius]")
    const outputs = document.querySelectorAll("[data-output]")

    inputs.forEach(input => {
      input.addEventListener('input', (e) => {
        const borderRadius = input.dataset.borderRadius

        if (borderRadius == 'top-left-border-radius') {
          outerSquare.style.borderTopLeftRadius = `${input.value}px`
        } else if (borderRadius == 'top-right-border-radius') {
          outerSquare.style.borderTopRightRadius = `${input.value}px`
        } else if (borderRadius == 'bottom-right-border-radius') {
          outerSquare.style.borderBottomRightRadius = `${input.value}px`
        } else outerSquare.style.borderBottomLeftRadius = `${input.value}px`
      })
    })
  </script>
</body>

</html>

任何帮助将不胜感激。

JavaScript 循环 foreach

评论

0赞 Bob Martin 11/6/2023
您可以将边框半径样式简单地设置为 。或 '''border-radius: 1px 2px 3px 4px; .第一个值:左上角,第二个值:右上角,第三个值:右下角,第四个值:左下角;border-radius: 0px
0赞 Ricardo Machado 11/6/2023
我以视觉方式工作。如果你能从视觉上向我解释想要的结果,我也许能帮助你。
0赞 Thallius 11/7/2023
你应该为HTML制作一个文件,为CSS制作一个文件,为javascript制作一个文件,不要混淆

答:

1赞 J.Porter 11/6/2023 #1

使代码更认真地命名每个变量和属性。

-html

 <div class="inner-square" data-inner-square>
  <div id="borderTopLeftRadiusOutput"></div>
  <div id="borderTopRightRadiusOutput"></div>
  <div id="borderBottomLeftRadiusOutput"></div>
  <div id="borderBottomRightRadiusOutput"></div>
</div>
...
<input type="text" data-border-radius="borderTopLeftRadius" value="0">
<input type="text" data-border-radius="borderTopRightRadius" value="0">
<input type="text" data-border-radius="borderBottomLeftRadius" value="0">
<input type="text" data-border-radius="borderBottomRightRadius" value="0">

-javascript

inputs.forEach((input) => 
  input.addEventListener("input", (e) => {
    const field = input.dataset.borderRadius;
    document.getElementById(`${field}Output`).textContent =
      `${field}: ${input.value}px;`;
    outerSquare.style[field] = `${input.value}px`;
  })
);

我只更改了每个 id 和输出。inputdiv

我想我的答案会对你有所帮助。

评论

0赞 Ayodeji 11/7/2023
这正是我所需要的。非常感谢您的贡献。
0赞 Mister Jojo 11/7/2023 #2

你可以使用一个CSS变量:

const
  myForm      = document.querySelector('#my-form')
, outerSquare = document.querySelector('#outer-square')
, retour =
    { tl : document.querySelector('#border-top-left-radius')
    , tr : document.querySelector('#border-top-right-radius')
    , bl : document.querySelector('#border-bottom-left-radius')
    , br : document.querySelector('#border-bottom-right-radius')
    } 
  ;
myForm.reset();
myForm.onsubmit = e => e.preventDefault(); /* disablee form submit */
myForm.oninput = ({target:inRange}) =>    /* get any input event  */
  {
  inRange.nextSibling.textContent  = inRange.value;
  retour[inRange.name].textContent = inRange.value;
  
  /* change the css variable values */
  outerSquare.style.setProperty('--bradius',  `${myForm.tl.value}px ${myForm.tr.value}px ${myForm.bl.value}px ${myForm.br.value}px `);
  }
#outer-square {
  display        : table-cell;
  vertical-align : middle;
  text-align     : center;
  --bradius      : 0px 0px 0px 0px;  /* css variable  values */
  border         : 1px solid black;
  width          : 500px;
  height         : 300px;
  background     : #d3c8c8;  
  margin         : 20px;
  border-radius  : var(--bradius);  /* css variable  usage */
  }
#inner-square {
  display    : inline-block;
  width      : 60%;  
  padding    : 10px;
  border     : 1px solid black;
  background :whitesmoke;
  text-align : left;
  }
#inner-square > p::before {
  content : attr(id) ': '
  }
#inner-square > p::after {
  content : 'px'
  }
label {
  display: block;
  height: 2em;
  }
label * {
  vertical-align: middle; 
  }
label > span:first-of-type { 
  display    : inline-block; 
  width      : 9em; 
  text-align : right; 
  }
<div id="outer-square">
  <div id="inner-square">
    <p id="border-top-left-radius">0</p>
    <p id="border-top-right-radius">0</p>
    <p id="border-bottom-left-radius">0</p>
    <p id="border-bottom-right-radius">0</p>
  </div>
</div>

<form id="my-form">
  <label><span>top-left :    </span> <input type="range" name="tl" min="0" max="100" value="0"><span>0</span> </label>
  <label><span>top-right :   </span> <input type="range" name="tr" min="0" max="100" value="0"><span>0</span> </label>
  <label><span>botom-left :  </span> <input type="range" name="bl" min="0" max="100" value="0"><span>0</span> </label>
  <label><span>botom-right : </span> <input type="range" name="br" min="0" max="100" value="0"><span>0</span> </label>
</form>