购物时添加数量

购物数量添加:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                margin: 0;
            }
            .left{
                float: left;
            }
            .wrap{
                width: 150px;
                height: 22px;
                border: 1px solid #ddd;
                /*background-color: red;*/
                position: relative;
                left: 100px;
                top: 100px;
            }
            .wrap .minus{
                height: 22px;
                width: 22px;
                line-height: 22px;
                text-align: center;
                cursor: pointer;
            }
            .wrap .plus{
                height: 22px;
                width: 22px;
                line-height: 22px;
                text-align: center;
                cursor: pointer; /*当鼠标指的时候变样式*/
            }
            .wrap .count input{
                padding: 0;  /*input是有padding的*/
                border: 0;
                width: 104px;
                height: 22px;
                border-left: 1px solid #dddddd;
                border-right: 1px solid #dddddd;
            }
        </style>
    </head>
    <body>
        <div class="wrap">
            <div class="minus left" onclick='Minus();'>-</div>
            <div class="count left">
                <input id='count' type="text"  />
            </div>
            <div class="plus left" onclick='Plus();'>+</div>
        </div>
        <script type="text/javascript">
            function Plus(){
                var old_str = document.getElementById('count').value
                var old_int = parseInt(old_str);
                var new_int = old_int + 1
                document.getElementById('count').value = new_int
            }
            function Minus(){
                var old_str = document.getElementById('count').value
                var old_int = parseInt(old_str);
                var new_int = old_int - 1
                document.getElementById('count').value = new_int
            }

        </script>
    </body>
</html>


cursor:pointer;  /*鼠标尖头变小手*/

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

网页里如何使用js屏蔽鼠标右击事件

在后台管理系统里面,遇到了这样的一个问题,右击ztree菜单,弹出修改界面,但是,现在确实这样的,右击默认弹出功能提示的框框,看上去似乎很影响自己想要的功能,只...

5253
来自专栏懒人开发

Bootstrap学习(1.1)A:navbar导航简单理解

因为自己前端不熟悉,特别是Bootstrap,也只是学习阶段 自己调试,简单记录一些过程

1634
来自专栏守望轩

Visual Studio 2008 每日提示(四)

#031、 把编辑器的背景变成黑色 原文地址:http://blogs.msdn.com/saraford/archive/2007/09/06/did-yo...

3245
来自专栏iOS开发日记

iOS开发系列——文件结构

关于AppDelegate、main.m前面已经介绍过了,ViewController和Main.storyboard在后面介绍,这里先说一下Image.xca...

4028
来自专栏Android干货

小程序实践(八):验证码倒计时功能

1633
来自专栏编程微刊

混合开发

1723
来自专栏听雨堂

为服务器控件加入客户端事件处理的几种方法

    服务器端的处理虽然方便,但因为每次都要PostBack,因而效率不高,很多时候需要为服务器端控件写入客户端事件处理。把各种方法总结一下:     1)在...

1978
来自专栏前端vue

4.添加导航、分栏布局,配置路由及对应页面、登陆、404

侧边栏的导航与页面相对应,根据导航栏新建对应页面(含登陆、404) src目录下新建views文件夹用来放视图文件

1644
来自专栏听雨堂

asp.net中几种页面元素的比较

学习ASP.NET也快三个月了,今天才对页面中几种不同元素区分开,惭愧! 1)HTML元素:跟普通的网页中的标签所定义的一样,没有服务器端的事件响应,能够直接...

20010
来自专栏守望轩

Visual Studio 2008 每日提示(十四)

#131、你为什么会把窗体设置成为浮动(模式) 原文链接:Why you would want to make a Tool Window Floating ...

3547

扫码关注云+社区

领取腾讯云代金券