数字输入框增加箭头来控制数量的办法
  • 资讯中心
  • 行业新闻相关
  • 专家建站观点
  • 建站信息百科
数字输入框增加箭头来控制数量的办法
来源: 飞云专业建站工作室发布时间:2016-03-14 23:45:28

我们在做网站的时候,尤其是在做商城类网站的时候,经常需要用到一个功能,就是客户使用箭头或加减符号来控制下单产品的数量,如图:

blob.png

下面湖南长沙网站建设公司-飞云专业建站工作室来和大家分享一个实现方法,这里给出最简单的代码,大家可以通过CSS去控制样式。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

 <script type="text/javascript" language="javascript">

        function addOne()

        {

            var showControl = document.getElementById("txtNumber");

            showControl.value = parseInt(showControl.value) + 1;

        }

        function removeOne()

        {

            var showControl = document.getElementById("txtNumber");

            showControl.value = parseInt(showControl.value) - 1;

        }

    </script>

</head>


<body>

    <div style="width:40px;height:40px;">

    <table style=" background-color:#ebead8;">

        <tr><td rowspan="2" style="width:70%">

            <input type="text" value="0" id="txtNumber" style="height:40px;width:40px; text-align:center; vertical-align:middle; color:#7d2974; font-size:xx-large" /></td><td><input type="button" value="▲" id="up" onclick="addOne()" /></td></tr>

        <tr><td><input id="down" type="button" onclick="removeOne()" value="▼" /></td></tr>

    </table>

    </div>

</body>

</html>


怎么样,试试看。

转载请注明出处:http://www.feiyunjz.com/news/baike/156.html,尊重原创。

注:以上内容由湖南长沙网站建设公司-飞云专业建站工作室提供。

相关文章
  • 免费咨询

    为您提供一对一解决方案
    立即咨询
  • 联系方式

    13517315625

    全国7×24小时热线服务
免费咨询
您的姓名
您的电话
您的邮箱
咨询内容
验证码 看不清楚,点击刷新
我们会尽快联系您,等待期间需要获取更多信息,请继续访问联系我们。感谢您对我们产品及服务的支持。