购物时添加数量

简介: 购物数量添加: body{ margin: 0; } .

 

购物数量添加:

<!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;  /*鼠标尖头变小手*/
View Code

 

目录
相关文章
|
9月前
|
存储 缓存 Java
Spring面试必问:手写Spring IoC 循环依赖底层源码剖析
在Spring框架中,IoC(Inversion of Control,控制反转)是一个核心概念,它允许容器管理对象的生命周期和依赖关系。然而,在实际应用中,我们可能会遇到对象间的循环依赖问题。本文将深入探讨Spring如何解决IoC中的循环依赖问题,并通过手写源码的方式,让你对其底层原理有一个全新的认识。
207 2
|
9月前
|
运维 测试技术 持续交付
代码管理的艺术:你的团队是否还在为 Git 分支管理头疼?
本文回顾了作者从2~3人初创团队到百人技术团队的经历,分享了代码管理工具从无到SVN再到Git的演变。重点介绍了Git Flow和GitHub Flow两种常用的Git分支管理模型,分析了它们的适用场景和优缺点。Git Flow适合中大型项目,而GitHub Flow则更适合小型团队和Web应用开发。
295 0
|
Java 数据库连接 mybatis
【已解决】nested exception is org.apache.ibatis.binding.BindingException: Parameter ‘qcBizname‘ not found
【已解决】nested exception is org.apache.ibatis.binding.BindingException: Parameter ‘qcBizname‘ not found
1011 0
|
存储 网络协议 网络性能优化
TCP 滑动窗口详解(非常实用)
TCP 滑动窗口详解(非常实用)
|
Java Maven 数据安全/隐私保护
基于jib-maven-plugin快速构建微服务docker镜像
本文介绍基于 Maven 插件 jib-maven-plugin 实现快速构建 Spring Boot 程序镜像,并推送到远程仓库中,且无需安装 Docker 环境 。
866 0
基于jib-maven-plugin快速构建微服务docker镜像
|
网络协议 Ubuntu 开发工具
Ubuntu20 自定义DNS永久生效
Ubuntu20 自定义DNS永久生效
2221 0
|
机器学习/深度学习 人工智能 算法
机器学习和数据挖掘的关系
数据挖掘和机器学习的关系越来越密切。那么,它们之间存在什么样的关系?这是一个不是很明确的问题,可以从机器学习和数据挖掘的发展历史和现状分析。
616 0
机器学习和数据挖掘的关系
|
编解码 前端开发 BI
表格| 学习笔记
快速学习表格。
表格| 学习笔记
|
关系型数据库 MySQL
【Elasticsearch】增、删、改、查操作深入详解
【Elasticsearch】增、删、改、查操作深入详解
171 0
【Elasticsearch】增、删、改、查操作深入详解
|
移动开发 自然语言处理 JavaScript
typescript实战总结之实现一个互联网黑白墙
笔者上一篇文章 TS核心知识点总结及项目实战案例分析 主要写了typescript的用法和核心知识点总结, 这篇文章将通过一个实际的前端案例来教大家如何在项目中使用typescript.
168 0