DOM程式設計練習(一)
阿新 • • 發佈:2019-01-25
1、製作頁面版的資產折舊計算器。
需求:使用者在頁面上錄入資產原價、折舊率以及計算年限,單擊“計算”按鈕後,計算該資產的折舊價值並顯示在頁面上。
===================================答案=======================================
html程式碼:
</head> <style> div{ width:200px; } </style> <body> <h3>Number物件:計算資產的折舊</h3> <table> <tr> <td> 錄入資產採購時的價值: </td> <td> <input id="inp1" type="text" value="10000"/> </td> </tr> <tr> <td> 錄入折舊率: </td> <td> <input id="inp2" type="text" value="0.15" /> </td> </tr> <tr> <td> 錄入計算年限: </td> <td> <input id="inp3" type="text" value="5"/> </td> </tr> <tr> <td> <input id="count" type="button" value="計算" onclick="count()"/> </td> </tr> <tr> <th>年限 剩餘價值</th> </tr> </table> <div id="maindiv"></div> </body> <script type="text/jscript" src="depreciation.js" language="javascript"></script> </html>
depreciation.js檔案程式碼:
function count(){ var total = document.getElementById("inp1"); var total_v = total.value; var rate = document.getElementById("inp2"); var rate_v = rate.value; var year = document.getElementById("inp3"); var year_v = year.value; var divmain = document.getElementById("maindiv"); for(var i =1;i<=year_v;i++){ var inputcount = document.createElement("input"); inputcount.id="inp"+i; var result =total_v*Math.pow((1-rate_v),i); inputcount.value=i+" "+result.toFixed(2); divmain.appendChild(inputcount); } }
實現效果如圖: