快捷導(dǎo)航

jquery實(shí)現(xiàn)計(jì)算器小功能

更新時(shí)間：2022年07月21日 11:35:21 作者：lunaticCode1

這篇文章主要為大家詳細(xì)介紹了jquery實(shí)現(xiàn)計(jì)算器小功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了jquery實(shí)現(xiàn)計(jì)算器功能的具體代碼，供大家參考，具體內(nèi)容如下

用jquery實(shí)現(xiàn)計(jì)算器對(duì)于我來(lái)說(shuō)有三個(gè)難點(diǎn)

1.單純的html頁(yè)面，怎么實(shí)現(xiàn)計(jì)算
2.顯示屏用什么標(biāo)簽，又怎么把他顯示出來(lái)
3.要想實(shí)現(xiàn)刪除，怎么把字符串最后一個(gè)字母刪除

解決

1.看了別人的計(jì)算器，我發(fā)現(xiàn)eval()可以實(shí)現(xiàn)這個(gè)目的
eg: alert(eval(“3+5”));
沒(méi)錯(cuò)，會(huì)彈出 8。
2.看了幾個(gè)人的博客，都是用span元素節(jié)點(diǎn)當(dāng)顯示屏，通過(guò)jQuery的html()函數(shù)來(lái)實(shí)現(xiàn)把內(nèi)容顯示出來(lái)。
3.有兩個(gè)思路，

一個(gè)是利用正則表達(dá)式，不過(guò)很多像我這樣的小白可能不會(huì)，我雖然學(xué)過(guò)，不過(guò)也差不多忘記了很多。
小姐姐告訴我，js文件中也可以用subString();

需要注意的地方

1.在html代碼中“<div id=“cal” οnclick=“f(event)>”
也就是說(shuō)只要點(diǎn)擊這個(gè)div，它就會(huì)響應(yīng)f(event)這個(gè)函數(shù)，這個(gè)函數(shù)定義在 js 代碼中。
2. 在js代碼function f(event){}中，this！= event.target；this表示的是id為cal的那個(gè)div的對(duì)象,event.target表示的是這個(gè)div的子級(jí)對(duì)象，比如點(diǎn)擊這個(gè)div的子級(jí)標(biāo)簽，eg:value="D"的input元素標(biāo)簽，那么event.target就為這個(gè)子級(jí)標(biāo)簽的對(duì)象

html代碼

<!DOCTYPE html>
<html>
?<head>
? <meta charset="utf-8" />
? <title>計(jì)算器</title>
? <link rel="stylesheet" type="text/css" href="css/cal.css" />
? <script type="text/javascript" src="jquery-1.7.2.js">
? </script>
? <script type="text/javascript" src="js/cal.js" ></script>
?</head>
?<body>
? <div id="cal" onclick="f(event)">
? ?<span id="screen"></span>
? ? ? ? ?<input type="button" value="D" />
? ?
? ? ? <input type="button" value="7" />
? ? ? <input type="button" value="8" />
? ? ? <input type="button" value="9" />
? ? ? <input type="button" value="+" />
??
? ? ? <input type="button" value="4" />
? ? ? <input type="button" value="5" />
? ? ? <input type="button" value="6" />
? ? ? <input type="button" value="-" />
? ? ??
? ? ? <input type="button" value="1" />
? ? ? <input type="button" value="2" />
? ? ? <input type="button" value="3" />
? ? ? <input type="button" value="*" />
? ? ??
? ? ? <input type="button" value="0" />
? ? ? <input type="button" value="." />
? ? ? <input type="button" value="=" />
? ? ? <input type="button" value="/" />
? </div>
?</body>
</html>

css代碼

*{
?margin: 0px;
?padding: 0px;
}
#cal{
?width: 300px;
?border: 4px solid black;
?margin: 50px auto;
}
#screen{
?line-height:46px;
?text-indent: 10px;
?float: left;
?margin: 10px 10px;
?width: 196px;
?height: 46px;
?border: 2px solid;
?
}
input{
?margin: 10px;
?height: 50px;
?width: 50px;
?background-color: honeydew;
}
input:active{
?background: red;
}

js代碼

var clear=false;
function f(event){
?var btn=event.target;
?var $screen=$("#screen");
?var temp=$screen.html();
?var value=$(btn).val();
?//將除INPUT對(duì)象全部返回
? if($(btn).prop("nodeName")!="INPUT"){
? return;
? }
? //判斷是否需要清除屏幕
? if(clear==true){
? temp="";
? clear=false;
? }
? //刪除操作
? if(value=="D"){
? ?temp=temp.substring(0,temp.length-1);
? $screen.html(temp);
? }
? //點(diǎn)擊等于號(hào)時(shí)
? else if(value=="="){
? ?var result="="+eval(temp);
? ?$screen.html(temp+result);
? ?clear=true;
? }
? //點(diǎn)擊其他按鈕時(shí)
? else{
? ?temp=temp+value;
? ?$screen.html(temp);
? }
??
}

效果展示