1、打开我们的网页开发编辑器新建一个HTML网页文件
2、编写HTML demo(例子)代码：
<div id="demo">
产品单价：<em>1.86</em>
购买数量：<input type="number" id="text" />
<input type="button" id="btn" value="提交"/>
输出的值是：<em id="result"></em>
</div>
3、编写JS代码：1.给提交按钮绑定点击事件
代码：document.getElementById("btn").onclick=function(){}
4、编写JS代码：2.获取产品单价并转化成数字类型
代码：var price = Number(document.getElementById("price").innerText);
5、编写JS代码：3.获取购买数量输入框的值并转化成数字类型
代码：var num = Number(document.getElementById("text").value);
6、编写JS代码：4.计算总价
代码：var result = price * num;
7、编写JS代码：5.四舍五入保留两位小数,然后将结果显示到ID#result标签上
document.getElementById("result").innerHTML=result.toFixed(2);
8、用浏览器打开我们编写的页面测试结果：
完整代码：
<body>
<div id="demo">
产品单价：<em id="price">1.86</em>
购买数量：<input type="number" id="text" />
<input type="button" id="btn" value="提交"/>
输出的值是：<em id="result"></em>
</div>
</body>
<script type="text/javascript">
// 为提交按钮添加点击事件
document.getElementById("btn").onclick=function(){
// 获取产品单价并转化成数字类型
var price = Number(document.getElementById("price").innerText);
// 获取购买数量输入框的值并转化成数字类型
var num = Number(document.getElementById("text").value);
// 计算总价
var result = price * num;
//四舍五入保留两位小数,然后将结果显示到ID#result标签上
document.getElementById("result").innerHTML=result.toFixed(2);
}
</script>
