首页 > 代码库 > jQuery/javascript实现简单网页计算器
jQuery/javascript实现简单网页计算器
1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>jQuery实现</title> 5 <script src="http://www.mamicode.com/jquery.js"></script> 6 7 <style type="text/css"> 8 table{background-color:pink;width:300px;height:200px;} 9 td{text-align:center;}10 </style>11 12 <script language="javascript">13 $("document").ready(function(){14 $("#b1").click(function(){15 var num1=$("#num1").val();16 var num2=$("#num2").val();17 var num3=eval(num1)+eval(num2);18 $("#num3").val(num3);19 20 });21 22 $("#b2").click(function(){23 var num1=$("#num1").val();24 var num2=$("#num2").val();25 var num3=eval(num1)-eval(num2);26 $("#num3").val(num3);27 });28 29 $("#b3").click(function(){30 var num1=$("#num1").val();31 var num2=$("#num2").val();32 var num3=eval(num1)*eval(num2);33 $("#num3").val(num3);34 });35 36 $("#b4").click(function(){37 var num1=$("#num1").val();38 var num2=$("#num2").val();39 var num3=eval(num1)/eval(num2);40 $("#num3").val(num3);41 });42 });43 </script>44 </head>45 <body>46 <center>47 <form action="" method="post">48 <table border="1px">49 <tr>50 <td>数字1：</td>51 <td><input type="text" id="num1"/></td>52 </tr>53 <tr>54 <td>数字2：</td>55 <td><input type="text" id="num2"/></td>56 </tr>57 <tr>58 <td>结果：</td>59 <td><input type="text" id="num3"/></td>60 </tr>61 <tr>62 <td colspan="4">63 <input type="button" value="http://www.mamicode.com/加" id="b1"/>64 <input type="button" value="http://www.mamicode.com/减" id="b2"/>65 <input type="button" value="http://www.mamicode.com/乘" id="b3"/>66 <input type="button" value="http://www.mamicode.com/除" id="b4"/> 67 </td>68 </tr>69 </table>70 </form>71 <center>72 </body>73 </html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>九九乘法表</title> <style type="text/css"> table{ background-color:pink; color:red; } </style></head><body> <h1>计算器</h1> <table border="1" align="center"> <tr> <td>数值1：<input type="text" name="num1" id="num1"/></td> </tr> <tr> <td>数值2：<input type="text" name="num2" id="num2"/></td> </tr> <tr> <td>结 果：<input type="text" name="num3" id="num3"/></td> </tr> <tr> <td colspan="4"><input type="button" value="http://www.mamicode.com/加法" style="color:blue;" onclick="add()"/> <input type="button" value="http://www.mamicode.com/减法" style="color:blue;" onclick="reduce()"/> <input type="button" value="http://www.mamicode.com/乘法" style="color:blue;" onclick="multiplication()"/> <input type="button" value="http://www.mamicode.com/除法" style="color:blue;" onclick="division()"/> </td> </tr> </table> <script language="javascript"> function add(){ var num1=document.getElementById("num1").value; var num2=document.getElementById("num2").value; if(parseInt(num1)==num1){ var num1=parseInt(num1); }else{ var num1=parseFloat(num1); num1=parseFloat(num1.toFixed(2)); } if(parseInt(num2)==num2){ var num2=parseInt(num2); }else{ var num2=parseFloat(num2); num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/ } document.getElementById("num3").value=http://www.mamicode.com/num1+num2; } function reduce(){ var num1=document.getElementById("num1").value; var num2=document.getElementById("num2").value; if(parseInt(num1)==num1){ var num1=parseInt(num1); }else{ var num1=parseFloat(num1); num1=parseFloat(num1.toFixed(2)); } if(parseInt(num2)==num2){ var num2=parseInt(num2); }else{ var num2=parseFloat(num2); num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/ } document.getElementById("num3").value=http://www.mamicode.com/num1-num2; } function multiplication(){ var num1=document.getElementById("num1").value; var num2=document.getElementById("num2").value; if(parseInt(num1)==num1){ var num1=parseInt(num1); }else{ var num1=parseFloat(num1); num1=parseFloat(num1.toFixed(2)); } if(parseInt(num2)==num2){ var num2=parseInt(num2); }else{ var num2=parseFloat(num2); num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/ } document.getElementById("num3").value=http://www.mamicode.com/num1*num2; } function division(){ var num1=document.getElementById("num1").value; var num2=document.getElementById("num2").value; if(parseInt(num1)==num1){ var num1=parseInt(num1); }else{ var num1=parseFloat(num1); num1=parseFloat(num1.toFixed(2)); } if(parseInt(num2)==num2){ var num2=parseInt(num2); }else{ var num2=parseFloat(num2); num2=parseFloat(num2.toFixed(2));/*小数点尾度精确到2*/ } document.getElementById("num3").value=http://www.mamicode.com/num1/num2;"color: #000000;"> } </script></body></html>
jQuery/javascript实现简单网页计算器
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。