你别皱眉Chen
你别皱眉Chen

JS实现购物车效果

文章目录

      • 1.效果
        • 1.效果图：
        • 2.功能描述
        • 3.目的的意义：
      • 2.代码部分：

1.效果

1.效果图：

JS实现购物车效果_第1张图片

2.功能描述

1.全选时，总价为商品价格和
2.反选时，总价为0
3.任意点击商品栏前的选中时，当所有商品前的选框选中时，
全选按钮变为选中，当商品前的任意一个选框未被选中时，
全选为未选中状态。
4.商品数量：点击+时，数量增加，单个商品总价随之变化
的同时，总价随之变化。点击-时，商品数量-1，单个商品
总价和所有商品合计减少对应价格，当数量为减为0时，移除
该产品。
5.删除：点击删除时，删除该商品，所有商品总计变化。

3.目的的意义：

熟悉javascript对dom元素进行修改，为后期的jquery学习和使用
奠定基础。

2.代码部分：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            /*内容居中*/
            text-align: center;
        }
        table{
            border: 1px solid red;
            border-spacing: 20px;
            /* background-color: green; */
            width: 730px;
        }
        #content{
            margin: 0 auto;
            width: 50%;
            height: 1200px;
        }
        tr img{
            width: 80px;
            height: 100px;
        }
        #top{
            height:60px;
            width: 100%;
        }
        #top img{
            float: left;
        }
        #close{
            height: auto 0;
            background-color: red;
            width: 10%;
            margin-right: 5%;
            margin-top: 3%;
            float: right;
            border-radius: 15px;
            text-align: center;
            color: wheat;
            font-weight: bold;
        }
        td input{
            width: 24px;
            height: 24px;
        }
        td a{
            text-decoration: none;
            color: black;
        }
        #bottom{
            width: 700px;
            height: 30px;
            text-align: right;
        }
        #total{
            color: red;
        }
    </style>
    <script>
        function loadData() {
            //获取所有的input
           allInputs = document.getElementsByTagName("input");
             checkboxs = new Array();
            //筛选出为checkbox的input
            for(var i=0;i<allInputs.length;i++){
                if(allInputs[i].type=="checkbox"){
                   checkboxs.push(allInputs[i]); 
                }
            }
          }
        //更新价格函数，包括数量、单个商品总价、所有商品总价的更新
        function getPrice(obj){
            //获取按钮的选中状态,用于判断是否需要改变所有商品总价和
            var flag=obj.parentNode.parentNode.children[0].children[0].checked;
            //父亲，为对应的tr对象
            var parent = obj.parentNode.parentNode;
            //获取的是input旁边span标签数量对象
            var countObj = parent.children[4].children[1];
            //获取数量
            var count = countObj.innerHTML;
            //单价span对象
            var priceObj = parent.children[3].children[1];
            //获取单价
            var price = priceObj.innerHTML;
            //获取所有总价
            var total = Number(document.getElementById("total").innerHTML);
            //当数量减为0时，需要删除该行
            if(count==1&&obj.value==="-"){
                //调用定义的函数进行删除，参数为删除按钮对象，删除该对象所在的tr标签
            del(parent.children[6].children[1],true);
            }
            switch(obj.value){
                //点击增加或者减少时，更新所有总价
                case "+":
                  count++;
                  if(flag){
                    total= total+Number(price);
                  }
                  break;
                case "-":
                  count--;
                  if(flag){
                    total= total-Number(price);
                  }
                  break;
                default:
                  break; 
            }
            //更新商品数量
            countObj.innerHTML = count;
            //获取单个商品总价对象
            var totalObj = parent.children[5].children[1];
            //给单个商品总价赋值
            totalObj.innerHTML=(count*price).toFixed(2);
            //给id为total的单个商品总价赋值
            document.getElementById("total").innerHTML=total.toFixed(2);
        }

        //购物车商品删除函数，当数量为1时，点击-，应当移除元素。传入的对象为当前对象
        //这里的flag是判断是删除事件，还是只是取消事件，为true时，表示时删除事件调用此方法，为false表示取消选中调用此事件
        function del(obj,flag){
            //父亲节点的获取，这里获取的是tbody
            var parent = obj.parentNode.parentNode.parentNode;
            //要移除的节点获取，这里是传入的obj对象所在的tr
            var child = obj.parentNode.parentNode;
            //移除操作，删除子节点======
            if(flag==true){
                parent.removeChild(child);
            }
            //减少的价格数量，也就是你从购物车删除的商品的已有价格
            var des = child.children[5].children[1].innerHTML;
            //获取的是所有商品总价的对象
            var totalObj = document.getElementById("total");
            //对价格进行转换，因为浮点型操作会导致精度丢失，保留了两位小数
            var total = (Number(totalObj.innerHTML)-des).toFixed(2);
            //更新总价
            totalObj.innerHTML = total;
        }
        //当input被选中时的事件
        function getInput(obj){
            //获取a标签 del事件的对象
            var a =obj.parentNode.parentNode.children[6].children[1];
            //取消选中事件
            if(obj.checked==false){
                //只要有一个被取消选中，那么全选按钮也被取消选中
                checkboxs[0].checked=false;
                //调用此元素的价格，将其的价格总总价减出，不删除元素
               del(a,false)
            }else{
                //选中时，把价格加上去
                var num = Number(obj.parentNode.parentNode.children[5].children[1].innerHTML);
                //所有商品总价对象
                var totalObj = document.getElementById("total");
                //更改后的价格
                num = (Number(totalObj.innerHTML)+num).toFixed(2);
                //更改总的价格
                totalObj.innerHTML=num;
                //打一个标记，用于判断是否存在未被选中的按钮，如果有一个就是false;
                var flag = true;
                for(var j=1;j<checkboxs.length;j++){
                   if(checkboxs[j].checked==false){
                      flag=false;
                   }
                }
                //给全选按钮设置选中与否
                checkboxs[0].checked=flag;
            }
        }
        /*全选与反选功能*/
        function selectAll(obj){
            //obj为全选按钮这个对象，为true时，需要将其余的checkbox的checked值设置为真
            if(obj.checked==true){
                for(var i=1;i<checkboxs.length;i++){
                    if(checkboxs[i].checked==false){
                        checkboxs[i].checked=true;
                //这里时调用的给checkbox设置的方法
                getInput(checkboxs[i]);
                    }
            }
            }else{
                //为假时，需要将所有checkbox设置取消选中
                for(var i=1;i<checkboxs.length;i++){
                checkboxs[i].checked=false;
                document.getElementById("total").innerHTML=0;
                // getInput(checkboxs[i]);
            }
            }
        }
    </script>
</head>
<body onload="loadData()">
<div id="content">
    <div id="top">
        <img src="images/dd_logo.jpg" alt="">
        <div id="close">关闭</div>
    </div>
    
    <table>
        <thead>
            <th>全选<input type="checkbox" onclick="selectAll(this)" checked="true"></th>
            <th>商品图</th>
            <th>商品信息</th>
            <th>单价(元)</th>
            <th>数量</th>
            <th>金额(元)</th>
            <th>操作</th>
        </thead>
        <tbody>
            <tr>
                <td><input type="checkbox" onclick="getInput(this)" checked="true" style="height: 13px;width:13px;"></td>
                <td><img src="images/dog.jpg" alt=""></td>
                <td>一条狗的故事</td>
                <td><span>¥</span><span>32.50</span></td>
                <td><input type="button" onclick="getPrice(this)" value="+" /><span id="count">1</span><input type="button" onclick="getPrice(this)" value="-" /></td>
                <td><span>¥</span><span id="totalPrice">32.50</span></td>
                <td><a href="">移入收藏夹</a><a href="#" onclick="del(this,true)" id="book1">&nbsp;&nbsp;删除</a></td>
            </tr>

            <tr>
                <td><input type="checkbox" onclick="getInput(this)" checked="true" style="height: 13px;width:13px;"></td>
                <td><img src="images/mai.jpg" alt=""></td>
                <td>雾霾来了怎么办</td>
                <td><span>¥</span><span>23.20</span></td>
                <td><input type="button" onclick="getPrice(this)" value="+" /><span id="count">1</span><input type="button" onclick="getPrice(this)" value="-" /></td>
                <td><span>¥</span><span id="totalPrice">23.20</span></td>
                <td><a href="">移入收藏夹</a><a href="#" onclick="del(this,true)">&nbsp;&nbsp;删除</a></td>
            </tr>
        </tbody>
    </table>
    <div id="bottom">
        总价<span style="color:red;">¥</span><span id="total">55.70</span><div id="close" style="margin-top: 0;">结算</div>
    </div>
</div>
</body>
</html>

你可能感兴趣的:(#,前端基础,js)

  • x-ray社区版简单使用教程 一只迷茫的汪 工具爬虫web安全
    下载地址https://github.com/chaitin/xray注意：xray不开源，直接下载构建的二进制文件即可证书生成./xray_windows_amd64genca使用方法1，使用基础爬虫爬取并对爬虫爬取的链接进行漏洞扫描（xray的基础爬虫不能处理js渲染的页面）./xray_windows_amd64webscan--basic-crawlerhttp://example.com
  • Nestjs微服务简单案例 海上彼尚 node.js微服务架构node.js
    相信大家，来看这篇博客，就应该知道微服务的概念。只是不太知道实用方法而已。下面我通过最简单的案例，来教会大家。首先这是我的项目目录：nestwfw/├──app/├──project-microsericesapp是web服务，用来接收前端请求的网络请求project-microserices是一个微服务，名字都是随意的安装nestnewappnestnewproject-microservice
  • git commit 自动修复 eslint 和 prettier 等下吃什么？ 前端前端
    npminstalllint-stagedeslintprettier--save-dev修改package.json"lint-staged":{"**/*.{js,jsx,ts,tsx,vue}":["prettier--write","eslint--fix"],"**/*.json":["prettier--write"],"**/*.{less,md}":["prettier--writ
  • web前端基础——第八章 ZiminLi 技术栈笔记前端javascript
    目录八十五、对象的简介和基本操作八十六、属性名和属性值八十七、基本数据类型和引用数据类型八十八、对象字面量八十九、函数的简介九十、函数的参数九十一、函数的返回值九十二、实参可以是任何值九十三、返回值的类型九十四、立即执行函数九十五、方法九十六、枚举对象中的属性九十七、作用域（Scope）全局作用域变量的声明提前函数作用域九十八、this九十九、使用工厂方法创建对象一百、构造函数一百零一、原型对象一
  • Tomcat与JDK版本对应关系，Tomcat各版本特性 2401_84048671 程序员javatomcat开发语言
    ApacheTomcat8.xApacheTomcat7.xApacheTomcat6.xApacheTomcat是一个开源软件实现了JavaServlet和JavaServerPages技术。不同版本的Servlet和JSP规范可使用不同版本的ApacheTomcat。Tomcat与JDK版本对应关系为：|Servlet规格|JSP规范|EL规格|WebSocket规范|JASPIC规格|Apa
  • cesium入门-基础知识01 标准形与二次型 cesium3D可视化
    cesium入门-基础知识01前言：工作关系开始接触cesium，简单记录一下帮助自己理清思路。1.资料CesiumAPI英文官方文档:https://cesium.com/learn/cesiumjs/ref-doc/CesiumAPI中文文档http://cesium.xin/cesium/cn/Documentation1.62/Cesium源码https://github.com/Cesi
  • uni-app前端post请求数据json序列化解决 标准形与二次型 web报错springvue.js
    问题：前端使用uni-app的uni.request发送post请求时，携带data参数会被json序列化对于POST方法且header[‘content-type’]为application/json的数据，会进行JSON序列化。官方文档这就导致我写好的登录页面，传递用户名和密码，使用postman可以正常请求，但前端页面发送post请求则会报错：Requiredrequestparameter
  • 项目实战系列三: 家居购项目 第五部分 ~ 小团子 #家居购项目python开发语言
    显示订单[订单管理]暂时缺货需求分析1.如果某家居库存为0,首页的"AddtoCart"按钮显示为"暂时缺货"2.后台也加上校验.只有在库存>0时,才能添加到购物车代码实现1.修改web/views/customer/index.jspAddToCart[缺货]0}">AddToCart2.修改src/com/zzw/furns/web/CartServlet.java,当添加购物车时,要保证商品
  • MoveNet PyTorch 项目教程 邢琛高
    MoveNetPyTorch项目教程movenet.pytorch项目地址:https://gitcode.com/gh_mirrors/mo/movenet.pytorch项目介绍MoveNet是一个超快速且精确的模型，用于检测人体的17个关键点。本项目是GoogleMoveNet的PyTorch实现，包含了训练代码和预训练模型。Google最近发布了预训练模型（tfjs或tflite），但这些
  • ios 项目中设置左侧徽标 温正实 ioscocoamacos
    ////CategoryViewController.m//scxhgh////Createdbyxmkjsofton2024/7/16.//#import"CategoryViewController.h"#import"SideMenuViewController.h"//引入侧边栏控制器的头文件#import"NavigationBarUtils.h"@interfaceCategoryVi
  • Matter.js：Web开发者的2D物理引擎 我码玄黄 前端开源github前端javascriptcanvas物理引擎
    Matter.js：Web开发者的2D物理引擎前言在现代网页开发中，交互性和动态效果是提升用户体验的关键因素。Matter.js，一个专为网页设计的2D物理引擎，为开发者提供了一种简单而强大的方式，来实现复杂的物理交互效果。无论是模拟重力、碰撞还是复杂的物体运动，Matter.js都能轻松应对。本文将带你深入了解Matter.js，并提供实际的代码示例，让你一窥其强大功能。官网：https://b
  • 2022年最新Kubernetes常见面试题汇总 云小七 kubernetes容器云原生java
    常规题1.简述etcd及其特点答∶etcd是CoreOS团队发起的开源项目，是一个管理配置信息和服务发现（servicediscovery）的项目，它的目标是构建一个高可用的分布式键值（key-value）数据库，基于Go语言实现。特点∶●简单∶支持REST风格的HTTP+JSONAPI●安全∶支持HTTPS方式的访问●快速：支持并发1k/s的写操作●可靠∶支持分布式结构，基于Raft的一致性算法
  • 微信小程序-云开发（1）常用的一些数据操作 Christoles
    在微信小程序-云开发创建的时候，它自动替我们创建了cloudfunctions和miniprogram文件，并且在project.config.json中定义好了这两个文件的名称和路径。如果我们要更改这两个文件名的话，相应的也要修改project.config.json里面的。image.png下面来讲一下关于云开发那些常用的数据方法吧微信小程序-云开发可以前后端一起操作，在做项目时，通常搭建两个
  • sequelpro mysql 图形化工具 仔仔H
    Sequelproformac是Macos平台上的一款帮助用户快速连接SQL数据库的Mac软件，sequelproformac是MySQL数据库管理应用程序。连接版本安装包版本1.1.2链接:https://pan.baidu.com/s/19cBQU8DyyXU1pjskjwI1Jw提取码:j2ka
  • 【python】最新版小红书js逆向拿到数据，非常详细教程（附完整代码） 景天科技苑 爬虫副业实战零基础进阶教学pythonjs逆向小红书逆向python爬虫
    ✨✨欢迎大家来到景天科技苑✨✨养成好习惯，先赞后看哦~作者简介：景天科技苑《头衔》：大厂架构师，华为云开发者社区专家博主，阿里云开发者社区专家博主，CSDN全栈领域优质创作者，掘金优秀博主，51CTO博客专家等。《博客》：Python全栈，前后端开发，人工智能，js逆向，App逆向，网络系统安全，数据分析，Django，fastapi，flask等框架，linux，shell脚本等实操经验，网站搭
  • Node.js+Express|Cookie&Session机制理解|实现保存登录状态 绍重先
    Q&A各个用户的sessionname如何设置用登陆的用户名？用当时时间？req.session.name=req.body.usernamelogout？url列表标签posthtml退出登陆js//登出事件监听varlogout=document.getElementById('logout');logout.onclick=function(){alert('logout');varlogo
  • python实验过程心得体会_web实训心得体会 weixin_39814378 python实验过程心得体会
    篇一：JAVAWEB实训心得体会jsp+servlet+mysql论坛项目实训总结实训人：程路峰学号：11103303通过为期10天的实训，我学习了很多关于javaweb的知识。在老师的正确指导下，顺利的完成了我的实训内容。在此，也有同学的帮助，在他们的帮助下我也受益匪浅。最终，能顺利完成实训的任务也很高兴。在实训生活中，我了解开发项目的需求、设计、实现、确认以及维护等活动整个过程，让自己开始懂得
  • Redis的incr命令引发的反序列化异常和ERR value is not an integer or out of range异常 臣妾写不来啊 Java编码技巧redis数据库缓存
    在Java中使用inc命令的时候发现redis中的值被反序列化后居然不是数字,检查后发现可能是序列化器没对,在redis配置的地方将序列化器设置为Jackson2JsonRedisSerializer后使用整成,贴上代码@Bean(name="RedisTemplate")@SuppressWarnings("all")publicRedisTemplateredisTemplate(RedisC
  • 深入解析`node-html-to-image`的`main.ts`源码：实现HTML到图片的转换 软考鸭 nodeHtmlToImagehtml前端nodeHtmlToImage
    引言node-html-to-image是一个强大的Node.js库，它允许开发者将HTML内容转换为图片。本文将深入解析该库的main.ts文件，揭示其内部工作原理，并帮助开发者更好地理解和使用该库。项目背景与功能概述node-html-to-image的主要功能是将HTML字符串或文件渲染为图片。它支持多种输出格式（如PNG、JPEG等），并提供了一系列配置选项，如图片质量、透明度等。该库利用
  • UPnP服务器（upnpserver）快速入门指南 郦祺嫒Amiable
    UPnP服务器（upnpserver）快速入门指南upnpserverFastandlightupnpserverfornode项目地址:https://gitcode.com/gh_mirrors/up/upnpserver1.项目目录结构及介绍本项目upnpserver是一个基于Node.js实现的UPnP服务器。下面是其基本的目录结构概览：upnpserver│├──package.json
  • 推荐使用：Models——简化WordPress自定义类型的高效工具 郦祺嫒Amiable
    推荐使用：Models——简化WordPress自定义类型的高效工具modelsWordPressplugintocreatecustomposttypesandtaxonomiesusingJSON,YAMLorPHPfiles项目地址:https://gitcode.com/gh_mirrors/models7/models在追求灵活和定制化的Web开发道路上，WordPress凭借其强大的社
  • RapidJson递归去除空值元素Value Cloudox_
    RapidJson是一款高效的C++处理JSON字符串的库。教程：http://rapidjson.org/zh-cn/md_doc_tutorial_8zh-cn.html#QueryObject源码：https://github.com/Tencent/rapidjson但不得不说教程写的不太全，网上资料也很少，大都重复教程的范畴。项目中有个蛋疼的需求要把JSON字符串中值为空的键值对去掉，C
  • Node.js Express 框架 wjs2024 开发语言
    Node.jsExpress框架介绍Express是一个快速、开放、极简的Node.jsWeb框架。它为构建Web应用程序和服务提供了一个强大的工具集，使得开发过程更加高效和便捷。Express的设计哲学是提供一个最小的API，让开发者可以轻松地构建自定义的Web应用程序。它被广泛用于构建API和Web服务，并且是许多流行的Node.jsWeb框架的基础。特点1.易于上手Express框架的设计非
  • 微信小程序 查询关键字标红 小許同学 微信小程序小程序
    wxml{{items.str}}{{items.str}}jsletthat=thisletdata='啊啊啊啊啊哈啊啊啊哈哈啊啊哈哈额'letvalue='哈哈';//调用处理的方法data=that.hilight_str(key,data);console.log(data)//根据关键字切割字符串hilight_str:function(key,strs){letidx=strs.ind
  • python eval函数的使用方法 丑的看不了 python编程语言1024程序员节
    一、eval函数的使用方法eval()函数是许多编程语言都内置的一个函数，如JS、PHP、Python等，用于返回括号内包含的表达式执行后的结果python中的使用格式为eval(表达式[(可选{字典形式})全局变量，[(可选)局部变量]])在Python中的基本用法：输入一组描述四则运算的字符串"125+255"需要重点关注的问题：输入eval(“125+255”)是否报错能否返回结果值检查返回
  • js函数eval() 温暖前端 javascript前端开发语言
    1.eval()函数简介eval()是JavaScript中的一个全局函数，它可以将传入的字符串当作JavaScript代码来执行。eval()函数的基本语法如下：eval(string)其中，string是要执行的JavaScript代码字符串。eval()函数会返回最后一个表达式的结果。2.eval()的工作原理当调用eval()函数时，JavaScript解释器会执行以下步骤：a.解析传入的
  • 前端Axios搭配Vue（认清Axios，Axios结合Vue发出Ajax请求，返回JSON数据案例！简洁易懂。） 酸奶代码 前端vue.jsjavascriptjsonajax
    一.什么是Axios1.axios是独立于vue的一个项目，不是Vue的一部分2.axios通常和Vue一起使用，实现Ajax操作3.Axios是一个基于promise的HTTP库axios官方文档二.引入Axios库文件1.可以直接引用2.可以下载Axios的js文件导入下载此js文件三.使用Axios配合Vue发出Ajax请求案例在Vue中使用Axios，向服务器发送Ajax请求，将获取的js
  • 【Python】文件处理的魔法之旅 _小白1024 pythonpython开发语言笔记
    目录引言文件处理的重要性基本概念主体部分读取文件写入文件修改文件处理不同类型的文件文本文件CSV文件JSON文件示例代码代码解释案例研究结论参考文献引言你是否曾经面对一堆杂乱无章的文件，感到束手无策？是否曾梦想过拥有一种能力，能够轻松地读取、修改和存储数据？Python文件处理，或许就是你梦寐以求的魔法。文件处理的重要性文件处理对于以下方面至关重要：数据持久化：将数据保存到磁盘，供后续使用。配置管
  • Puppeteer-Sharp：无头浏览器.NET API探索 井唯喜
    Puppeteer-Sharp：无头浏览器.NETAPI探索puppeteer-sharp项目地址:https://gitcode.com/gh_mirrors/pup/puppeteer-sharp项目介绍Puppeteer-Sharp是一个.NET版本的官方Node.jsPuppeteer库的移植。它允许开发者在.NET环境下远程控制Chromium或Chrome浏览器，进行网页操作、截图、生
  • Puppeteer Heap Snapshot: 探索JavaScript内存世界的利器 金畏战Goddard
    PuppeteerHeapSnapshot:探索JavaScript内存世界的利器puppeteer-heap-snapshotadriancooney/puppeteer-heap-snapshot:puppeteer-heap-snapshot是一个Node.js包，提供了通过Puppeteer获取浏览器内存堆快照的功能，以辅助JavaScript应用的内存泄漏检测和性能优化工作。项目地址:h
  • Spring中@Value注解，需要注意的地方 无量 springbean@Valuexml
    Spring 3以后,支持@Value注解的方式获取properties文件中的配置值，简化了读取配置文件的复杂操作 1、在applicationContext.xml文件(或引用文件中)中配置properties文件 <bean id="appProperty" class="org.springframework.beans.fac
  • mongoDB 分片 开窍的石头 mongodb
        mongoDB的分片。要mongos查询数据时候 先查询configsvr看数据在那台shard上，configsvr上边放的是metar信息，指的是那条数据在那个片上。由此可以看出mongo在做分片的时候咱们至少要有一个configsvr,和两个以上的shard（片）信息。     第一步启动两台以上的mongo服务 &nb
  • OVER(PARTITION BY)函数用法 0624chenhong oracle
    这篇写得很好，引自 http://www.cnblogs.com/lanzi/archive/2010/10/26/1861338.html OVER(PARTITION BY)函数用法 2010年10月26日 OVER(PARTITION BY)函数介绍 开窗函数        &nb
  • Android开发中，ADB server didn't ACK 解决方法 一炮送你回车库 Android开发
    首先通知：凡是安装360、豌豆荚、腾讯管家的全部卸载，然后再尝试。   一直没搞明白这个问题咋出现的，但今天看到一个方法，搞定了！原来是豌豆荚占用了 5037 端口导致。 参见原文章：一个豌豆荚引发的血案——关于ADB server didn't ACK的问题 简单来讲，首先将Windows任务进程中的豌豆荚干掉，如果还是不行，再继续按下列步骤排查。 &nb
  • canvas中的像素绘制问题 换个号韩国红果果 JavaScriptcanvas
    pixl的绘制，1.如果绘制点正处于相邻像素交叉线，绘制x像素的线宽，则从交叉线分别向前向后绘制x/2个像素，如果x/2是整数，则刚好填满x个像素，如果是小数，则先把整数格填满，再去绘制剩下的小数部分，绘制时，是将小数部分的颜色用来除以一个像素的宽度，颜色会变淡。所以要用整数坐标来画的话（即绘制点正处于相邻像素交叉线时），线宽必须是2的整数倍。否则会出现不饱满的像素。 2.如果绘制点为一个像素的
  • 编码乱码问题 灵静志远 javajvmjsp编码
    1、JVM中单个字符占用的字节长度跟编码方式有关，而默认编码方式又跟平台是一一对应的或说平台决定了默认字符编码方式；2、对于单个字符：ISO-8859-1单字节编码，GBK双字节编码，UTF-8三字节编码；因此中文平台(中文平台默认字符集编码GBK)下一个中文字符占2个字节，而英文平台(英文平台默认字符集编码Cp1252(类似于ISO-8859-1))。 3、getBytes()、getByte
  • java 求几个月后的日期 darkranger calendargetinstance
    Date plandate = planDate.toDate(); SimpleDateFormat df = new SimpleDateFormat("yyyy-MM-dd"); Calendar cal = Calendar.getInstance(); cal.setTime(plandate); // 取得三个月后时间 cal.add(Calendar.M
  • 数据库设计的三大范式（通俗易懂） aijuans 数据库复习
    关系数据库中的关系必须满足一定的要求。满足不同程度要求的为不同范式。数据库的设计范式是数据库设计所需要满足的规范。只有理解数据库的设计范式，才能设计出高效率、优雅的数据库，否则可能会设计出错误的数据库. 目前，主要有六种范式：第一范式、第二范式、第三范式、BC范式、第四范式和第五范式。满足最低要求的叫第一范式，简称1NF。在第一范式基础上进一步满足一些要求的为第二范式，简称2NF。其余依此类推。
  • 想学工作流怎么入手 atongyeye jbpm
    工作流在工作中变得越来越重要，很多朋友想学工作流却不知如何入手。 很多朋友习惯性的这看一点，那了解一点，既不系统，也容易半途而废。好比学武功，最好的办法是有一本武功秘籍。研究明白，则犹如打通任督二脉。 系统学习工作流，很重要的一本书《JBPM工作流开发指南》。 本人苦苦学习两个月，基本上可以解决大部分流程问题。整理一下学习思路，有兴趣的朋友可以参考下。 1  首先要
  • Context和SQLiteOpenHelper创建数据库 百合不是茶 androidContext创建数据库
           一直以为安卓数据库的创建就是使用SQLiteOpenHelper创建,但是最近在android的一本书上看到了Context也可以创建数据库,下面我们一起分析这两种方式创建数据库的方式和区别,重点在SQLiteOpenHelper     一:SQLiteOpenHelper创建数据库:   1,SQLi
  • 浅谈group by和distinct bijian1013 oracle数据库group bydistinct
            group by和distinct只了去重意义一样，但是group by应用范围更广泛些，如分组汇总或者从聚合函数里筛选数据等。         譬如：统计每id数并且只显示数大于3 select id ,count(id) from ta
  • vi opertion 征客丶 macoprationvi
    进入 command mode （命令行模式） 按 esc 键 再按 shift + 冒号 注：以下命令中 带 $ 【在命令行模式下进行】，不带 $ 【在非命令行模式下进行】 一、文件操作 1.1、强制退出不保存 $ q! 1.2、保存 $ w 1.3、保存并退出 $ wq 1.4、刷新或重新加载已打开的文件 $ e 二、光标移动 2.1、跳到指定行 数字
  • 【Spark十四】深入Spark RDD第三部分RDD基本API bit1129 spark
      对于K/V类型的RDD,如下操作是什么含义？   val rdd = sc.parallelize(List(("A",3),("C",6),("A",1),("B",5)) rdd.reduceByKey(_+_).collect  reduceByKey在这里的操作，是把
  • java类加载机制 BlueSkator java虚拟机
    java类加载机制 1.java类加载器的树状结构 引导类加载器 ^ | 扩展类加载器 ^ | 系统类加载器 java使用代理模式来完成类加载，java的类加载器也有类似于继承的关系，引导类是最顶层的加载器，它是所有类的根加载器，它负责加载java核心库。当一个类加载器接到装载类到虚拟机的请求时，通常会代理给父类加载器，若已经是根加载器了，就自己完成加载。 虚拟机区分一个Cla
  • 动态添加文本框 BreakingBad 文本框
      <script>     var num=1; function AddInput() {      var str="";     str+="<input 
  • 读《研磨设计模式》-代码笔记-单例模式 bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ public class Singleton { } /* * 懒汉模式。注意，getInstance如果在多线程环境中调用，需要加上synchronized，否则存在线程不安全问题 */ class LazySingleton
  • iOS应用打包发布常见问题 chenhbc iosiOS发布iOS上传iOS打包
    这个月公司安排我一个人做iOS客户端开发，由于急着用，我先发布一个版本，由于第一次发布iOS应用，期间出了不少问题，记录于此。   1、使用Application Loader 发布时报错：Communication error.please use diagnostic mode to check connectivity.you need to have outbound acc
  • 工作流复杂拓扑结构处理新思路 comsci 设计模式工作算法企业应用OO
    我们走的设计路线和国外的产品不太一样，不一样在哪里呢？  国外的流程的设计思路是通过事先定义一整套规则(类似XPDL)来约束和控制流程图的复杂度(我对国外的产品了解不够多，仅仅是在有限的了解程度上面提出这样的看法)，从而避免在流程引擎中处理这些复杂的图的问题，而我们却没有通过事先定义这样的复杂的规则来约束和降低用户自定义流程图的灵活性，这样一来，在引擎和流程流转控制这一个层面就会遇到很
  • oracle 11g新特性Flashback data archive daizj oracle
    1. 什么是flashback data archive Flashback data archive是oracle 11g中引入的一个新特性。Flashback archive是一个新的数据库对象，用于存储一个或多表的历史数据。Flashback archive是一个逻辑对象，概念上类似于表空间。实际上flashback archive可以看作是存储一个或多个表的所有事务变化的逻辑空间。
  • 多叉树:2-3-4树 dieslrae 树
        平衡树多叉树,每个节点最多有4个子节点和3个数据项,2,3,4的含义是指一个节点可能含有的子节点的个数,效率比红黑树稍差.一般不允许出现重复关键字值.2-3-4树有以下特征:     1、有一个数据项的节点总是有2个子节点(称为2-节点)     2、有两个数据项的节点总是有3个子节点(称为3-节
  • C语言学习七动态分配 malloc的使用 dcj3sjt126com clanguagemalloc
    /* 2013年3月15日15:16:24 malloc 就memory(内存) allocate(分配)的缩写 本程序没有实际含义，只是理解使用 */ # include <stdio.h> # include <malloc.h> int main(void) { int i = 5; //分配了4个字节 静态分配 int * p
  • Objective-C编码规范[译] dcj3sjt126com 代码规范
      原文链接 : The official raywenderlich.com Objective-C style guide 原文作者 : raywenderlich.com Team 译文出自 : raywenderlich.com Objective-C编码规范 译者 : Sam Lau
  • 0.性能优化-目录 frank1234 性能优化
    从今天开始笔者陆续发表一些性能测试相关的文章，主要是对自己前段时间学习的总结，由于水平有限，性能测试领域很深，本人理解的也比较浅，欢迎各位大咖批评指正。 主要内容包括： 一、性能测试指标 吞吐量、TPS、响应时间、负载、可扩展性、PV、思考时间 http://frank1234.iteye.com/blog/2180305 二、性能测试策略 生产环境相同 基准测试 预热等 htt
  • Java父类取得子类传递的泛型参数Class类型 happyqing java泛型父类子类Class
      import java.lang.reflect.ParameterizedType; import java.lang.reflect.Type; import org.junit.Test; abstract class BaseDao<T> { public void getType() { //Class<E> clazz =
  • 跟我学SpringMVC目录汇总贴、PDF下载、源码下载 jinnianshilongnian springMVC
      ----广告-------------------------------------------------------------- 网站核心商详页开发 掌握Java技术，掌握并发/异步工具使用，熟悉spring、ibatis框架； 掌握数据库技术，表设计和索引优化，分库分表/读写分离； 了解缓存技术，熟练使用如Redis/Memcached等主流技术； 了解Ngin
  • the HTTP rewrite module requires the PCRE library 流浪鱼 rewrite
    ./configure: error: the HTTP rewrite module requires the PCRE library. 模块依赖性Nginx需要依赖下面3个包 1. gzip 模块需要 zlib 库 ( 下载: http://www.zlib.net/ ) 2. rewrite 模块需要 pcre 库 ( 下载: http://www.pcre.org/ ) 3. s
  • 第12章 Ajax（中） onestopweb Ajax
    index.html <!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/
  • Optimize query with Query Stripping in Web Intelligence blueoxygen BO
    http://wiki.sdn.sap.com/wiki/display/BOBJ/Optimize+query+with+Query+Stripping+in+Web+Intelligence and a very straightfoward video http://www.sdn.sap.com/irj/scn/events?rid=/library/uuid/40ec3a0c-936
  • Java开发者写SQL时常犯的10个错误 tomcat_oracle javasql
    1、不用PreparedStatements 　　有意思的是，在JDBC出现了许多年后的今天，这个错误依然出现在博客、论坛和邮件列表中，即便要记住和理解它是一件很简单的事。开发者不使用PreparedStatements的原因可能有如下几个： 　　他们对PreparedStatements不了解 　　他们认为使用PreparedStatements太慢了 　　他们认为写Prepar
  • 世纪互联与结盟有感 阿尔萨斯
    10月10日，世纪互联与（Foxcon）签约成立合资公司，有感。 全球电子制造业巨头（全球500强企业）与世纪互联共同看好IDC、云计算等业务在中国的增长空间，双方迅速果断出手，在资本层面上达成合作，此举体现了全球电子制造业巨头对世纪互联IDC业务的欣赏与信任，另一方面反映出世纪互联目前良好的运营状况与广阔的发展前景。 众所周知，精于电子产品制造（世界第一），对于世纪互联而言，能够与结盟
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他