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

js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法

 更新時(shí)間:2015年08月19日 11:05:06   作者:企鵝  
這篇文章主要介紹了js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法,可實(shí)現(xiàn)文本框輸入加減運(yùn)算式同時(shí)右側(cè)實(shí)時(shí)顯示對應(yīng)計(jì)算結(jié)果的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法。分享給大家供大家參考。具體如下:

這是一個(gè)網(wǎng)頁表單效果,讓表單內(nèi)的文本框支持加減運(yùn)算,不過你要按正確的運(yùn)算式輸入,要不然它沒有那么智能哦,比如輸入1+5,文本框旁邊會顯示計(jì)算結(jié)果,這要?dú)w功于JavaScript的功能。

運(yùn)行效果截圖如下:

在線演示地址如下:

http://demo.jb51.net/js/2015/js-math-input-method-codes/

具體代碼如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>支持加減運(yùn)算的文本框</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
body{color:#000;font-size:14px;font-family:Verdana,Arial,Helvetica,sans-serif,"宋體";}
input{border-style:solid;border-color:#868275;background-color:#f9f9f9;border-width:1px;color:#505050;vertical-align:middle;}
</style>
<script language=javascript>
function FloatAdd(arg1,arg2){
 var r1,r2,m;
 try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0}
 try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0}
 m=Math.pow(10,Math.max(r1,r2))
 return (arg1*m+arg2*m)/m
}
function FloatSubtr(arg1,arg2){
 return FloatAdd(arg1,-arg2);
}
function IsMoney(Money){
 if(/^[\d|+|.|-]+$/.test(Money)) return true;
 return false;
}
function result(){
 str=document.getElementById("buy").value;
 if(!(IsMoney(str))){
  document.getElementById("amount").innerHTML ="無效金額";
  return false;
 }
 var len=str.length,money=0,Num=0;
 var NumStr="",ctrlflag="x",cflag=0;
 for(var i=0;i<len; i++){
  c= str.charAt(i);
  if((c=="+")||(c=="-")){
   if(i+1<len){
    if ((str.charAt(i+1)=="+")||(str.charAt(i+1)=="-")) continue;
   }
   if((NumStr!="")&&(isNaN(NumStr))){
    if(isNaN(NumStr)){
     document.getElementById("amount").innerHTML ="輸入無效金額";
     return false;
    }
   }
   if(NumStr!=""){
   //alert("i:"+i+"NumStr:"+NumStr);
    if ((ctrlflag=="+")||(ctrlflag=="x")){
     Num=parseFloat(NumStr);
     //alert(ctrlflag+"money:"+money+"Num:"+Num);
     money=FloatAdd(money,Num);
     NumStr="";
     Num=0;
     ctrlflag=c;
    }
    else{
     //alert(money+"里面減了"+NumStr);
     Num=parseFloat(NumStr);
     money=FloatSubtr(money,Num);
     NumStr="";
     Num=0;
     ctrlflag=c;
    }
   }
   else{
    ctrlflag=c;
   }
  continue;
  }
  else{
   NumStr=NumStr+""+c;
  }
 }
 if((NumStr!="")&&(isNaN(NumStr))){
  if (isNaN(NumStr)){
   document.getElementById("amount").innerHTML ="無效金額"+NumStr;
   return false;
  }
 }
 if((ctrlflag=="-")&&(NumStr!="")){
  Num=parseFloat(NumStr); 
  money=FloatSubtr(money,Num);
 }
 if(((ctrlflag=="+")||(ctrlflag=="x"))&&((NumStr!=""))){
  Num=parseFloat(NumStr);
  money=FloatAdd(money,Num);
 }
 document.getElementById("amount").innerHTML =money;
}
</script>
</head>
<body>
請輸入加減計(jì)算式:<input id="buy" name="buy" maxlength="30" type="text" onkeyup="javascript:result();">
<span id="amount"></span>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計(jì)有所幫助。

相關(guān)文章

  • JavaScript的內(nèi)置對象Math和字符串詳解

    JavaScript的內(nèi)置對象Math和字符串詳解

    這篇文章主要為大家介紹了JavaScript的內(nèi)置對象Math和字符串,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2021-11-11
  • javascript Canvas動態(tài)粒子連線

    javascript Canvas動態(tài)粒子連線

    這篇文章主要為大家詳細(xì)介紹了javascript Canvas動態(tài)粒子連線,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-01-01
  • js給網(wǎng)頁加上背景音樂及選擇音效的方法

    js給網(wǎng)頁加上背景音樂及選擇音效的方法

    這篇文章主要介紹了js給網(wǎng)頁加上背景音樂及選擇音效的方法,涉及javascript操作音頻的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-03-03
  • 工作中常用js功能匯總

    工作中常用js功能匯總

    這篇文章主要介紹了一些工作中常用js功能的匯總,幫助大家提高工作效率,加深對js的理解,感興趣的朋友可以了解下
    2020-11-11
  • Javascript表單特效之十大常用原理性樣例代碼大總結(jié)

    Javascript表單特效之十大常用原理性樣例代碼大總結(jié)

    開頭說這個(gè)常用原理性樣例,大家可能不太清楚,這篇文章主要是針對實(shí)際開發(fā)中常用的一些代碼分析,主要是針對表單處理方法的一些資料,推薦大家收藏
    2016-07-07
  • TypeScript泛型參數(shù)默認(rèn)類型和新的strict編譯選項(xiàng)

    TypeScript泛型參數(shù)默認(rèn)類型和新的strict編譯選項(xiàng)

    這篇文章主要介紹了TypeScript泛型參數(shù)默認(rèn)類型和新的strict編譯選項(xiàng),對TypeScript感興趣的同學(xué),可以參考下
    2021-05-05
  • js實(shí)現(xiàn)人才網(wǎng)站職位選擇功能的方法

    js實(shí)現(xiàn)人才網(wǎng)站職位選擇功能的方法

    這篇文章主要介紹了js實(shí)現(xiàn)人才網(wǎng)站職位選擇功能的方法,涉及javascript動態(tài)操作頁面元素結(jié)點(diǎn)的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
    2015-08-08
  • KnockoutJs快速入門教程

    KnockoutJs快速入門教程

    這篇文章主要為大家分享了KnockoutJs快速入門教程,了解KnockoutJs到底是什么?如何使用KnockoutJS中的data-bind語法來將模型數(shù)據(jù)綁定到DOM元素中,感興趣的小伙伴們可以參考一下
    2016-05-05
  • js實(shí)現(xiàn)網(wǎng)頁定位導(dǎo)航功能

    js實(shí)現(xiàn)網(wǎng)頁定位導(dǎo)航功能

    這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)網(wǎng)頁定位導(dǎo)航功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • TypeScript開發(fā)中規(guī)范編碼來提高代碼的可讀性

    TypeScript開發(fā)中規(guī)范編碼來提高代碼的可讀性

    在TypeScript中,我們通過使用類型別名reference指令、類型守衛(wèi)、泛型、接口、類型別名等來提高代碼的可維護(hù)性以及可讀性,這篇文章主要介紹了TypeScript開發(fā)中規(guī)范編碼來提高代碼的可讀性,需要的朋友可以參考下
    2023-12-12

最新評論