HTML練習（網頁計算器）
阿新 • • 發佈：2017-06-06
ext else oos bsp height title action element ntb 
1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 5 <title>Insert title here</title> 6 <script> 7 var str;View Code8 var num; 9 function count(ch) 10 { 11 str=document.getElementById("show"); 12 if(ch=="C") 13 { 14 str.value="0"; 15 } 16 else if(ch=="←") 17 { 18 str.value=str.value.substr(0,str.value.length-1); 19 if(str.value.length==0) 20 str.value="0"; 21 } 22 else if(ch==‘%‘&&str.value=="0") 23 { 24 ; 25 } 26 else 27 { 28 if(str.value=="0") 29 str.value=""; 30 str.value=str.value+ch; 31 } 32 } 33 function ans() 34 { 35 str=document.getElementById("show"); 36 num=eval(str.value); 37 str.value=num; 38 } 39 </script> 40 </head> 41 <body> 42 <form action="" name="cal"> 43 <h1 align="center" style="color:#FF00FF;">計算器</h1> 44 <p align="center"> <input type="text" id="show" value="0" style="text-align: right;width: 250px; height: 30px;color:#0000FF;"></input></p> 45 <p align="center"> <input type="button" name="cal_cle" value="C" style="width: 70px; height: 30px;font-size:20px;" onClick="count(‘C‘)"></input> 46 <input type="button" name="cal_pre" value="←" style="width: 70px; height: 30px;font-size:20px;" onClick="count(‘←‘)"></input> 47 <input type="button" name="cal_pre" value="%" style="width: 70px; height: 30px;font-size:20px;" onClick="count(‘%‘)"></input> 48 </p> 49 <p align="center"> <input type="button" name="cal_1" value="1" style="width: 50px; height: 30px;font-size:20px;" onClick="count(1)"></input> 50 <input type="button" name="cal_2" value="2" style="width: 50px; height: 30px;font-size:20px;" onClick="count(2)"></input> 51 <input type="button" name="cal_3" value="3" style="width: 50px; height: 30px;font-size:20px;" onClick="count(3)"></input> 52 <input type="button" name="cal_mul" value="*" style="width: 50px; height: 30px;font-size:20px;" onClick="count(‘*‘)"></input> 53 </p> 54 <p align="center"> <input type="button" name="cal_4" value="4" style="width: 50px; height: 30px;font-size:20px;" onClick="count(4)"></input> 55 <input type="button" name="cal_5" value="5" style="width: 50px; height: 30px;font-size:20px;" onClick="count(5)"></input> 56 <input type="button" name="cal_6" value="6" style="width: 50px; height: 30px;font-size:20px;" onClick="count(6)"></input> 57 <input type="button" name="cal_div" value="/" style="width: 50px; height: 30px;font-size:20px;" onClick="count(‘/‘)"></input> 58 </p> 59 <p align="center"> <input type="button" name="cal_7" value="7" style="width: 50px; height: 30px;font-size:20px;" onClick="count(7)"></input> 60 <input type="button" name="cal_8" value="8" style="width: 50px; height: 30px;font-size:20px;" onClick="count(8)"></input> 61 <input type="button" name="cal_9" value="9" style="width: 50px; height: 30px;font-size:20px;" onClick="count(9)"></input> 62 <input type="button" name="cal_add" value="+" style="width: 50px; height: 30px;font-size:20px;" onClick="count(‘+‘)"></input> 63 </p> 64 <p align="center"> <input type="button" name="cal_0" value="0" style="width: 50px; height: 30px;font-size:20px;" onClick="count(0)"></input> 65 <input type="button" name="cal_dot" value="." style="width: 50px; height: 30px;font-size:20px;" onClick="count(‘.‘)"></input> 66 <input type="button" name="cal_equ" value="=" style="width: 50px; height: 30px;font-size:20px;" onClick="ans()"></input> 67 <input type="button" name="cal_sub" value="-" style="width: 50px; height: 30px;font-size:20px;" onClick="count(‘-‘)"></input> 68 </p> 69 </form> 70 </body> 71 </html>
HTML練習（網頁計算器）