js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法
本文實(shí)例講述了js實(shí)現(xiàn)文本框支持加減運(yùn)算的方法。分享給大家供大家參考。具體如下:
這是一個(gè)網(wǎng)頁(yè)表單效果,讓表單內(nèi)的文本框支持加減運(yùn)算,不過(guò)你要按正確的運(yùn)算式輸入,要不然它沒(méi)有那么智能哦,比如輸入1+5,文本框旁邊會(huì)顯示計(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 ="無(wú)效金額";
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 ="輸入無(wú)效金額";
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 ="無(wú)效金額"+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>
請(qǐng)輸入加減計(jì)算式:<input id="buy" name="buy" maxlength="30" type="text" onkeyup="javascript:result();">
<span id="amount"></span>
</body>
</html>
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
相關(guān)文章
Bootstrap實(shí)現(xiàn)帶暫停功能的輪播組件(推薦)
最近小編在項(xiàng)目中用到了一款帶輪播組件,功能非常齊全,可以設(shè)置各種標(biāo)題樣式、動(dòng)畫(huà)效果、輪播時(shí)間、開(kāi)始暫停等功能,下面小編通過(guò)本文給大家詳細(xì)介紹下實(shí)現(xiàn)過(guò)程,需要的朋友參考下吧2016-11-11
基于javascript實(shí)現(xiàn)精確到毫秒的倒計(jì)時(shí)限時(shí)搶購(gòu)
現(xiàn)如今做電商網(wǎng)站必不可少的一個(gè)效果就是限時(shí)搶購(gòu),這也是各大電商網(wǎng)站的一種促銷(xiāo)手段。如何實(shí)現(xiàn)倒計(jì)時(shí)限時(shí)搶購(gòu),本文為大家分享了javascript實(shí)現(xiàn)倒計(jì)時(shí)限時(shí)搶購(gòu)的的相關(guān)代碼,感興趣的小伙伴們可以參考一下2016-04-04
uniapp使用第三方UI庫(kù)uview-plus的方法
uview-plus是uni-app全面兼容nvue的uni-app生態(tài)框架,全面的組件和便捷的工具會(huì)讓您信手拈來(lái),下面這篇文章主要給大家介紹了關(guān)于uniapp使用第三方UI庫(kù)uview-plus的方法,需要的朋友可以參考下2023-04-04
PHP自動(dòng)加載autoload和命名空間的應(yīng)用小結(jié)
PHP的自動(dòng)加載就是我們加載實(shí)例化類(lèi)的時(shí)候,不需要手動(dòng)去寫(xiě)require來(lái)導(dǎo)入這個(gè)class.php文件,程序自動(dòng)幫我們加載導(dǎo)入進(jìn)來(lái)這.篇文章主要介紹了PHP自動(dòng)加載autoload和命名空的應(yīng)用,需要的朋友可以參考下2017-12-12
ES6中解構(gòu)賦值的語(yǔ)法及用法實(shí)例
ES6的解構(gòu)賦值是一種快速方便的方法,可以從數(shù)組或?qū)ο笾刑崛≈挡⑵滟x值給變量,下面這篇文章主要給大家介紹了關(guān)于ES6中解構(gòu)賦值的語(yǔ)法及用法的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
由淺入深講解Javascript繼承機(jī)制與simple-inheritance源碼分析
Javascript語(yǔ)言對(duì)繼承實(shí)現(xiàn)的并不好,需要工程師自己去實(shí)現(xiàn)一套完整的繼承機(jī)制。下面我們由淺入深的系統(tǒng)掌握使用javascript繼承的技巧,對(duì)javascript繼承相關(guān)知識(shí)感興趣的朋友一起看看吧2015-12-12
javaScript同意等待代碼實(shí)現(xiàn)心得
javaScript功能描述:本程序?qū)崿F(xiàn)在同意某某協(xié)議頁(yè)面對(duì)同意按鈕進(jìn)行十秒鐘的禁用,同時(shí)在按鈕的Value顯示倒計(jì)時(shí)。2011-01-01
JavaScript中FontFace對(duì)象的使用方式
這篇文章主要介紹了JavaScript中FontFace對(duì)象的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
BootStrap Validator 版本差異問(wèn)題導(dǎo)致的submitHandler失效問(wèn)題的解決方法
這篇文章主要介紹了BootStrap Validator 版本差異問(wèn)題導(dǎo)致的submitHandler失效問(wèn)題的解決方法,下面通過(guò)本文給大家詳細(xì)說(shuō)明一下,需要的朋友可以參考下2016-12-12

