效果如图：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>毛利率计算器</title>
<style type="text/css">
</style>
</head>
<body>
成本 : <input type="number" name="cost" id="cost" value="" /><br><br>
销售价 : <input type="number" name="price" id="price" value="" /><br><br>
<!-- 销售价-成本=毛利 --> <!-- 毛利/销售价=毛利率 -->
毛利：<span id="maoli"></span><br><br>
毛利率 :<span id="maolilv"></span><br><br>
<input type="button" name="calculation" id="calculation" value="计算" onclick="calculation()"/>
<input type="button" name="clearAll" id="clearAll" value="重置" onclick="clearAll()"/><br><br>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
// 计算
function calculation(){
var x = document.getElementById("cost").value;
var y = document.getElementById("price").value;
var z = document.getElementById("maoli");
var sum = document.getElementById("maolilv");
z.innerHTML = y-x;
sum.innerHTML = (y-x)/y;
}
//重置
function clearAll(){
var file = document.getElementById('cost');
file.outerHTML = cost.outerHTML;
var file = document.getElementById('price');
file.outerHTML = price.outerHTML;
$("#maoli").html("");
$("#maolilv").html("");
}
</script>
</body>
</html>