我正在处理这个简单的html挑战，并获得了计算所有内容所需的所有代码，但我想更改span id的外观，使其看起来像用"晚餐费用"；这是我的密码；
<!DOCTYPE html>
<head>
<title>Tip Calculator</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Tip Calculator</h1>
</header>
<form action="javascript:void(calc())">
Cost of the Dinner: $<input id="bill" type="text">
<br>
<input type="submit" value="Calculate Tip">
<br>
15% of the Dinner: <span id="tip"></span>
<br>
25% of the Dinner: <span id="tip2"></span>
<br>
Dinner plus 25% tip: <span id="total"></span>
</form>
</div>
<script>
function calc() {
var bill = Number(document.getElementById('bill').value);
var tip = bill * .15;
var tip2= bill * .25;
var total_bill = bill + tip2;
document.getElementById("tip").innerHTML= "$"+Number(tip).toFixed(2);
document.getElementById("tip2").innerHTML= "$"+Number(tip2).toFixed(2);
document.getElementById("total").innerHTML= "$"+Number(total_bill).toFixed(2);
}
</script>
</body>这就是您想要的吗？
function calc() {
var bill = Number(document.getElementById('bill').value);
var tip = bill * .15;
var tip2= bill * .25;
var total_bill = bill + tip2;
document.getElementById("tip").innerHTML= "$"+Number(tip).toFixed(2);
document.getElementById("tip2").innerHTML= "$"+Number(tip2).toFixed(2);
document.getElementById("total").innerHTML= "$"+Number(total_bill).toFixed(2);
}form > span {
display: inline-block;
width: 10rem;
height: 1.2rem;
border: 0.5px solid gray;
}<div id="wrapper">
<header>
<h1>Tip Calculator</h1>
</header>
<form action="javascript:void(calc())">
Cost of the Dinner: $<input id="bill" type="text">
<br>
<input type="submit" value="Calculate Tip">
<br>
15% of the Dinner: <span id="tip"></span>
<br>
25% of the Dinner: <span id="tip2"></span>
<br>
Dinner plus 25% tip: <span id="total"></span>
</form>
</div>编辑：
这将固定跨度框和标签之间的垂直对齐。
function calc() {
var bill = Number(document.getElementById('bill').value);
var tip = bill * .15;
var tip2= bill * .25;
var total_bill = bill + tip2;
document.getElementById("tip").innerHTML= "$"+Number(tip).toFixed(2);
document.getElementById("tip2").innerHTML= "$"+Number(tip2).toFixed(2);
document.getElementById("total").innerHTML= "$"+Number(total_bill).toFixed(2);
}form p:not(:first-child) {
display: flex;
align-items: center;
}
form > p > span {
display: inline-block;
width: 10rem;
height: 1.2rem;
border: 0.5px solid gray;
margin-left: 0.5rem;
}<div id="wrapper">
<header>
<h1>Tip Calculator</h1>
</header>
<form action="javascript:void(calc())">
<p>
Cost of the Dinner: $<input id="bill" type="text">
<br />
<input type="submit" value="Calculate Tip">
</p>
<p>
15% of the Dinner: <span id="tip"></span>
</p>
<p>
25% of the Dinner: <span id="tip2"></span>
</p>
<p>
Dinner plus 25% tip: <span id="total"></span>
</p>
</form>
</div>将spans更改为inputs，并添加readonly属性
15% of the Dinner: $<input id="tip" readonly />
<br>
% of the Dinner: <input id="tip2" readonly />%
<br>
Dinner plus 25% tip: $<input id="total" readonly />
添加样式：
<style>
#total, #tip2, #tip{
border : solid 1px black;
padding: 5px;
}
</style>
#total, #tip2, #tip{
border : solid 1px black;
padding: 2px;
margin-bottom:2px;
}<!DOCTYPE html>
<head>
<title>Tip Calculator</title>
</head>
<body>
<div id="wrapper">
<header>
<h1>Tip Calculator</h1>
</header>
<form action="javascript:void(calc())">
Cost of the Dinner: $<input id="bill" type="text">
<br><br>
<input type="submit" value="Calculate Tip">
<br><br>
15% of the Dinner: <span id="tip">Loading</span>
<br><br>
25% of the Dinner: <span id="tip2">Loading</span>
<br><br>
Dinner plus 25% tip: <span id="total">Loading</span>
</form>
</div>
<script>
function calc() {
var bill = Number(document.getElementById('bill').value);
var tip = bill * .15;
var tip2= bill * .25;
var total_bill = bill + tip2;
document.getElementById("tip").innerHTML= "$"+Number(tip).toFixed(2);
document.getElementById("tip2").innerHTML= "$"+Number(tip2).toFixed(2);
document.getElementById("total").innerHTML= "$"+Number(total_bill).toFixed(2);
}
</script>
</body>