<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
body{
margin: 0;
}
.left{
float: left;
}
.wrap{
width: 150px;
height: 22px;
border: 1px solid #ddd;
/*background-color: red;*/
position: relative;
left: 100px;
top: 100px;
}
.wrap .minus{
height: 22px;
width: 22px;
line-height: 22px;
text-align: center;
cursor: pointer;
}
.wrap .plus{
height: 22px;
width: 22px;
line-height: 22px;
text-align: center;
cursor: pointer; /*当鼠标指的时候变样式*/
}
.wrap .count input{
padding: 0; /*input是有padding的*/
border: 0;
width: 104px;
height: 22px;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
}
</style>
</head>
<body>
<div class="wrap">
<div class="minus left" onclick='Minus();'>-</div>
<div class="count left">
<input id='count' type="text" />
</div>
<div class="plus left" onclick='Plus();'>+</div>
</div>
<script type="text/javascript">
function Plus(){
var old_str = document.getElementById('count').value
var old_int = parseInt(old_str);
var new_int = old_int + 1
document.getElementById('count').value = new_int
}
function Minus(){
var old_str = document.getElementById('count').value
var old_int = parseInt(old_str);
var new_int = old_int - 1
document.getElementById('count').value = new_int
}
</script>
</body>
</html>
cursor:pointer; /*鼠标尖头变小手*/