html實現簡單的計算功能與實時更新時間
阿新 • • 發佈：2018-11-17
簡單的計算器
實時更新時間
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>線上計算器</title> <style> table { margin: auto; text-align: center; background-color: darkgray; } div { width: 500px; height: 500px; border: 10 solid black; margin: auto; } </style> <script> function result(op) { var num1, num2; num1 = Number(document.getElementById("num1").value); num2 = Number(document.getElementById("num2").value); switch(op) { case '+': document.getElementById("result").value = num1 + num2; break; case '-': document.getElementById("result").value = num1 - num2; break; case '*': document.getElementById("result").value = num1 * num2; break; case '/': document.getElementById("result").value = num1 / num2; break; } } </script> </head> <body> <div> <p align="center" style="margin-top: 100px;"> 當地時間：<input type="text" id="1" size="22" /> <script> function a() { var data = new Date(); var time = data.toLocaleString(); document.getElementById("1").value = time; } setInterval("a()", 1) </script> </p> <table> <tr> <td colspan="4">簡單計算器<br/> <hr/> </td> </tr> <tr> <td colspan="4">第一個數<input type="text" id="num1" /></td> </tr> <tr> <td colspan="4">第二個數<input type="text" id="num2" /><br/> <hr/> </td> </tr> <tr> <td> <input type="button" value="+" onclick="result('+')" /> </td> <td> <input type="button" value="-" onclick="result('-')" /> </td> <td> <input type="button" value="*" onclick="result('*')" /> </td> <td> <input type="button" value="/" onclick="result('/')" /> </td> </tr> <tr> <td colspan="4"> <hr/> </td> </tr> <tr> <td colspan="4">計算結果<input type="text" id="result" /></td> </tr> </table> </div> </body> </html>