jquery 怎么寫汽車計(jì)算器

你自己看著辦吧，無非提供個(gè)想法，因?yàn)椴粫?huì)使用腳本，只會(huì)使用框架（并且僅局限于jquery） table tdinput id="num1" //td td

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)公司！專注于網(wǎng)頁設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團(tuán)企業(yè)網(wǎng)站建設(shè)等服務(wù)項(xiàng)目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了達(dá)拉特免費(fèi)建站歡迎大家使用！

怎么在網(wǎng)頁上制作一個(gè)簡(jiǎn)易計(jì)算器

(1)先畫個(gè)頁面，把每個(gè)數(shù)字 運(yùn)算符號(hào)放進(jìn)去；

(2)然后每個(gè)數(shù)字 符號(hào)綁定一個(gè)事件，這個(gè)事件獲取數(shù)字或者符號(hào)的值，放進(jìn)一個(gè)Input框；

(3)點(diǎn)擊計(jì)算，把Input框的字符串表達(dá)式計(jì)算，eval("1*2")；

(4)還有計(jì)算前要對(duì)表達(dá)式進(jìn)行校驗(yàn),不規(guī)則的表達(dá)式不能計(jì)算。

利用jQuery插件機(jī)制實(shí)現(xiàn)簡(jiǎn)單網(wǎng)頁計(jì)算器。

function(e)中e沒用到，干嘛的？直接用c=a+b不行嗎？jQuery.add(a,b)沒用過不清楚

如何使用jquery寫一個(gè)計(jì)算器

style 2 ?? ? ? ?.main{ 3 ? ? ? ? ? ? margin: 0 auto; 4 ? ? ? ? ? ? text-align: center; 5 ?? ? ? ?} 6 ? ? ? ? *{ 7 ? ? ? ? ? ? padding: 0; 8 ? ? ? ? ? ? margin: 0; 9 ?? ? ? ?}10 ?? ? ? ?table {11 ?? ? ? ? ? ?margin: auto;12 ? ? ? ? ? ? border-collapse: collapse;13 14 ?? ? ? ?}15 ?? ? ? ?span{16 ? ? ? ? ? ? display: inline-block;17 ? ? ? ? ? ? text-align:center;18 ? ? ? ? ? ? font-size: 30px;19 ?? ? ? ? ? ?width: 404px;20 ?? ? ? ? ? ?height: 100px;21 ? ? ? ? ? ? background-color: darkgrey;22 23 ?? ? ? ?}24 ?? ? ? ?table td{25 ? ? ? ? ? ? text-align: center;26 ?? ? ? ? ? ?width: 100px;27 ?? ? ? ? ? ?height: 100px;28 ? ? ? ? ? ? line-height: 100px;29 ? ? ? ? ? ? background-color: lightgrey;30 ?? ? ? ? ? ?border:1px solid darkgrey;31 ?? ? ? ?}32 ? ? /style

html部分：

div class="main"

span id="input"

/span

table

tbody

tr

tdC/td

tdD/td

td./td

td*/td

/tr

tr

td7/td

td8/td

td9/td

td-/td

/tr

tr

td4/td

td5/td

td6/td

td+/td

/tr

tr

td1/td

td2/td

td3/td

td//td

/tr

tr

td(/td

td0/td

td)/td

td=/td

/tr

/tbody

/table

/div

jquery部分：

1 script type="text/javascript" src="jquery-3.2.1.min.js"/script 2 script ?type="text/javascript" 3 ?? ?$(function(){ 4 ? ? ? ? ? ? var $td=$("td"); 5 ? ? 6 ?? ? ? ?$td.each(function(){ 7 ? ? ? ? ? ? $(this).click(function(){ 8 ? ? ? ? ? ? ? ? var Text=$("#input").text().trim(); 9 ? ? ? ? ? ? ? ? $("#input").append($(this).text());10 ? ? ? ? ? ? ? ? switch ($(this).text()){11 ? ? ? ? ? ? ? ? ? ? case "C":12 ? ? ? ? ? ? ? ? ? ? ? ? $("#input").text("");13 ? ? ? ? ? ? ? ? ? ? ? ? break;14 ? ? ? ? ? ? ? ? ? ? case "D":15 ? ? ? ? ? ? ? ? ? ? ? ? $("#input").text(Text.substr(0,Text.length-1));16 ? ? ? ? ? ? ? ? ? ? ? ? break;17 ? ? ? ? ? ? ? ? ? ? case "=":18 ?? ? ? ? ? ? ? ? ? ? ? ?function ?compute(content){19 ? ? ? ? ? ? ? ? ? ? ? ? ? ? var index=content.lastIndexOf("(");20 ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(index-1){21 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var nextIndex=content.indexOf(")",index);22 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(nextIndex-1){23 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? //遞歸的思想,一步一步的遞歸24 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? var result=compute(content.substring(index+1,nextIndex));25 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return ? ?compute(content.substring(0,index)+(""+result)+content.substring(nextIndex+1))26 ?? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?}27 28 ?? ? ? ? ? ? ? ? ? ? ? ? ? ?}29 ? ? ? ? ? ? ? ? ? ? ? ? ? ? index=content.indexOf("+");30 ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(index-1){31 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return compute(content.substring(0,index))+compute(content.substring(index+1));32 ?? ? ? ? ? ? ? ? ? ? ? ? ? ?}33 ? ? ? ? ? ? ? ? ? ? ? ? ? ? index=content.lastIndexOf("-");34 ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(index-1){35 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return compute(content.substring(0,index))-compute(content.substring(index+1));36 ?? ? ? ? ? ? ? ? ? ? ? ? ? ?}37 ? ? ? ? ? ? ? ? ? ? ? ? ? ? //如果返回的content為空,則返回038 ? ? ? ? ? ? ? ? ? ? ? ? ? ? index=content.indexOf("*");39 ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(index-1){40 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return compute(content.substring(0,index))*compute(content.substring(index+1));41 ?? ? ? ? ? ? ? ? ? ? ? ? ? ?}42 ? ? ? ? ? ? ? ? ? ? ? ? ? ? index=content.lastIndexOf("/");43 ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(index-1){44 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return compute(content.substring(0,index))/compute(content.substring(index+1));45 ?? ? ? ? ? ? ? ? ? ? ? ? ? ?}46 ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(content==""){47 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return 0;48 ? ? ? ? ? ? ? ? ? ? ? ? ? ? }else{49 ? ? ? ? ? ? ? ? ? ? ? ? ? ? //將content字符串轉(zhuǎn)化為數(shù)值,50 ? ? ? ? ? ? ? ? ? ? ? ? ? ? //這兒也可以使用一些技巧,比如 content-1+1,使用加減操作符,將字符串轉(zhuǎn)化為數(shù)值51 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return Number(content);52 ?? ? ? ? ? ? ? ? ? ? ? ? ? ?}53 ?? ? ? ? ? ? ? ? ? ? ? ?}54 ? ? ? ? ? ? ? ? ? ? ? ? $("#input").text(compute(Text));55 ?? ? ? ? ? ? ? ?}56 ?? ? ? ? ? ?})57 58 ?? ? ? ?});59 ?? ?})6064 /script

代碼詳解

思路：

1給每個(gè)td元素添加一個(gè)click事件，通過判斷點(diǎn)擊不同的按鈕來實(shí)現(xiàn)不同的行為，例如：當(dāng)判斷點(diǎn)擊的元素是操作符“C”的時(shí)候，使用

$("#input").text("");來清空元素

2實(shí)現(xiàn)計(jì)算的思路：

最后做出的代碼使用了遞歸的思想，思路如下：

（1）在點(diǎn)擊等號(hào)之后，獲取到輸入的運(yùn)算式，這個(gè)運(yùn)算式是以字符串的形式存在的，運(yùn)行compute函數(shù)，這個(gè)函數(shù)的目的是循環(huán)查找在字符串中的操作符，在找到操作符之后，將字符串中的以操作符為間隔分為兩部分，對(duì)于每一部分再進(jìn)行compute函數(shù)的運(yùn)算，再查找運(yùn)算符，在進(jìn)行一次運(yùn)算，循環(huán)，這樣一直循環(huán)嵌套，一直運(yùn)算到?jīng)]有出現(xiàn)運(yùn)算符為止

（2）實(shí)現(xiàn)優(yōu)先級(jí)的代碼：

我們知道，在等式運(yùn)算中，加號(hào)和減號(hào)的地位是相同的，乘號(hào)和除號(hào)地位是相同的，先乘除后加減，這就是運(yùn)算符的優(yōu)先問題，如何實(shí)現(xiàn)運(yùn)算符優(yōu)先問題呢？

在這個(gè)代碼中，是通過根據(jù)判斷不同運(yùn)算符是否存在的順序先后來實(shí)現(xiàn)的，在代碼中下面這一段代碼：

index=content.indexOf("+");30 ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(index-1){31 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return compute(content.substring(0,index))+compute(content.substring(index+1));32 ? ? ? ? ? ? ? ? ? ? ? ? ? ? }33 ? ? ? ? ? ? ? ? ? ? ? ? ? ? index=content.lastIndexOf("-");34 ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(index-1){35 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return compute(content.substring(0,index))-compute(content.substring(index+1));36 ? ? ? ? ? ? ? ? ? ? ? ? ? ? }37 ? ? ? ? ? ? ? ? ? ? ? ? ? ? //如果返回的content為空,則返回038 ? ? ? ? ? ? ? ? ? ? ? ? ? ? index=content.indexOf("*");39 ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(index-1){40 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return compute(content.substring(0,index))*compute(content.substring(index+1));41 ? ? ? ? ? ? ? ? ? ? ? ? ? ? }42 ? ? ? ? ? ? ? ? ? ? ? ? ? ? index=content.lastIndexOf("/");43 ? ? ? ? ? ? ? ? ? ? ? ? ? ? if(index-1){44 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? return compute(content.substring(0,index))/compute(content.substring(index+1));45 ? ? ? ? ? ? ? ? ? ? ? ? ? ? }

在上面的代碼中，先判斷的加減號(hào)，后判斷的乘除號(hào)，這里解決的是優(yōu)先級(jí)問題，

例如下面等式： 1+2*3+4

在程序中，先查找到加號(hào)運(yùn)算符，分成兩部分，1和 2*3+4 ?在后面的那一部分中，在進(jìn)行循環(huán)運(yùn)算，根據(jù)程序，先查找加號(hào)，又分為了兩部分，2*3和4對(duì)于2*3運(yùn)行函數(shù)，找到了*號(hào)運(yùn)算符，這時(shí)候沒有多余的運(yùn)算符，直接計(jì)算2*3等式。

注意知識(shí)點(diǎn)：

1，$(selector).trim()用于消除字符串之間的間隔；

2，$(selecoor).each（function(){}）用于遍歷每個(gè)元素，

3，$(seletor).text()用于獲取匹配元素內(nèi)的文本，注意：

在我們使用的是$(selector).text()來獲取元素的，在一般的情況下 對(duì)于$("td").[0]===$("td:eq(0)")===document.getElementByTagName("td")[0]是等價(jià)的

如果我們要獲取元素內(nèi)的文本元素，我們需要通過$("td:eq(0)")來獲得，而對(duì)于$("td").[0]則獲取不到，因此，要注意，不要混用

4，對(duì)于字符串的操作方法：

在ECMAScript中存在三種基于子字符串創(chuàng)建新字符串的方法：

slice() ?, substr()和 substring()這三種方法都會(huì)返回被操作字符的一個(gè)子字符串，

當(dāng)接受兩個(gè)參數(shù)的時(shí)候，第一個(gè)參數(shù)指定字符串的開始位置，第二個(gè)參數(shù)指定子字符串在哪里結(jié)束，

對(duì)于slice()，substring()和substr()第二個(gè)參數(shù)表示的意思還不同

對(duì)于slice()和substring()第二個(gè)參數(shù)表示子字符串最后一個(gè)字符后面的位置

而對(duì)于substr()表示的是返回的字符個(gè)數(shù)：

代碼如下：

var stringValue="hello world";

alert(stringValue.substring(3,7));//"lo w"

alert(stringValue.slice(3,7));//"lo w"

alert(stringValue.substr(3,7)//"lo worl"

如上：

字符串的序號(hào)從零開始，對(duì)于substring()和slice（）截取的是從3開始到7后面的那個(gè)字符結(jié)束的位置，實(shí)際上不包括字符位置為7的位置（最后截取的字符串因此不包括字符"o"）,但是包括一開始就截取的開頭的字符（"l"）

而對(duì)于substr()表示的是從3的位置開始，要截取7個(gè)字符的字符長(zhǎng)度作為字符串

如果沒有第二個(gè)參數(shù)，這表示將字符串的長(zhǎng)度作為結(jié)束位置：代碼如下：

alert(stringValue.substring(3));

alert(stringValue.slice(3));

alert(stringValue.substr(3))

最后輸出結(jié)果均為：

"lo world"

jQuery實(shí)現(xiàn)計(jì)算器怎樣去寫連續(xù)加減法還有小數(shù)點(diǎn)

放一個(gè)輸入框和計(jì)算按鈕

input type="text" id="xxx" /

input type="button" value="計(jì)算" onclick="test()" /

然后在js里面寫

function test() {

var str = $('#xxx').val();

var result = eval(str);

alert(result);

}

當(dāng)前標(biāo)題：jquery計(jì)算器.,jquery簡(jiǎn)易計(jì)算器
網(wǎng)站路徑：http://aaarwkj.com/article30/dssjoso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站營銷、網(wǎng)站改版、關(guān)鍵詞優(yōu)化、小程序開發(fā)、響應(yīng)式網(wǎng)站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)