Hgqin
Hgqin

CSS3实现圆环进度条

摘要：圆环进度条被应用于各个场景，比如我们可以用来表示加载进度等。通常我们可以用 css3 的动画去实现。

详解 css3 实现圆环进度条

简单的画一个圆环，我们都知道如何使用 css 画一个圆环。（利用border属性、border-radius属性）

HTML 代码：

<div class="circle>

 CSS 代码：

.circle{
  width:160px;
  height:160px;
  border:20px solid red;
  border-radius:50%;            
}

CSS3实现圆环进度条_第1张图片

 实现圆环进度条属性，我们利用 css 画扇形，然后结合 css3 的动画属性去实现。结合代码去讲解：

HTML代码：

<div class="circle-progress">
        <div class="content left">
            <div class="circle left-circle">div>
        div>
        <div class="content right">
            <div class="circle right-circle">div>
        div>
    div>

 

 首先确定圆环进度条最外层 css 的属性：

 .circle-progress {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid #888;  /*可选属性,仅供测试使用*/
        }

然后定位 content 以及 left 和 right 的属性值：

.content {
            position: absolute;
            top: 0;
            width: 100px;
            height: 200px;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .left {
            left: 0;
        }
        
        .right {
            right: 0;
        }

 

最后确定 left-circle 和 right-circle 属性：

 .circle {
            position: absolute;
            margin: 0;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 20px solid transparent;
            transform: rotate(135deg);
        }
        
        .left-circle {
            left: 0;
            border-top-color: green;
            border-left-color: green;
            animation: circle-left 5s linear infinite;
        }
        
        .right-circle {
            right: 0;
            border-bottom-color: green;
            border-right-color: green;
            animation: circle-right 5s linear infinite;
        }

 

动画 css3 代码：

  @keyframes circle-right {
            0% {
                transform: rotate(135deg);
            }
            50%,
            100% {
                transform: rotate(315deg);
            }
        }
        
        @keyframes circle-left {
            0%,
            50% {
                transform: rotate(135deg);
            }
            100% {
                transform: rotate(315deg);
            }
        }

 

 

完整的代码：

DOCTYPE html>
<html>

<head>
    <title>圆环进度条title>
    <meta charset="utf-8" name="viewport" content="width=device-width;initial-scale=1.0" />
    <style type="text/css">
        html,
        body {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        
        .circle-progress {
            position: relative;
            width: 200px;
            height: 200px;
            border: 1px solid #888;
        }
        
        .content {
            position: absolute;
            top: 0;
            width: 100px;
            height: 200px;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .left {
            left: 0;
        }
        
        .right {
            right: 0;
        }
        
        .circle {
            position: absolute;
            margin: 0;
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 20px solid transparent;
            transform: rotate(135deg);
        }
        
        .left-circle {
            left: 0;
            border-top-color: green;
            border-left-color: green;
            animation: circle-left 5s linear infinite;
        }
        
        .right-circle {
            right: 0;
            border-bottom-color: green;
            border-right-color: green;
            animation: circle-right 5s linear infinite;
        }
        
        @keyframes circle-right {
            0% {
                transform: rotate(135deg);
            }
            50%,
            100% {
                transform: rotate(315deg);
            }
        }
        
        @keyframes circle-left {
            0%,
            50% {
                transform: rotate(135deg);
            }
            100% {
                transform: rotate(315deg);
            }
        }
    style>
head>

<body>
    <div class="circle-progress">
        <div class="content left">
            <div class="circle left-circle">div>
        div>
        <div class="content right">
            <div class="circle right-circle">div>
        div>
    div>
body>

html>

 

你可能感兴趣的:(CSS3实现圆环进度条)

  • 一线大厂的 MQ 组件实现思路和架构设计思路 java领域 java开发语言程序人生单元测试python
    首先来看看一线大厂的架构图一线大厂的架构图如上图所示，中间是我们的MQ集群架构，在上层利用keepalived和HA-Proxy，最下面是两个大的MQ集群做一个高可用。当然了，在实际大厂里面可能就不止两个集群了，可以是很多个集群，然后集群之间利用federration插件进行数据同步。上面的生产端组件：这里面可能就有很多的架构设计，比如生产端怎么对一个容器进行缓存，举个例子，我们生产端发送消息，都
  • API接口助力独立站实现物流追踪自动化 FBAPI3713612741 人工智能python爬虫oneapi
    随着信息技术的飞速发展和电子商务的蓬勃兴起，物流追踪已成为电商平台和独立站运营中不可或缺的一环。API（应用程序编程接口）接口作为连接不同软件系统的桥梁，其在物流追踪自动化方面发挥着至关重要的作用。本文将深入探讨API接口如何助力独立站实现物流追踪自动化，并分析其带来的诸多优势。一、API接口的基本概念与功能API接口是一组预定义的函数或协议，允许不同的软件系统之间进行有效的通信和数据交换。这些接
  • 从数据到决策：API接口助力电商独立站精准营销 FBAPI3713612741 python爬虫
    在数字化时代，电商行业正以前所未有的速度发展，而独立站作为电商领域的重要一环，面临着日益激烈的竞争环境。为了在市场中脱颖而出，独立站需要依靠精准营销来提升用户体验、增加用户黏性，并最终实现销售增长。在这个过程中，数据的作用不可忽视，而API接口则成为连接数据与决策的重要桥梁。本文将深入探讨如何从数据收集、处理、分析到最终决策，利用API接口助力电商独立站实现精准营销。一、数据收集：API接口打通信
  • 电商数据高效处理，离不开API接口技术的支持 FBAPI3713612741 大数据python爬虫oneapi人工智能
    在当今数字化、信息化高速发展的时代，电子商务（电商）行业以其便捷性、高效性和全球化特点，成为了推动经济发展的重要力量。电商平台的成功运作，离不开大量数据的处理与分析，而高效的数据处理则是电商平台得以持续优化用户体验、提升运营效率、实现精准营销的关键。在这一过程中，API（ApplicationProgrammingInterface，应用程序编程接口）接口技术发挥了至关重要的作用。本文将从API接
  • 电商独立站如何利用API接口实现数据驱动决策 FBAPI3713612741 python爬虫oneapi网络
    在电商行业的快速发展中，独立站作为品牌直面消费者的主要渠道，其运营效率和决策准确性至关重要。API接口（ApplicationProgrammingInterface，应用程序编程接口）作为数据交互的标准方式，在电商独立站中扮演着至关重要的角色。它不仅打破了信息孤岛，实现了数据的集中和统一管理，还为电商业务的高效运行和持续创新提供了坚实的支撑。本文将深入探讨API接口技术如何助力电商独立站实现数据
  • 数字时代信息安全的关键之道—零信任架构 AZone架构院 架构
    随着数字化转型的迅猛推进，信息安全面临的挑战也日益复杂和严峻。传统的网络边界已经逐渐模糊，企业数据流动的复杂性和敏感性也随之增加。在此背景下，零信任架构（ZeroTrustArchitecture，ZTA）应运而生，成为保护企业数字资产的首选策略。TheOpenGroup发布了《零信任的核心原则》，详细阐述了零信任架构的核心原则、应用场景以及技术实现，为企业提供了全面的参考指南。01零信任架构的核
  • 无线移动通信的关键技术：SOA,WebX.0,Widget/Mashup,P2P/P4P,SaaS/云计算等架构和MIP,SIP,RTSP (实时流协议)等，定义和特点 晓北斗NorSnow 多媒体考试架构
    以下是对无线移动通信中一些关键技术的定义和特点的整理，以表格形式呈现：技术/架构定义特点SOA（面向服务的架构）一种将应用程序划分为自治的、可重用的、可组合的服务，并通过服务之间的松耦合和标准化的接口进行通信的架构模式1.服务导向，将应用程序看作一组互相独立的服务。2.可重用性高，服务可以被不同的应用程序和业务场景复用。3.松耦合，服务之间通过标准化的接口进行通信，不依赖具体的实现细节。4.灵活性
  • vscode+Python便携版简易制作可以直接复制到u盘 再看我把你喝掉 笔记pythonvscodevisualstudiocode编辑器
    引言对于vscode和Python的爱好者，一直被复杂的开发环境所困扰，于是迫切需要一个可以将vscode和Python放置在u盘中可以不受运行环境的影响运行在不同电脑的便携方案。通过百度初步检索发现：吾爱破解论坛提供了一种需要修改pipe.exe源文件的制作方法，csdn网提供个一种通过设置bat批处理来实现便携化的方案。上述两种方案，操作相对复杂，需要一定的计算机知识，很不方便。对此提出一种更
  • 网页文件下载的各种方式 怪咖学生 前端javascript开发语言
    1.直接通过HTML标签实现文件下载最常见且简便的文件下载方式是使用HTML的标签，配合download属性，允许用户下载文件。适用于静态文件和指定的文件路径。方法：下载文件href:指定文件路径，可以是相对路径或绝对路径。download:指定下载时文件的名称。如果省略，会使用文件的默认名称。优点：简单易用，不需要JavaScript。浏览器原生支持。可用于静态资源的下载。缺点：仅限于文件已经存
  • 人机融合就是心芯相印 人机与认知实验室 人工智能
    人机融合通常是指人类和计算机或智能设备在不同层面上的结合与协作，从而在增强人类能力、提升工作效率、创造更好的体验等方面实现突破。而“心芯相印”则充满诗意和象征性，似乎是在强调人机融合的深层次联结，指的不仅仅是技术上的结合，更是在人性、情感和智慧上的共鸣与契合。“心”在这里不仅仅代表着情感，还可以理解为人的认知和思想。人类是有情感、有意识、有自我意识的生物，科技的最终目的是为了增强人的体验与能力，让
  • npm、cnpm、pnpm、yarn包管理工具别傻傻分不清楚了 青苔猿猿 nodejsnpm前端node.jspnpmyarncnpmnode包管理器
    干啥的：nodejs的包管理工具。用于自动化处理包的安装、更新、配置和管理。它们之间的主要区别在于它们各自的实现方式、性能优化、以及一些特有的功能。怎么用：1、npm1.1、描述NodePackageManager默认包管理器从npm公共仓库中安装、共享和分发代码包npm在项目中创建一个node_modules文件夹，其中包含所有的依赖项。每个项目的依赖都是独立安装的，这可能会导致重复的包和较大的
  • npm、cnpm、pnpm、yarn的区别 迷途小码农零零发 前端知识库npm前端node.js
    npm,cnpm,pnpm,和yarn都是JavaScript的包管理工具，用于自动化处理包的安装、更新、配置和管理。它们之间的主要区别在于它们各自的实现方式、性能优化、以及一些特有的功能。npmnpm(NodePackageManager)是Node.js的默认包管理器，也是最早被广泛接受和使用的JavaScript包管理工具。它允许用户从npm公共仓库中安装、共享和分发代码包。npm在项目中创
  • Python的绝对引入和相对引入 wildland python
    Python的绝对引入和相对引入绝对引入相对引入参考于：https://www.bilibili.com/video/BV1EK411g7Ff在python中有一些常见的概念，并且这些概念可能会被混淆：脚本（script）：一个python文件，可以直接运行用于实现特定的功能。通常不包含类和函数，只是用来执行。模块（module）：也是一个python文件，通常包含了一些类和函数，用来被其他文件引
  • 基于微信小程序的校园二手物品交易平台的设计与实现 AI天才研究院 计算大数据AI人工智能计算科学神经计算深度学习神经网络大数据人工智能大型语言模型AIAGILLMJavaPython架构设计AgentRPA
    基于微信小程序的校园二手物品交易平台的设计与实现1.背景介绍1.1校园二手物品交易的需求在校园生活中,学生们经常会遇到一些闲置物品需要出售或者需要购买的情况。传统的校园二手物品交易方式存在诸多不便,比如信息不对称、交易渠道单一、安全性和可信度较低等问题。随着移动互联网的快速发展,基于微信小程序的校园二手物品交易平台应运而生,为校园师生提供了一个高效、便捷、安全的二手物品交易渠道。1.2微信小程序的
  • Transformers库的模板困境：apply_chat_template的版本变迁与解决方案 Gaffey大杂烩 大模型windowslinux数据库
    目录问题现状低版本（4.43及以下）的简便方式高版本的报错问题原因分析旧版本的实现逻辑新版本的变化解决办法问题现状在使用Transformers库中的tokenizer处理模型输入时，我们经常需要将输入文本格式化为模型可以理解的格式。这个过程在不同版本的Transformers库中有着显著的差异。低版本（4.43及以下）的简便方式在Transformers4.43及更低版本中，当我们需要加载类似C
  • springboot整合Logback m0_74825634 面试学习路线阿里巴巴springbootlogback后端
    Logback介绍描述Logback是由log4j创始人设计的另外一种开源日志组件，性能比log4j要好。相对是一个可靠、通用、快速而又灵活的Java日志框架。Logback主要分三个模块1、logback-core：其他两个模块的基础模块2、logback-classic：它是log4j的一个改良版本，同时它完整实现了slf4j。API，可以很方便地更换成其它日志系统，如log4j或JDK14L
  • 【Docker】Docker中的动态容器管理：利用Golang实现Docker容器动态重命名的高级策略与最佳实践 m0_74825634 面试学习路线阿里巴巴dockergolang容器
    【Docker】Docker中的动态容器管理：利用Golang实现Docker容器动态重命名的高级策略与最佳实践大家好我是寸铁??总结了一篇【Docker】Docker中的动态容器管理：利用Golang实现Docker容器动态重命名的高级策略与最佳实践喜欢的小伙伴可以点点关注??前言今天遇到一个新的需求，要动态改变运行中的容器名字。可以考虑先把容器删除再重新创建容器那这里要考虑一个问题:假设我容器
  • java集成kafka案例 沉墨的夜 javakafka开发语言
    要在Java项目中集成ApacheKafka以实现消息的生产和消费，步骤如下：1.引入Maven依赖在您的pom.xml文件中添加以下依赖，以包含Kafka客户端库：org.apache.kafkakafka-clients2.8.0org.springframework.kafkaspring-kafka2.7.02.配置Kafka生产者首先，设置生产者的配置属性：importorg.apach
  • ShardingSphere实例讲解 沉墨的夜 java数据库分库分表shardingsphere
    ShardingSphere（原名Sharding-JDBC）是一个开源的分布式数据库中间件，它为Java应用提供了透明的数据库分片、读写分离、分布式事务等功能。在使用ShardingSphere时，应用不需要了解数据库分片的实现细节，它会自动将SQL请求路由到正确的数据库和表。以下是一个简单的ShardingSphere-JDBC实例讲解，展示如何在Java项目中配置和使用Sharding-JD
  • 架构师：微服务如何划分的技术指南 拾荒的小海螺 架构师微服务架构云原生
    1、简述微服务架构是一种将大型应用拆分为多个小型独立服务的设计模式，每个服务专注于一个具体的业务功能。正确划分微服务是实现高效系统的关键，能够提高系统的灵活性、可维护性和扩展性。2、核心原则以业务功能为中心每个微服务对应一个单一的业务能力，具有明确的职责(单一职责原则)。示例：用户服务、订单服务、支付服务。独立性(高内聚低耦合)微服务应能够独立部署、扩展和运行，避免过多的耦合。示例：用户服务的更新
  • Google Protocol Buffers介绍 fengbingchun Caffe
    GoogleProtocolBuffers(简称Protobuf)，是Google的一个开源项目，它是一种结构化数据存储格式，是Google公司内部的混合语言数据标准，是一个用来序列化（将对象的状态信息转换为可以存储或传输的形式的过程）结构化数据（即行数据，存储在数据库里，可以用二维表结构来逻辑表达实现的数据）的技术，支持多种语言诸如C++、Java以及Python。可以使用该技术来持久化数据（将
  • vue3：mitt 米粒宝的爸爸 vue3vue.js前端javascript
    在Vue3中使用mitt进行事件总线的实现非常简单。mitt是一个轻量级的事件库，适用于Vue项目中的组件间通信。实现自定义组件直接相互传值，父到子，子到子，子对子，子对孙，想怎么传就怎么传。和android的Eventbus一个玩法1.下载mittnpmimittmac下载，如果权限不够，加sudo2.创建个公共的utils类-emitter.ts//引入mittimportmittfrom'm
  • 轻松实现 vLLM Chat：用 LangChain 替代 OpenAI API ahdfwcevnhrtds langchainpython
    引言在现代应用中，使用语言模型进行自动化对话生成已经成为一个重要趋势。vLLM作为开源的语言模型实现，可以部署成一个模拟OpenAIAPI协议的服务器，方便成为应用中的替代方案。本篇文章将介绍如何使用LangChain的langchain-openai包来轻松实现vLLMChat。主要内容vLLM概述vLLM可以作为一个服务部署，模拟OpenAIAPI协议，从而成为OpenAIAPI的替代方案。通
  • .NET MAUI 手搓 UDP/TCP 通信 云端狂人 .netudptcp/ip
    在.NETMAUI中，UDP和TCP是网络通信协议，与MAUI框架本身的关系在于.NETMAUI可以利用.NET的网络功能来实现跨平台的网络通信。.NET提供的System.Net.Sockets命名空间来处理。该命名空间提供了创建和管理套接字（Sockets）来进行网络通信的相关类和方法。在.NETMAUI中，这些类同样适用于跨平台应用开发。具体来说：.NETMAUI是一个跨平台框架，用于构建A
  • Python 网络爬虫进阶：动态网页爬取与反爬机制应对 Milk夜雨 pythonpython爬虫
    在上一篇文章中，我们学习了如何使用Python构建一个基本的网络爬虫。然而，在实际应用中，许多网站使用动态内容加载或实现反爬机制来阻止未经授权的抓取。因此，本篇文章将深入探讨以下进阶主题：如何处理动态加载的网页内容应对常见的反爬机制爬虫性能优化通过具体实例，我们将探讨更复杂的网络爬虫开发技巧。一、动态网页爬取现代网页通常通过JavaScript加载动态内容。直接使用requests获取的HTML可
  • 使用飞书群机器人监控服务器GPU使用率 sunrise_ccx 服务器飞书
    目标：如果服务器GPU空置，可以及时推送消息到飞书群。其他类似的监控目标也可以修改代码实现。步骤：(1)首先在群聊设置加入机器人，复制webhook_url(2)在服务器后台运行如下代码。注意替换webhook_url"""nohuppythonmonitor_gpu.pymy_server>monitor_gpu.log2>&1&"""importsysimportsubprocessimpor
  • 使用 Python 和 scikit-learn 实现 KNN 分类：以鸢尾花数据集为例 弥树子 pythonscikit-learn分类
    在机器学习的世界里，K-NearestNeighbors（KNN）算法是一种简单而强大的分类方法。它基于一个直观的想法：相似的数据点往往属于同一类别。本文将通过Python的scikit-learn库实现KNN分类，以经典的鸢尾花数据集为例，展示从数据加载到模型评估的完整流程。1.KNN算法简介KNN是一种监督学习算法，主要用于分类和回归任务。它的工作原理非常简单：对于一个新的数据点，算法会查找训
  • 【计算机视觉】图像滤波 油泼辣子多加 计算机视觉计算机视觉人工智能python神经网络
    1.图像滤波定义图像滤波是一种非常重要的图像处理技术，图像平滑、边缘检测、边缘增强、去除噪声都属于图像滤波，图像滤波是一种基于邻域的算法。通过图像滤波，可以实现图像平滑、边缘检测；图像平滑也叫图像模糊，用以去除图像中的噪声、伪影等，它是图像处理和计算机视觉的常见步骤。函数模糊类型特点使用场景cv.blur均值模糊简单快速，所有像素权重相等基础平滑和降噪cv.GaussianBlur高斯模糊中心权重
  • Android BitmapShader简洁实现马赛克，Kotlin（二） zhangphil kotlinAndroidandroidkotlin
    AndroidBitmapShader简洁实现马赛克，Kotlin（二）这一篇AndroidBitmapShader简洁实现马赛克，Kotlin（一）-CSDN博客遗留一个问题，xml定义的MyView为wrap_content的宽高，如果改成其他模式如match_parent，因为background的Bitmap和draw时候的Bitmap不一致（background被拉伸了），导致手指划过屏
  • kotlin单例 yufumatou kotlinkotlin单例单例
    一、饿汉模式（1）类加载是线程安全的，静态变量是在类加载的时候进行赋值，所以该模式是线程安全的。（2）无法懒加载（此处只是伪概念，一般我们使用单例类的时候都需要单例对象。只有当声明了其他的静态方法，在不调用获取单例对象的方法前调用静态方法，才会体现出相对懒汉模式无法懒加载的特性，但实际使用中一般不会在单例类中再声明其他静态方法）（3）无法给构造函数传参//Java实现publicclassSing
  • 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其他