js 移动端的输入金额的键盘

来源：互联网发布：javascript 取消 bind 编辑：程序博客网时间：2024/06/06 07:30

css篇

<style>

.nubmer {
float: left;
clear: right;
width: 32%;
height: 45px;
padding-top: 10px;
color: #009ad6;
font-size:35px;
font-weight:bold;
text-align: center;
}
.btn_shoukan{
text-align: center;
}
.btn_shoukan img{
margin-top: 10%;
}
.shoukanFont{
position: absolute;
margin-top:-35px;
left: 45%;
color:#FFF;
}
*{
margin:0px;
padding:0px;
}
.head{
background-color:#33a3dc;
width: auto;
height:180px;
}
.money{
padding-top:80px;
text-align:center;
font-size:30px;
color:#fff;
}
.money_xian{
width: 140px;
text-align: center;
padding-left: 120px;
display: block;
padding-top: 5px;
}

</style>

js脚本：
<script type="text/javascript">
var str="";
function getName(num){
if(str.indexOf('.')!=-1&&num=='.'){
num='';
}
if(num=="a"){
if(str.length>0){
str=str.substring(0,str.length-1);
}else{
str="";
}
}else if(str.length==0&&num=='.'){
str='';
}else{
str+=num;

}
if(str.indexOf('.')!=-1){
str+='';
$(".money").text("¥ "+str);
}else{
$(".money").text("¥ "+str+".00");
};
if(str.substring(0, 2)=="00"){
str='';
};

if(str==""){
$(".money").text("￥0.00");
};
};
function Article(){
if(str!=""&& str!="￥0.00"){

if(str>=100&&str<=20000){

window.location.href="QuickPayment.jsp";
}else{
layer.msg("金额只能在100~20000之间");
};
}else{
layer.msg("请输入金额！");
}
}

</script>
页面内容：
<body>
<div>
<div class="head">
<div>
<div class="money">￥ 0.00</div>
<div class="money_xian"><hr/></div>
</div>
</div>
<div style="padding-top:20%; padding-left: 5px;">
<div class="nubmer" onClick="getName('1',this)" style="text-align: center;">1</div>
<div class="nubmer" onClick="getName('2',this)">2</div>
<div class="nubmer" onClick="getName('3')">3</div>
<div class="nubmer" onClick="getName('4')">4</div>
<div class="nubmer" onClick="getName('5')">5</div>
<div class="nubmer" onClick="getName('6')">6</div>
<div class="nubmer" onClick="getName('7')">7</div>
<div class="nubmer" onClick="getName('8')">8</div>
<div class="nubmer" onClick="getName('9')">9</div>
<div class="nubmer" onClick="getName('0')">0</div>
<div class="nubmer" onClick="getName('.')">.</div>
<div class="nubmer" onClick="getName('a')"><img alt="" src="<%=basePath%>imgs/zhifupay/icon_empty.png"></div>
</div>
</div>
<div class="btn_shoukan" onClick="Article()">
<div><img alt="" src="<%=basePath%>imgs/zhifupay/btn_shoukuan.png"></div>
<div class="shoukanFont">收款</div>
</div>

</body>

实现效果如下：

阅读全文

0 0