js學習-購物數量+1，-1

標籤：style   io   ar   sp   java   on   div   cti   代碼   

看到商城裡面，可以加減購物數量，就想學習一下

 

代碼如下：

<!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>

js學習-購物數量+1，-1