提问人:Ayodeji 提问时间:11/6/2023 最后编辑:ReynoAyodeji 更新时间:11/7/2023 访问量:78
有没有办法用更少的行来编写我的 js 代码以使其更干净?
Is there a way I can write my js code in fewer lines to make it cleaner?
问:
我正在尝试创建一个边框半径审阅器,其中矩形四边的边的边框半径会根据输入到链接到每条边的四个文本框中的值而变化。这是我的代码:
<!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>
任何帮助将不胜感激。
答:
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 和输出。input
div
我想我的答案会对你有所帮助。
评论
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>
评论
border-radius: 0px