模拟购物车简单加减

最新推荐文章于 2025-08-15 22:56:20 发布

转载最新推荐文章于 2025-08-15 22:56:20 发布 · 81 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zzgyq/p/6529587.html

文章标签：

#javascript #ViewUI

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
a{
text-decoration: none;
display: block;
width:30px;
height: 32px;
float: left;
border: 1px solid #888;
text-align: center;
line-height: 32px;
}
#text{
float: left;
width: 50px;
height: 30px;
border: 1px solid salmon;
line-height: 30px;
text-align: center;
}
</style>
</head>
<body>
<a id="left" href="#">-</a>
<input type="text" name="text" id="text" value="0" />
<a id="right" href="#">+</a>
<script type="text/javascript">
var otext = document.getElementById("text");
var oleft = document.getElementById("left");
var oright = document.getElementById("right");
var num = 0;
oright.onclick = function(){
if(num<20){
otext.value = ++num;
}else{
return 20;
}
}
oleft.onclick = function(){
if(num>0){
otext.value = --num;
}else{
return 0;
}
}
</script>
</body>
</html>