雪汐落
雪汐落

利用svg画圆环进度条的两种方式

本文只要描述利用svg circle标签的实现方法

  • 知识点准备（摘自阮一峰老师的网络日志）

    1.标签

    SVG 代码都放在顶层标签``之中。下面是一个例子。

    <svg width="100%" height="100%">
  <circle id="mycircle" cx="50" cy="50" r="50" />
svg>

    的width属性和height属性，指定了SVG 图像在` HTML 元素中所占据的宽度和高度。除了相对单位，也可以采用绝对单位（单位：像素）。如果不指定这两个属性，SVG 图像默认大小是300像素（宽） x 150像素（高）。

    如果只想展示 SVG 图像的一部分，就要指定viewBox属性。

    <svg width="100" height="100" viewBox="50 50 50 50">
  <circle id="mycircle" cx="50" cy="50" r="50" />
svg>

    属性的值有四个数字，分别是左上角的横坐标和纵坐标、视口的宽度和高度。上面代码中，SVG 图像是100像素宽 x 100像素高，`viewBox属性指定视口从(50, 50)这个点开始。所以，实际看到的是右下角的四分之一圆。

    注意，视口必须适配所在的空间。上面代码中，视口的大小是 50 x 50，由于 SVG 图像的大小是 100 x 100，所以视口会放大去适配 SVG 图像的大小，即放大了四倍。

    如果不指定width属性和height属性，只指定viewBox属性，则相当于只给定SVG 图像的长宽比。这时，SVG 图像的默认大小将等于所在的 HTML 元素的大小。

    2.circle标签

    ``标签代表圆形。

    <svg width="300" height="180">
  <circle cx="30"  cy="50" r="25" />
  <circle cx="90"  cy="50" r="25" class="red" />
  <circle cx="150" cy="50" r="25" class="fancy" />
svg>

    上面的代码定义了三个圆。标签的`cx`、`cy`、`r`属性分别为横坐标、纵坐标和半径，单位为像素。坐标都是相对于画布的左上角原点。

    class属性用来指定对应的 CSS类。

    .red {
  fill: red;
}

.fancy {
  fill: none;
  stroke: black;
  stroke-width: 3pt;
}

    SVG 的 CSS 属性与网页元素有所不同。

    • fill：填充色
    • stroke：描边色
    • stroke-width：边框宽度

    3.animate标签

    ``标签用于产生动画效果。

    <svg width="500px" height="500px">
  <rect x="0" y="0" width="100" height="100" fill="#feac5e">
    <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
  rect>
svg>

    上面代码中，矩形会不断移动，产生动画效果。

    animate的属性含义如下。

    • attributeName：发生动画效果的属性名。
    • from：单次动画的初始值。
    • to：单次动画的结束值。
    • dur：单次动画的持续时间。
    • repeatCount：动画的循环模式。
    • fill:可以让动画结束后停留 可选值 freeze：停在最后一帧 remove：回到初始帧

    可以在多个属性上面定义动画。

    <animate attributeName="x" from="0" to="500" dur="2s" repeatCount="indefinite" />
<animate attributeName="width" to="500" dur="2s" repeatCount="indefinite" />

  • 两种方式主要利用了svg的stroke-dasharray属性控制描边幅度

    stroke-dasharray 属性通俗来讲就是把描边变成点状形态，类似border 的 dashed 的效果

    stroke-dasharray 可接受多个参数

    例如：

    1.stroke-dasharray: 10 表示 先描边10个单位 在空10个单位 在描边10个单位 在空10个单位...... 直到描完整个边
2.stroke-dasharray: 10 20 表示 先描边10个单位 在空20个单位 在描边10个单位 在空20个单位...... 直到描完整个边
3.stroke-dasharray: 10 20 30 表示 先描边10个单位 在空20个单位 在描边30个单位 在空10个单位...... 直到描完整个边
以下是具体实现方式

1.利用svg的animate标签实现

<svg height="400" width="400" viewBox="0 0 400 400">
  <circle
    cx="200"
    cy="200"
    r="170"
    fill="yellow"
    stroke="red"
    stroke-width="30"
    stroke-dasharray="0 1200"
    stroke-linecap="round"
  >
    <animate fill="freeze" attributeName="stroke-dasharray" from="0 1200" to="500 1200" dur="2s" repeatCount="1" />
  circle>
svg>
//此处stroke-dasharray的第二个参数只要能够大于整个圆环路径周长就可以，通过控制animate中 to 的属性，控制描边幅度,具体像圆环这种效果可以画两个circle，一个有描边，一个按上述控制就是圆环进度条的样子。

2.利用js动态控制 stroke-dasharray属性，然后再css中加上过渡动画


<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Titletitle>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    html, body {
      height: 100%;
      width: 100%;
      overflow: hidden;
    }
    circle {
       //圆环的过渡动画
      -webkit-transition: stroke-dasharray 800ms;
      transition: stroke-dasharray 800ms;
    }
  style>
head>
<body>
<svg width="440" height="440" viewbox="0 0 440 440">
  <circle cx="220" cy="220" r="170" stroke-width="50" stroke="blue" fill="none">circle>
  <circle cx="220" cy="220" r="170" stroke-width="50" stroke="red" fill="none" transform="matrix(0,-1,1,0,0,440)" stroke-dasharray="0 1069">circle>
svg>
<script>
  let percent = 0.7  //从接口获取到的圆环填充百分比
  let circle = document.querySelectorAll("circle")[1];
  let perimeter =  circle.getTotalLength() //圆环的周长
  circle.setAttribute('stroke-dasharray', perimeter * percent + " " + perimeter * (1- percent));
script>
body>
html>

你可能感兴趣的:(svg)

  • 360前端星计划-动画可以这么玩 马小蜗
    动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
  • svg图片兼容性和用法优缺点 独行侠_ef93
    svg图片的使用方法第一次来认认真真的研究了下svg图片，之前只是在网上见过，但都是一晃而过也没当回事，最近网站改版看到同事有用到svg格式的图片，想想自己干了几年的重构也没用过，这些细节的知识是应该好好研究研究了。暂时还没研究得完全透切，先记下目前为止所看到的吧不然又给忘了。svg可缩放矢量图形（ScalableVectorGraphics），顾名思义就是任意改变其大小也不会变形，是基于可扩展标
  • HighCharts图表自动化简介 知识的宝藏 Selenium高级篇Selenium图表自动化测试highcharts图表自动化Selenium图表自动化图表自动化测试highchartsSelenium
    什么是分析数据？在任何应用程序中捕获并以图形或图表形式显示的分析数据是任何产品或系统的关键部分，因为它提供了对实时数据的洞察。验证此类分析数据非常重要，因为不准确的数据可能会在报告中产生问题，并可能影响应用程序/系统的其他相关领域。什么是HighChart？Highcharts是一个用纯JavaScript编写的j基于SVG成图技术的图表库，提供了一种简单的方法来向您的网站或Web应用程序添加交互
  • vue3中动态引入本地图片的两种方法 morenhaodan 前端javascriptvue.js
    方法一推荐简单好用方法二constgetImg=index=>{constmodules=import.meta.glob('@/assets/nncs2/**/*.{png,svg,jpg,jpeg}',{eager:true})consturl=`/src/assets/nncs2/jiantou${index+1}.png`//console.log(modules)if(modules[u
  • 2024年Python最全Python-Matplotlib可视化（1）——一文详解常见统计图的绘制(1) 2401_84558452 程序员pythonmatplotlib开发语言
    importmatplotlib.pyplotaspltx=range(50)y=[value*2forvalueinx]plt.plot(x,y)plt.show()上述代码将会绘制曲线y=2*x，其中x在[0，50]范围内，如下所示：可以看到窗口上方还包含多个图标，其中：|项目|Value||—|—|||此按钮用于将所绘制的图形另存为所需格式的图片，包括png，jpg，pdf，svg等常见格式
  • CSS具有哪些特点呢？ weixin_54503231 css前端
    CSS是CascadingStyleSheets（层叠样式表）的缩写，它是一种用来描述HTML或XML（包括如SVG、MathML等衍生技术）文档样式的计算机语言。CSS的主要目的是为网页提供样式设计，包括颜色、字体、布局等，通过CSS，可以控制网页元素的外观和排版，使得网页更加美观和易于阅读。CSS的特点简单易学：CSS语言短小精悍，语法简单易学，使用起来很方便，可以快速地修改样式。内容与样式分
  • 「iOS学习」——Masonry学习 归辞... ios学习cocoa
    iOS学习前言Masonry的属性Masonry的使用基础APIAutoBoxing修饰语倍数中心点设置边距优先级使用总结前言暑假我们学习了使用CocoaPods引入第三方库，实现使用SVG图片。而Masonry作为一个轻量级的布局架构，在使用中可以节省很多时间。故进行简单学习。Masonry的属性UI设计是iOS开发的必须一环，直接影响了app的观感和使用体验。我们通常使用frame框架直接确定
  • 使用fabric.js简简单单实现一个画板 小草先森tyro 前端
    什么是fabricfabric是一个功能强大的JavaScript库,运行在HTML5canvas上。fabric为canvas提供了一个交互式对象模型，以及一个svg-to-canvas解析器。与canvas的区别来一个简单的例子来说明一下fabric与canvas的区别，假设我们想在一个画布上画一个红色的矩形：//原生canvasapi//有一个id是c的canvas元素varcanvasEl
  • 探索 Fabric.js：前端开发的轻量级图形编辑框架 滑辰煦Marc
    探索Fabric.js：前端开发的轻量级图形编辑框架是一个强大的、基于WebGL和SVG的JavaScript图形库，专为构建交互式图形界面而设计。它提供了一种简单的方式来在网页上创建和操纵矢量对象，包括文本、形状、图像等，并且具有丰富的可定制性和性能优化。项目简介Fabric.js提供了一个统一的对象模型，使得处理HTML5canvas上的元素变得异常简单。无论是创建复杂的绘图应用，还是实现动态
  • ionic3 自定义图标及应用 咔簌
    生成图标准备好项目需要使用的图标，需为svg格式https://icomoon.io/app/进入iconmoon网址点击左上角汉堡包按钮，新建一个空的项目image.png点击项目右侧汉堡包添加自定义的图标，第一项可修改项目名image.png选中所有图标，选中generatefont,image.png修改完图标的名字后，下载image.png下载后的文件中我们需要用到的是font以及styl
  • 2. Fabric 简介 Lanwarf-前端开发 Fabricfabricjavascript
    1.介绍Fabric.js—一个功能强大的Javascript库，使使用HTML5canvas的工作变得轻而易举。Fabric提供了画布缺少的对象模型，以及SVG解析器，交互性层和一整套其他必不可少的工具。这是一个完全开放源代码的项目，已获得麻省理工学院（MIT）的许可，多年来有许多贡献。在发现使用原生canvasAPI的烦恼之后，Fabric于2010年左右开始。最初的作者正在为printio.
  • 3个免费好用的网站，可以转换PDF，提取MP3 精选软件库 pdf
    今天分享的三个网站，分别用于文件转换PDF，QMC转MP3格式和配色网站。TOPDF这个网站是一个在线PDF转换工具，可以快速将文本文件、演示文稿、电子表格和图片转换为PDF格式。它支持多种文件格式，如AZW3、BMP、CHM、CSV、DjVu、DOC、DOCX、EPS、ePub、HEIC、JPG、MD、MOBI、ODT、OXPS、PNG、PPT、PPTX、PS、PUB、RTF、SVG、TIFF、
  • 鸿蒙 HarmonyOS学习日记 Day 2 界面开发、布局 林钟雪 Harmonyosharmonyos学习华为
    文章目录一、界面开发1、代码书写方式2、界面开发-布局思路3、组件的属性方法4、文字溢出省略号、行高5、Image图片组件6、输入框与按钮四、综合实战-华为登录五、svg图标六、布局元素的组成二、单位问题一、界面开发1、代码书写方式1、代码块在build()方法中书写，在右侧预览中查看效果2、界面开发-布局思路1、ArkUI(方舟开发框架)说明：是一套构建鸿蒙应用界面的框架构建页面的最小单位就是“
  • React中实现antd自定义图标，鼠标悬浮变色 小鸟哗啦啦 react.js前端javascript
    借助antd的tooltip组件来实现hover时变色的效果1.新建组件自定义图标一般在iconfont上面获取，复制下来的svg代码，切记要删除fill属性后添加到组件中import{Tooltip}from"antd";importReactfrom"react";constHoverableSvg=()=>{return({/*...*/});};exportdefaultHoverable
  • OmniGraffle Pro for mac(思维导图软件)v7.22.4正式版 不知名女娃 macos
    OmniGrafflePro是一款专业的图形设计工具，主要用于绘制流程图、组织结构图、网络图、原型设计等。它具有丰富的模板和符号库，用户可以根据需要自定义符号和模板，方便快捷地创建各种类型的图形设计。此外，OmniGrafflePro还支持多种导出格式，包括PDF、PNG、JPG、SVG等。它还可以与其他软件进行无缝集成，如Sketch、Photoshop、Illustrator等。总的来说，Om
  • Flink(1.13) 的运行架构 万事万物
    架构图image.png官网原图：https://ci.apache.org/projects/flink/flink-docs-release-1.13/fig/processes.svgFlink运行时至少包含两个进程：1个JobManager和至少1个TaskManager。角色FlinkProgram（客户端）作用：负责将程序代码解析成数据流图(Dataflowgraph)，并发送给Job
  • safari中filter: drop-shadow()导致图片展示不出来 史努比的大头 safari前端css
    有时候我们可能需要通过css来改变一个svg图片的颜色，比如让其跟随主题色改变.send-button{overflow:hidden;.send-button-img{filter:drop-shadow(@primary-24px0px0px);transform:translateX(24px);}}上面代码的原理是：drop-shadow(@primary-24px0px0px):这行代码
  • TPAMI 2024 | TransVG++：基于语言条件视觉Transformer的端到端视觉定位 小白学视觉 论文解读IEEETPAMItransformer深度学习人工智能TAPMI顶刊论文论文解读
    题目：TransVG++:End-to-EndVisualGroundingWithLanguageConditionedVisionTransformerTransVG++：基于语言条件视觉Transformer的端到端视觉定位作者：JiajunDeng,ZhengyuanYang,DaqingLiu,TianlangChen,WengangZhou,YanyongZhang,HouqiangL
  • 鸿蒙（API 12 Beta3版）【使用ImageSource完成图片解码】图片开发指导 移动开发技术栈 鸿蒙开发harmonyosopenharmony媒体ArkTS图片解码鸿蒙
    图片解码指将所支持格式的存档图片解码成统一的[PixelMap]，以便在应用或系统中进行图片显示或[图片处理]。当前支持的存档图片格式包括JPEG、PNG、GIF、WebP、BMP、SVG、ICO、DNG。开发步骤全局导入Image模块。import{image}from'@kit.ImageKit';获取图片。方法一：获取沙箱路径。具体请参考[获取应用文件路径]应用沙箱的介绍及如何向应用沙箱推送
  • 33.鼠标悬停时的波浪线效果 & CSS 重置 @大迁世界 CSS技巧与案例详解css前端
    鼠标悬停时的波浪线效果在鼠标悬停在链接上时创建波浪线效果。使用linear-gradient为链接创建重复背景。为链接创建一个:hover状态,其background-image为一个包含带有波浪路径和动画的SVG的dataURL。The<aclass="squiggle"href="#"
  • HarmonyOS鸿蒙转场动画概览 PlumCarefree harmonyos华为
    使用原因：提升用户体验，更加流畅丝滑动效设计场景1.特征动效2.转场动效点击滑动翻动夹捏拖拽3.微动效细微动画4.特征动效插画动效动画能力选型系统动画属性动画显示动画转场动画路径动画粒子动画第三方动画资源加载类GIF动画帧动画第三方库LottieSVG动画开发实现视角转换步骤了解系统能力，包括相关的API分析UX设计视角设计动画方案使用动画能力调试和优化例如使用属性动画：.animation例如加
  • 鸿蒙（API 12 Beta3版）【使用Image完成图片解码】图片开发指导依赖JS对象 移动开发技术栈 鸿蒙开发harmonyosopenharmony媒体鸿蒙图片依赖解码
    图片解码指将所支持格式的存档图片解码成统一的[PixelMap]，以便在应用或系统中进行图片显示或[图片处理]。当前支持的存档图片格式包括JPEG、PNG、GIF、WebP、BMP、SVG、ICO、DNG。开发步骤添加依赖在进行应用开发之前，开发者需要打开native工程的src/main/cpp/CMakeLists.txt，在target_link_libraries依赖中添加libace_n
  • 【Python】使用Python对pdf,svg,png等进行转换 Technicalflight python人工智能开发语言
    Technicalflight转换工具使用Python对pdf,svg,png等进行转换代码开源在Github：https://github.com/Technicalflight/Python-Transformation感谢你们的小星星！！！！上手指南将Python文件下载后，先将requirements.txt文件中的依赖进行下载开发前的配置要求Python3安装步骤在Window平台上安装
  • vue3使用elementui-plus时使用深度选择器穿透影响原样式 lytcreate. VUE3前端elementui前端javascript
    一、原样式：下拉框选择时，右边存在一个下拉的箭头符号，那么在许多场景下我们不需要显示，这个时候就可以通过开发者工具进行定位，选中该元素，可以看到，影响的样式是：.el-iconsvg二、深度穿透修改原样式我们修改原样式，增加display:none即可不显示该符号，此时有两种方案，一种是取消style里面的scoped属性，这样会影响全局样式，导致所有的下拉框都没有这个符号了，这并不是我想要的，所
  • Office 2019新增功能 iLester
    SVG支持image.png插入应用了筛选器的可缩放矢量图形(SVG)，为文档、工作表和演示文稿增添视觉趣味。内置翻译程序image.png使用MicrosoftTranslator将单词、短语和其他所选文字翻译成另一种语言。快速访问附件image.png曾经查找以附件形式发送给你的某个文件是否十分辛苦？不必再担心了！现在只需单击“文件”>“打开”>“与我共享的内容”即可。支持Latex公式ima
  • CSS 8种让人眼前一亮的hover效果眼前一亮的HOVER效果 小湾生产队队长 CSS样式
    目录CSS8种让人眼前一亮的hover效果眼前一亮的HOVER效果一、发送效果二、霓虹效果三、边框效果四、圆形渐进效果五、圆角效果六、冰冻效果七、闪亮效果八、加载效果CSS8种让人眼前一亮的hover效果眼前一亮的HOVER效果一、发送效果效果HTML//这里是一个svg的占位SendCSS#send-btn{display:flex;align-items:center;justify-cont
  • 3 HTML5 svg 官清岁月
    SVG:ScalableVectorGraphics;//可缩放矢量图形->svg图像放大情况下图形质量不会损失(失真)；-->应用场景：图表、动画、矢量图(点/线/面,形成的基本图形)、常用于制作图标icon1、canvas与svg的区别：(1).canvas是由像素点构成的，其依赖分辨率，其放大后会"失真"；其通过js来绘制2D图形，常用来制作游戏、图表(运行速度快)；(2).svg是由图形(
  • 【实战】二、Jest难点进阶（二） —— 前端要学的测试课 从Jest入门到TDD BDD双实战（六） 程序边界 前端tdd
    文章目录一、Jest前端自动化测试框架基础入门二、Jest难点进阶2.mock深入学习学习内容来源：Jest入门到TDD/BDD双实战_前端要学的测试课相对原教程，我在学习开始时（2023.08）采用的是当前最新版本：项版本@babel/core^7.16.0@pmmmwh/react-refresh-webpack-plugin^0.5.3@svgr/webpack^5.5.0@testing-
  • Boxy SVG for Mac(矢量图编辑器) 青色精灵
    BoxySVGforMac是一款非常好用的向量绘图工具，适用于初学者以及专业网页设计师和Web开发人员。boxysvg拥有超过100个命令的可配置键盘快捷键，能够让你快速制作出各种各样的矢量图。拥有BoxySVGforMac，让编辑矢量图不再困难！今天给大家分享的是BoxySVGforMac已经激活成功的版本，直接拖拽安装即可使用！BoxySVGforMac功能介绍1、干净，直观的UI深受Inks
  • Vue3+vite搭建基础架构（9）--- 使用vite-plugin-svg-icons 谁不想飞舞青春 前端vuevue.js前端javascripthtml5
    Vue3+vite搭建基础架构（9）---使用vite-plugin-svg-icons说明安装vite-plugin-svg-icons使用vite-plugin-svg-icons添加svg-icon组件和全局组件js文件测试svg雪碧图说明这里记录下自己在Vue3+vite的项目使用vite-plugin-svg-icons来全局使用svg雪碧图，不使用ts语法，方便以后直接使用。这里承接自
  • Java常用排序算法/程序员必须掌握的8大排序算法 cugfy java
    分类： 1）插入排序（直接插入排序、希尔排序） 2）交换排序（冒泡排序、快速排序） 3）选择排序（直接选择排序、堆排序） 4）归并排序 5）分配排序（基数排序） 所需辅助空间最多：归并排序 所需辅助空间最少：堆排序 平均速度最快：快速排序 不稳定：快速排序，希尔排序，堆排序。 先来看看8种排序之间的关系：   1.直接插入排序 （1
  • 【Spark102】Spark存储模块BlockManager剖析 bit1129 manager
    Spark围绕着BlockManager构建了存储模块，包括RDD，Shuffle，Broadcast的存储都使用了BlockManager。而BlockManager在实现上是一个针对每个应用的Master/Executor结构，即Driver上BlockManager充当了Master角色，而各个Slave上(具体到应用范围，就是Executor)的BlockManager充当了Slave角色
  • linux 查看端口被占用情况详解 daizj linux端口占用netstatlsof
    经常在启动一个程序会碰到端口被占用，这里讲一下怎么查看端口是否被占用，及哪个程序占用，怎么Kill掉已占用端口的程序   1、lsof -i:port port为端口号   [root@slave /data/spark-1.4.0-bin-cdh4]# lsof -i:8080 COMMAND   PID USER   FD   TY
  • Hosts文件使用 周凡杨 hostslocahost
         一切都要从localhost说起，经常在tomcat容器起动后，访问页面时输入http://localhost:8088/index.jsp，大家都知道localhost代表本机地址，如果本机IP是10.10.134.21，那就相当于http://10.10.134.21:8088/index.jsp，有时候也会看到http: 127.0.0.1:
  • java excel工具 g21121 Java excel
    直接上代码，一看就懂，利用的是jxl： import java.io.File; import java.io.IOException; import jxl.Cell; import jxl.Sheet; import jxl.Workbook; import jxl.read.biff.BiffException; import jxl.write.Label; import
  • web报表工具finereport常用函数的用法总结（数组函数） 老A不折腾 finereportweb报表函数总结
    ADD2ARRAY ADDARRAY(array,insertArray, start):在数组第start个位置插入insertArray中的所有元素，再返回该数组。 示例： ADDARRAY([3,4, 1, 5, 7], [23, 43, 22], 3)返回[3, 4, 23, 43, 22, 1, 5, 7]. ADDARRAY([3,4, 1, 5, 7], "测试&q
  • 游戏服务器网络带宽负载计算 墙头上一根草 服务器
    家庭所安装的4M，8M宽带。其中M是指，Mbits/S 其中要提前说明的是： 8bits = 1Byte 即8位等于1字节。我们硬盘大小50G。意思是50*1024M字节，约为 50000多字节。但是网宽是以“位”为单位的，所以，8Mbits就是1M字节。是容积体积的单位。 8Mbits/s后面的S是秒。8Mbits/s意思是 每秒8M位，即每秒1M字节。 我是在计算我们网络流量时想到的
  • 我的spring学习笔记2-IoC（反向控制 依赖注入） aijuans Spring 3 系列
    IoC（反向控制 依赖注入）这是Spring提出来了，这也是Spring一大特色。这里我不用多说，我们看Spring教程就可以了解。当然我们不用Spring也可以用IoC，下面我将介绍不用Spring的IoC。 IoC不是框架，她是java的技术，如今大多数轻量级的容器都会用到IoC技术。这里我就用一个例子来说明： 如：程序中有 Mysql.calss 、Oracle.class 、SqlSe
  • 高性能mysql 之 选择存储引擎(一) annan211 mysqlInnoDBMySQL引擎存储引擎
    1 没有特殊情况，应尽可能使用InnoDB存储引擎。   原因：InnoDB 和 MYIsAM 是mysql 最常用、使用最普遍的存储引擎。其中InnoDB是最重要、最广泛的存储引擎。她   被设计用来处理大量的短期事务。短期事务大部分情况下是正常提交的，很少有回滚的情况。InnoDB的性能和自动崩溃   恢复特性使得她在非事务型存储的需求中也非常流行，除非有非常
  • UDP网络编程 百合不是茶 UDP编程局域网组播
      UDP是基于无连接的,不可靠的传输   与TCP/IP相反       UDP实现私聊,发送方式客户端,接受方式服务器 package netUDP_sc; import java.net.DatagramPacket; import java.net.DatagramSocket; import java.net.Ine
  • JQuery对象的val()方法执行结果分析 bijian1013 JavaScriptjsjquery
            JavaScript中，如果id对应的标签不存在（同理JAVA中，如果对象不存在），则调用它的方法会报错或抛异常。在实际开发中，发现JQuery在id对应的标签不存在时，调其val()方法不会报错，结果是undefined。        
  • http请求测试实例（采用json-lib解析） bijian1013 jsonhttp
            由于fastjson只支持JDK1.5版本，因些对于JDK1.4的项目，可以采用json-lib来解析JSON数据。如下是http请求的另外一种写法，仅供参考。 package com; import java.util.HashMap; import java.util.Map; import
  • 【RPC框架Hessian四】Hessian与Spring集成 bit1129 hessian
    在【RPC框架Hessian二】Hessian 对象序列化和反序列化一文中介绍了基于Hessian的RPC服务的实现步骤，在那里使用Hessian提供的API完成基于Hessian的RPC服务开发和客户端调用，本文使用Spring对Hessian的集成来实现Hessian的RPC调用。   定义模型、接口和服务器端代码 |---Model    &nb
  • 【Mahout三】基于Mahout CBayes算法的20newsgroup流程分析 bit1129 Mahout
    1.Mahout环境搭建  1.下载Mahout http://mirror.bit.edu.cn/apache/mahout/0.10.0/mahout-distribution-0.10.0.tar.gz    2.解压Mahout  3. 配置环境变量 vim /etc/profile export HADOOP_HOME=/home
  • nginx负载tomcat遇非80时的转发问题 ronin47
    　　nginx负载后端容器是tomcat（其它容器如WAS,JBOSS暂没发现这个问题）非８０端口，遇到跳转异常问题。解决的思路是：$host:port        详细如下： 　　 该问题是最先发现的，由于之前对nginx不是特别的熟悉所以该问题是个入门级别的： ? 1 2 3 4 5
  • java-17-在一个字符串中找到第一个只出现一次的字符 bylijinnan java
    public class FirstShowOnlyOnceElement { /**Q17.在一个字符串中找到第一个只出现一次的字符。如输入abaccdeff，则输出b * 1.int[] count:count[i]表示i对应字符出现的次数 * 2.将26个英文字母映射：a-z <--> 0-25 * 3.假设全部字母都是小写 */ pu
  • mongoDB 复制集 开窍的石头 mongodb
    mongo的复制集就像mysql的主从数据库，当你往其中的主复制集(primary)写数据的时候，副复制集(secondary)会自动同步主复制集(Primary)的数据,当主复制集挂掉以后其中的一个副复制集会自动成为主复制集。提供服务器的可用性。和防止当机问题             mo
  • [宇宙与天文]宇宙时代的经济学 comsci 经济
        宇宙尺度的交通工具一般都体型巨大，造价高昂。。。。。      在宇宙中进行航行，近程采用反作用力类型的发动机，需要消耗少量矿石燃料，中远程航行要采用量子或者聚变反应堆发动机，进行超空间跳跃，要消耗大量高纯度水晶体能源      以目前地球上国家的经济发展水平来讲，
  • Git忽略文件 Cwind git
         有很多文件不必使用git管理。例如Eclipse或其他IDE生成的项目文件，编译生成的各种目标或临时文件等。使用git status时，会在Untracked files里面看到这些文件列表，在一次需要添加的文件比较多时（使用git add . / git add -u），会把这些所有的未跟踪文件添加进索引。 ==== ==== ==== 一些牢骚
  • MySQL连接数据库的必须配置 dashuaifu mysql连接数据库配置
    MySQL连接数据库的必须配置   1.driverClass：com.mysql.jdbc.Driver   2.jdbcUrl：jdbc:mysql://localhost:3306/dbname   3.user：username   4.password：password   其中1是驱动名；2是url，这里的‘dbna
  • 一生要养成的60个习惯 dcj3sjt126com 习惯
    一生要养成的60个习惯 第1篇 让你更受大家欢迎的习惯 1 守时，不准时赴约,让别人等,会失去很多机会。 如何做到： ①该起床时就起床， ②养成任何事情都提前15分钟的习惯。 ③带本可以随时阅读的书，如果早了就拿出来读读。 ④有条理，生活没条理最容易耽误时间。 ⑤提前计划：将重要和不重要的事情岔开。 ⑥今天就准备好明天要穿的衣服。 ⑦按时睡觉，这会让按时起床更容易。 2 注重
  • [介绍]Yii 是什么 dcj3sjt126com PHPyii2
    Yii 是一个高性能，基于组件的 PHP 框架，用于快速开发现代 Web 应用程序。名字 Yii （读作 易）在中文里有“极致简单与不断演变”两重含义，也可看作 Yes It Is! 的缩写。 Yii 最适合做什么？ Yii 是一个通用的 Web 编程框架，即可以用于开发各种用 PHP 构建的 Web 应用。因为基于组件的框架结构和设计精巧的缓存支持，它特别适合开发大型应
  • Linux SSH常用总结 eksliang linux sshSSHD
    转载请出自出处：http://eksliang.iteye.com/blog/2186931 一、连接到远程主机   格式： ssh name@remoteserver 例如： ssh [email protected]   二、连接到远程主机指定的端口   格式： ssh name@remoteserver -p 22 例如： ssh i
  • 快速上传头像到服务端工具类FaceUtil gundumw100 android
    快速迭代用 import java.io.DataOutputStream; import java.io.File; import java.io.FileInputStream; import java.io.FileNotFoundException; import java.io.FileOutputStream; import java.io.IOExceptio
  • jQuery入门之怎么使用 ini JavaScripthtmljqueryWebcss
    jQuery的强大我何问起（个人主页：hovertree.com）就不用多说了，那么怎么使用jQuery呢？   首先，下载jquery。下载地址：http://hovertree.com/hvtart/bjae/b8627323101a4994.htm，一个是压缩版本，一个是未压缩版本，如果在开发测试阶段，可以使用未压缩版本，实际应用一般使用压缩版本(min)。然后就在页面上引用。
  • 带filter的hbase查询优化 kane_xie 查询优化hbaseRandomRowFilter
    问题描述 hbase scan数据缓慢，server端出现LeaseException。hbase写入缓慢。   问题原因 直接原因是： hbase client端每次和regionserver交互的时候，都会在服务器端生成一个Lease,Lease的有效期由参数hbase.regionserver.lease.period确定。如果hbase scan需
  • java设计模式-单例模式 men4661273 java单例枚举反射IOC
             单例模式1，饿汉模式 //饿汉式单例类.在类初始化时，已经自行实例化 public class Singleton1 { //私有的默认构造函数 private Singleton1() {} //已经自行实例化 private static final Singleton1 singl
  • mongodb 查询某一天所有信息的3种方法，根据日期查询 qiaolevip 每天进步一点点学习永无止境mongodb纵观千象
    // mongodb的查询真让人难以琢磨，就查询单天信息，都需要花费一番功夫才行。 // 第一种方式： coll.aggregate([ {$project:{sendDate: {$substr: ['$sendTime', 0, 10]}, sendTime: 1, content:1}}, {$match:{sendDate: '2015-
  • 二维数组转换成JSON tangqi609567707 java二维数组json
    原文出处：http://blog.csdn.net/springsen/article/details/7833596 public class Demo {     public static void main(String[] args) {        String[][] blogL
  • erlang supervisor wudixiaotie erlang
    定义supervisor时，如果是监控celuesimple_one_for_one则删除children的时候就用supervisor:terminate_child (SupModuleName, ChildPid)，如果shutdown策略选择的是brutal_kill，那么supervisor会调用exit(ChildPid, kill)，这样的话如果Child的behavior是gen_
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他