js学习-购物数量+1,-1

看到商城里面,可以加减购物数量,就想学习一下

 

代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js点击加1的实现</title>
<style type="text/css">

.jia{height:16px;width: auto;text-align:center;display: inline-block;padding: 5px;border: 1px solid #ccc;cursor:pointer;}
.jian{height:16px;width: auto;text-align:center;display: inline-block;padding: 5px;border: 1px solid #ccc;cursor:pointer;}

</style>
<script type="text/javascript">
window.onload = function()
{
var Jjian = document.getElementById("jian");
var Jjia = document.getElementById("jia");
var zj = document.getElementsByTagName("input")[0];
var i = 1;

Jjia.onclick = function()
{
//zj.value = ++i;
i = zj.value;
zj.value = ++i;

}
Jjian.onclick = function()
{
i = zj.value;
zj.value = --i;
}

}
</script>
</head>
<body>
<div id="put">
<span class="jian" id="jian">-</span>
<input type="text" value="1" style="width:50px;text-align:center;height:22px;" />
<span class="jia" id="jia">+</span>
</div>
</body>
</html>

posted @ 2014-11-19 15:27  ElevenYu  阅读(410)  评论(0编辑  收藏  举报