4前端案例-输入金额样式

 

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style type="text/css">
li{list-style: none;}
#sr_je {
width: 350px;
height: 350px;
background-color: #C4D2DB;
border-radius: 10px;
}
#sr_je ul{
width: 350px;
padding: 15px;
}
#sr_je ul li{
font-weight:700;
width: 55px;
height:55px;
margin: 10px;
float:left;
border: 1px solid #000;
border-radius: 15px;
background: #fff;
text-align: center;
line-height:55px;
font-size:22px;
-moz-box-shadow: 0px 5px 5px #555; /* 老的 Firefox */
box-shadow: 0px 5px 5px #555;
}
#sr_je ul .lanse{
border: 1px solid #93AFC2;
background: #93AFC2;
color: #fff;
}
</style>

<div id="sr_je" style="display: none;">
<ul>
<li onclick="dianji(1);">1</li>
<li onclick="dianji(2);">2</li>
<li onclick="dianji(3);">3</li>
<li class="lanse" onclick="tuige();">退格</li>
<li onclick="dianji(4);">4</li>
<li onclick="dianji(5);">5</li>
<li onclick="dianji(6);">6</li>
<li class="lanse" onclick="qingkong();">清空</li>
<li onclick="dianji(7);">7</li>
<li onclick="dianji(8);">8</li>
<li onclick="dianji(9);">9</li>
<li onclick="dianji(0);">0</li>
<li onclick="dianji2(100);">100</li>
<li onclick="dianji2(500);">500</li>
<li onclick="dianji2(1000);">1000</li>
<li class="lanse" onclick="wangchen();">完成</li>
</ul>
</div>
<div style="border: 1px solid #888;width: 200px;height: 35px;margin: 0px;padding: 0px;">
<input id="je_sm" type="text" placeholder="输入金额" style="border: 0px solid #fff;margin:0px;height: 25px;padding: 0px;" />
<img src="keyboard.png" id="je_tp" alt="" style="border: 0px solid #fff;margin:0px;padding: 0px;"/>
</div>


<script type="text/javascript" src="jquery.1.9.1.min.js"></script>
<script type="text/javascript">
//1-9点击
function dianji(id){
num=$("#je_sm").val();
$("#je_sm").val(num+id);
};

//100,500,1000重置点击
function dianji2(id){
$("#je_sm").val(id);
};

//退格
function tuige(){
num=$("#je_sm").val();
a1=num.substring(0,num.length-1);
$("#je_sm").val(a1);
};

//清空
function qingkong(){
$("#je_sm").val("");
};

//完成
function wangchen(){
$("#sr_je").css('display','none');
};

//图片点击
$("#je_tp").click(function() {
$("#sr_je").css('display','block');
});
</script>

</html>

 

posted @ 2017-09-15 08:35  wujunbin  阅读(591)  评论(0)    收藏  举报