本文主要介紹了jQuery實現的簡單線上計算器功能,結合完整實例形式分析了jQuery實現簡單四則運算的相關操作技巧,需要的朋友可以參考下,希望能幫助到大家。 先來看看運行效果圖:完整程式碼如下: jQuery计算器 <!-- .p{ border:green 1px; border-style:solid; width:300px; text-align:center; } span{ background-color:#CCCCCC; font-size:32px; font-family:"微软雅黑"; } .input{ border: 1px solid #6666FF; } --> .p{ border:green 1px; border-style:solid; width:300px; text-align:center; } span{ background-color:#CCCCCC; font-size:32px; font-family:"微软雅黑"; } .input{ border: 1px solid #6666FF; } <!-- $(document).ready(function() {//传说中的ready $("form p input:text").addClass("input");//找到form里面p包含的input标签类型为text的元素 jQuery强悍 var num1,num2; $("#jia").click(function() { num1=parseFloat($("#num1").val()); num2=parseFloat($("#num2").val()); $("#reset").val(num1+num2); }); $("#jian").click(function() { num1=parseFloat($("#num1").val()); num2=parseFloat($("#num2").val()); $("#reset").val(num1-num2); }); $("#cheng").click(function() { num1=parseFloat($("#num1").val()); num2=parseFloat($("#num2").val()); $("#reset").val(num1*num2); }); $("#chu").click(function() { num1=parseFloat($("#num1").val()); num2=parseFloat($("#num2").val()); $("#reset").val(num1/num2); }); }); // --> jQuery简单计算器 第一个数: 第二个数: 结果: 登入後複製相關推薦:#PHP實作線上計算器功能範例程式碼詳解利用php+mysql來做一個功能強大的線上計算器_PHP教學一個簡單的線上計算器