【发布时间】：2022-07-21 20:07:53
【问题描述】：
我想清除公里和人员，我尝试了不同的方式，例如 inp1 = null，inp1 = isNaN，inp1 = ""（与 inp2 相同）并在末尾附加 innerHTML 和或 .value，并且与 km 和 people 进一步相同，但这些方法均无效。清除应该在几秒钟后发生，就像我在我的子函数“clear”中描述的那样，它是 setTimeOut 函数的一个参数。当有人在 person 字段中插入超过 4 的数字时，应使用 clear() 函数
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
function calci() {
const {routePrice, km, persons, output} = VarOfElements();
const condExceededPersons = persons > 4;
const condPersonsCosts = persons === 4 && km > 0;
const condNonePersonsCosts = persons < 4 || !isNaN(persons);
if (condExceededPersons) {
output.innerHTML = "Only four persons can drive with you!";
setTimeout(clear,3500);
function clear() {
output.innerHTML = "Please enter adequate informations";
km = null
persons = null
}
return; /*the above area is to considering and the function under the calci function in which the elements are declared*/
} else if (condPersonsCosts) {
var personsExpenses = 5;
} else if (condNonePersonsCosts) {
personsExpenses = 0;
}
const noInput = isNaN(km);
if (noInput) {
output.innerHTML = "Please enter a distance";
return;
}
const conditionSevenO = km <= 7 && km > 0;
const overSevenOeq = km > 7 && km > 0;
if (conditionSevenO) {
y = 3.9
var wholeExpenses = routePrice * km + y + personsExpenses;
output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
} else if (overSevenOeq) {
y = 3.9
let sevenLess = km - 7;
let overSevenRoute = 1.65;
let overSeven = sevenLess * overSevenRoute;
let seventhExpenses = 16.10;
wholeExpenses = y + seventhExpenses + overSeven + personsExpenses;
output.innerHTML = "You have to pay " + wholeExpenses.toFixed(2) + "€";
}
}
function VarOfElements() {
var routePrice = 2.3;
const inp1 = document.getElementById('input-box1');
const inp2 = document.getElementById('input-box2');
const km = parseInt(inp1.value);
var persons = parseInt(inp2.value);
output = document.getElementById('output-box');
return {routePrice, km, persons, output, inp1,inp2};
};
</script>
</head>
<style>
.body {
display: flex;
justify-content: center;
font-family: 'Padauk', sans-serif;
}
#heading {
color: rgba(130, 195, 236, 1);
}
#boxes {
display: flex;
justify-content: space-between;
flex-direction: column;
align-items: center;
padding: 20vh;
align-items: center;
gap: 30px;
}
#input-box1:focus, #input-box2:focus {
border: none;
box-shadow: rgb(10, 126, 179) 0 0 10px ;
}
#boxes>*:nth-child(4) {
margin-top: 1vh;
}
#boxes>*:nth-child(5) {
margin-top:-1vh;
}
.input {
background-color: rgba(152, 187, 209, 0.386);
border: 1px solid;
border-radius: 5px;
border-color: rgba(130, 195, 236, 1);
}
.box {
width: 32vh;
height: 5vh;
text-align: center;
}
#output-box {
border: 1px solid;
border-radius: 30px;
border-color: rgb(10, 126, 179);
background-color: rgba(64, 143, 193, 0.453);
color: rgba(29, 2, 54, 0.311);
line-height:40px;
text-align: center;
box-shadow: blueviolet 0 0 10px;
}
::placeholder {
color: rgba(0, 0, 0, 0.232);
}
#button {
border: 1px solid;
border-radius: 5px;
background-color: rgba(152, 187, 209, 0.386);
border-color: rgba(130, 195, 236, 1);
color: rgba(52, 160, 228, 0.588);
box-shadow: 0 0 10px rgba(130, 195, 236, 1);
cursor: pointer;
}
#button:hover {
color: white;
}
</style>
<body>
<div id="boxes">
<h1 id="heading"> Taximeter</h1>
<label class="labels" id="km" for="input-box1">km</label>
<input oninput="this.value = Math.abs(this.value)" min="0" placeholder="How far is your target?" id="input-box1"
class="box input" type="number">
<label class="labels" id="personen" for="input-box2"> Passengers </label>
<input min="0" max="4" oninput="this.value = Math.abs(this.value)" min="0"
placeholder="How many people are driving with you?" id="input-box2" class="box input" type="number">
<label class="labels" id="Preis" for="output-box">Price</label>
<output placeholder = "Please enter informations" class="box" id="output-box"></output>
<button onclick="calci()" id="button"> calculate!</button>
</div>
</div>
</body>
</html>
【问题讨论】：
标签： javascript html