欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery實現(xiàn)計算器小功能

 更新時間:2022年07月21日 11:35:21   作者:lunaticCode1  
這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)計算器小功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下

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

用jquery實現(xiàn)計算器對于我來說有三個難點

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

解決

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

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

需要注意的地方

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

html代碼

<!DOCTYPE html>
<html>
?<head>
? <meta charset="utf-8" />
? <title>計算器</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對象全部返回
? 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);
? }
? //點擊等于號時
? else if(value=="="){
? ?var result="="+eval(temp);
? ?$screen.html(temp+result);
? ?clear=true;
? }
? //點擊其他按鈕時
? else{
? ?temp=temp+value;
? ?$screen.html(temp);
? }
??
}

效果展示

以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

  • jquery實現(xiàn)圖片自動輪播效果

    jquery實現(xiàn)圖片自動輪播效果

    這篇文章主要為大家詳細(xì)介紹了jquery實現(xiàn)圖片自動輪播效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-02-02
  • jquery autocomplete自動完成插件的的使用方法

    jquery autocomplete自動完成插件的的使用方法

    最近剛開始學(xué)jquery,想實現(xiàn)類似GOOGLE搜索時自動顯示出相關(guān)結(jié)果的效果。于是選擇了使用jquery autocomplete插件。
    2010-08-08
  • jQuery編程動畫的基本方法示例詳解

    jQuery編程動畫的基本方法示例詳解

    這篇文章主要為大家介紹了jQuery編程動畫基本實現(xiàn)方法示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
    2022-08-08
  • jQuery使用技巧簡單匯總

    jQuery使用技巧簡單匯總

    本文將詳細(xì)介紹下jQuery對象作為數(shù)組處理、創(chuàng)建一個空的jQuery對象、selector屬性、選擇隨機元素,感興趣的朋友可以參考下哈
    2013-04-04
  • jQuery取id有.的值的方法

    jQuery取id有.的值的方法

    用jQuery取值,當(dāng)一個id中含有.時,這個時候正常的取法是做不到的,因此請看下文
    2014-05-05
  • 基于jquery的圖片輪播 tab切換組件

    基于jquery的圖片輪播 tab切換組件

    最近在做手機上的web app,很多場景需要使用到類似tab切換和圖片輪播的東西,需要支持手勢和鼠標(biāo)點擊的,于是就基于jquery弄了一個,每一個參數(shù)有詳細(xì)的說明
    2012-07-07
  • jQuery插件Flexslider實現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果

    jQuery插件Flexslider實現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果

    這篇文章主要介紹了jQuery插件Flexslider實現(xiàn)圖片輪播、圖文結(jié)合滑動切換效果的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-07-07
  • jquery自動完成插件(autocomplete)應(yīng)用之PHP版

    jquery自動完成插件(autocomplete)應(yīng)用之PHP版

    一般網(wǎng)上這個用于搜索功能增強,增加用戶體驗,還是不錯的。
    2009-12-12
  • jQuery如何設(shè)置背景顏色

    jQuery如何設(shè)置背景顏色

    這篇文章主要介紹了jQuery如何設(shè)置背景顏色,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • jquery驗證手機號是否正確實例講解

    jquery驗證手機號是否正確實例講解

    這篇文章主要介紹了一個jquery驗證手機號是否正確的實踐案例,利用正則表達(dá)式進(jìn)行驗證,感興趣的小伙伴們可以參考一下
    2015-11-11

最新評論