Javascript

js 商城加减按钮

本文主要是介绍js 商城加减按钮，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！ 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<style>
*{padding:0;margin:0;}
em,i{font-style:normal;font-size:20px;margin:0 20px;}
input{width:50px;height:50px;text-align:center;line-height:50px;}



</style>
<script>
    window.onload=function(){
        var oUl=document.getElementsByTagName('ul')[0];
        var oLi=oUl.getElementsByTagName('li');


        for(var i=0;i<oLi.length;i++){
            fn1(oLi[i]);
        }

         function fn1(a) {
             var oInp=a.getElementsByTagName('input');
             var oEm=a.getElementsByTagName('em')[0];
             var oSpan=a.getElementsByTagName('span')[0];
             var oI=a.getElementsByTagName('i')[0];
             var par=parseFloat(oSpan.innerHTML);
             oInp[0].onclick = function () {
                 oEm.innerHTML--;
                 if (oEm.innerHTML < 0) {
                     oEm.innerHTML = 0
                 }
                 oI.innerHTML = oEm.innerHTML * par + '元';
             };
             oInp[1].onclick = function () {
                 oEm.innerHTML++;
                 oI.innerHTML = oEm.innerHTML * par + '元';
             };
         }
    }
</script>
<body>
<ul>
    <li>
        <input type="button" value="-">
        <em>0</em>
        <input type="button" value="+">
        <p>单价<span>12.5元</span>;合计<i>0元</i></p>
    </li>
    <li>
        <input type="button" value="-">
        <em>0</em>
        <input type="button" value="+">
        <p>单价<span>20.5元</span>;合计<i>0元</i></p>
    </li>
    <li>
        <input type="button" value="-">
        <em>0</em>
        <input type="button" value="+">
        <p>单价<span>9.5元</span>;合计<i>0元</i></p>
    </li>
    <li>
        <input type="button" value="-">
        <em>0</em>
        <input type="button" value="+">
        <p>单价<span>10.5元</span>;合计<i>0元</i></p>
    </li>
</ul>
<div>
    你购买的商品合计<b>0</b>件;共<span>0</span>元
</div>
</body>
</html>
这篇关于js 商城加减按钮的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航