本文主要介紹了jquery實(shí)現(xiàn)的簡單在線計(jì)算器功能,結(jié)合完整實(shí)例形式分析了jquery實(shí)現(xiàn)簡單四則運(yùn)算的相關(guān)操作技巧,需要的朋友可以參考下,希望能幫助到大家。
先來看看運(yùn)行效果圖:
完整代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://m.miracleart.cn/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://m.miracleart.cn/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery計(jì)算器</title> <style type="text/css"><!-- .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; } --></style><style type="text/css"> .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; }</style> <script src="jquery-1.7.2.min.js" type="text/JavaScript"></script> <script language="javascript"><!-- $(document).ready(function() {//傳說中的ready $("form p input:text").addClass("input");//找到form里面p包含的input標(biāo)簽類型為text的元素 jQuery強(qiáng)悍 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); }); }); // --></script> </head> <body style="text-align:center"> <form> <p class="p"> <p><span>jQuery簡單計(jì)算器</span></p> <p>第一個(gè)數(shù):<input type="text" id="num1" ></p> <p>第二個(gè)數(shù):<input type="text" id="num2" ></p> <p><input type="button" value=" + " id="jia"><input type="button" value=" - " id="jian"><input type="button" value=" * " id="cheng"><input type="button" value=" / " id="chu"></p> <p>結(jié)果:<input type="text" id="reset" /></p> </p> </form> </body> </html>
相關(guān)推薦:
PHP實(shí)現(xiàn)在線計(jì)算器功能示例代碼詳解
利用php+mysql來做一個(gè)功能強(qiáng)大的在線計(jì)算器_PHP教程
以上就是jQuery實(shí)現(xiàn)簡單在線計(jì)算器方法的詳細(xì)內(nèi)容,更多請(qǐng)關(guān)注php中文網(wǎng)其它相關(guān)文章!
每個(gè)人都需要一臺(tái)速度更快、更穩(wěn)定的 PC。隨著時(shí)間的推移,垃圾文件、舊注冊(cè)表數(shù)據(jù)和不必要的后臺(tái)進(jìn)程會(huì)占用資源并降低性能。幸運(yùn)的是,許多工具可以讓 Windows 保持平穩(wěn)運(yùn)行。
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://m.miracleart.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)