在網(wǎng)站開發(fā)中，經(jīng)常會遇到需要將計算結果四舍五入并保留兩位小數(shù)點的需求。下面我們一起學習如何實現(xiàn)這個需求。 創(chuàng)建HTML頁面 首先，打開你的網(wǎng)頁開發(fā)編輯器，新建一個HTML網(wǎng)頁文件。然后編寫以下HT

在網(wǎng)站開發(fā)中，經(jīng)常會遇到需要將計算結果四舍五入并保留兩位小數(shù)點的需求。下面我們一起學習如何實現(xiàn)這個需求。

創(chuàng)建HTML頁面

首先，打開你的網(wǎng)頁開發(fā)編輯器，新建一個HTML網(wǎng)頁文件。然后編寫以下HTML代碼：

lt;div id"demo"gt;
    lt;pgt;產(chǎn)品單價：lt;emgt;1.86lt;/emgt;lt;/pgt;
    lt;pgt;購買數(shù)量：lt;input type"number" id"text"/gt;lt;/pgt;
    lt;pgt;lt;input type"button" id"btn" value"提交"/gt;lt;/pgt;
    lt;pgt;輸出的值是：lt;em id"result"gt;lt;/emgt;lt;/pgt;
lt;/divgt;

編寫JavaScript代碼

接下來，我們需要編寫一些JavaScript代碼來實現(xiàn)四舍五入保留兩位小數(shù)點的功能。

首先，給提交按鈕綁定點擊事件：

("btn").onclick  function() {
    // 獲取產(chǎn)品單價并轉化成數(shù)字類型
    var price  Number(("price").innerText);
    // 獲取購買數(shù)量輸入框的值并轉化成數(shù)字類型
    var num  Number(("text").value);
    // 計算總價
    var result  price * num;
    // 四舍五入保留兩位小數(shù)，并將結果顯示到ID為result的標簽上
    ("result").innerHTML  (2);
}

測試結果

最后，在瀏覽器中打開我們編寫的頁面，可以輸入產(chǎn)品數(shù)量并點擊提交按鈕，頁面將會顯示計算結果并四舍五入保留兩位小數(shù)。