日常敲代码练习
一个非常非常之简单的敲代码练习，
根据《javascript》案例的要求，
一个用户输入表单，获取用户输入的数据并进行处理，
好吧，其实就是一个甜甜圈订单的form，
根据用户输入要订的甜甜圈种类的数量，
即时计算价格、税额以及总价格：
额，昨晚将highlight.js整合到了主题中，正好看下代码高亮的效果阿哈哈哈！
<!DOCTYPE html>
<html>
<head>
<title>practice02</title>
<meta charset="utf-8">
<style type="text/css">
.div1 {
width: 600px;
margin: 20px auto;
text-align: center;
}
.label1 {
width: 150px;
text-align: right;
padding-right: 5px;
display: inline-block;
}
</style>
<script type="text/javascript">
function updateOrder() {
const DONUTSPRICE = 0.50;
const TAXRATE = 0.0925;
var cakedonuts = parseInt(document.getElementById("cakedonuts").value);
var glazeddonuts = parseInt(document.getElementById("glazeddonuts").value);
if (isNaN(cakedonuts)) {
cakedonuts = 0;
}
if (isNaN(glazeddonuts)) {
glazeddonuts = 0;
}
var subtotal = (cakedonuts + glazeddonuts) * DONUTSPRICE;
var tax = subtotal * TAXRATE;
var total = subtotal + tax;
document.getElementById("subtotal").value = "$" + subtotal.toFixed(2);
document.getElementById("tax").value = "$" + tax.toFixed(2);
document.getElementById("total").value = "$" + total.toFixed(2);
}
</script>
</head>
<body>
<div class="div1">
<h1>Donuts</h1>
<form name="orderform" action="" method="post">
<p><label class="label1">Name:</label><input type="text" name="name" id="name"></p>
<p><label class="label1"># of cake donuts:</label><input onchange="updateOrder();" type="text" name="cakedonuts" id="cakedonuts" value="0"></p>
<p><label class="label1"># of glazed donuts:</label><input onchange="updateOrder();" type="text" name="glazeddonuts" id="glazeddonuts" value="0"></p>
<p><label class="label1">Minutes 'til pickup:</label><input type="text" name="time" id="time"></p>
<p><label class="label1">Subtotal:</label><input type="text" name="subtotal" id="subtotal"></p>
<p><label class="label1">Tax:</label><input type="text" name="tax" id="tax"></p>
<p><label class="label1">Total:</label><input type="text" name="total" id="total"></p>
<p><input type="button" name="submit" value="Place order"></p>
</form>
</div>
</body>
</html>Tags : javascript练习
所有原创文章采用 知识共享署名-非商业性使用 4.0 国际许可协议 进行许可。
您可以自由的转载和修改，但请务必注明文章来源并且不可用于商业目的。
本站部分内容收集于互联网，如果有侵权内容、不妥之处，请联系我们删除。敬请谅解！
BTW：公司网站很不错