雪汐落
雪汐落

利用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)

  • 打造自己的组件库（一）宏函数解析 行云＆流水 Vue3组件库vue3组件库vue.jsjavascript前端
    1.初始化项目npmcreatevite生成项目后，文件目录如下：├──.idea/#IntelliJIDEA配置目录├──.vscode/#VSCode配置目录├──public/#静态资源目录│└──vite.svg#Vite默认图标├──src/#源代码目录│├──assets/#项目资源文件││└──vue.svg#Vue图标│├──components/#Vue组件目录││└──Hell
  • svg图标引发的思考：想晋升高级？这些得了解。 前端svg
    问题背景：我在优化整理项目代码的时候，发现项目中有通过方式引用的svg图标，也有通过iconfont引用的图标。然后当好几个项目改造为对接微前端的时候，发现有些样式冲突了（千万不要小看样式问题（看似简单的问题），往往背后藏着不少值得深挖的学问）复现步骤：先在微前端中打开A项目，图标颜色是正确的。此时打开B项目，再切换回A项目，发现A项目的图标颜色变了。正常是灰色的，有问题的是橙色：解决过程：首先要
  • 【前端 SVG 使用方式探讨：从技术选型到工程实践】 Gazer_S CSS前端工程化前端
    前端SVG使用方式探讨：从技术选型到工程实践引言在现代前端开发中，SVG作为可缩放矢量图形的代表，以其轻量、保真、可编程的特性成为了图标和复杂图形的首选方案。然而，如何在工程化项目中优雅且高效地使用SVG，却是一个值得深入探讨的技术话题。本文通过对不同SVG实现方案的深度分析，记录了一次完整的技术决策过程，从最初的简单疑问到复杂的工程权衡，最终形成系统性的最佳实践指南。第一章：技术起点-TSX中的
  • SVG格式深度解析与Path应用实战：从原理到企业级全场景开发（实战版）
    一、简介在数字图形领域，SVG（ScalableVectorGraphics）凭借其矢量特性、可编辑性和交互能力，成为现代设计和开发的核心工具。本文将从SVG的基础原理出发，深入解析其技术特性，并与主流图像格式（如JPEG、PNG、PLT等）进行对比分析。通过企业级应用案例，结合代码示例和Mermaid图表，帮助开发者全面掌握SVG的应用场景与开发技巧，实现从零到一的高效实践。二、SVG格式的核心
  • MFC扩展库BCGControlBar Pro v36.2亮点：Ribbon Bar、表单等组件升级 界面开发小八哥 mfcribbonc++界面控件UI开发BCG
    BCGControlBar库拥有500多个经过全面设计、测试和充分记录的MFC扩展类。我们的组件可以轻松地集成到您的应用程序中，并为您节省数百个开发和调试时间。BCGControlBar专业版v36.2已全新发布了，在这个版本中添加了一个新的扩展器控件、改进了网格和报表控件的性能、实现了SVG阴影过滤器优化等，最新版点击下方获取：BCGControlBarProforMFCv36.2正式版下载Ri
  • ArcGIS规划符号库详解与应用指南 Neo-ke
    本文还有配套的精品资源，点击获取简介：ArcGIS是一个广泛应用于地理信息系统领域的软件，规划符号库是其关键组成部分，提供标准化图形元素来绘制地图上的规划信息。符号库以SVG格式存储，支持自定义调整，便于在地图制作和空间分析中使用。本篇详解规划符号库的结构、特点以及如何导入到ArcGIS样式库中，展示如何在实际应用中提高地图表达的专业性和可视化效果。1.ArcGIS软件介绍ArcGIS，全称Arc
  • SVG 安装使用教程 小奇JAVA面试 安装使用教程SVG
    一、SVG简介SVG（ScalableVectorGraphics，可缩放矢量图形）是一种基于XML的图像格式，用于描述二维图形。与传统的PNG、JPG等位图格式不同，SVG不会因放大而失真，适合展示图标、图表、动画和交互图形。二、SVG的应用场景网站图标和UI元素数据可视化（与ECharts、D3.js等结合）响应式Web设计中的矢量图动画和交互图形三、SVG安装环境（无需专门安装）3.1浏览器
  • SVG VSCode：深度解析与最佳实践 froginwe11 开发语言
    SVGVSCode：深度解析与最佳实践引言SVG（可缩放矢量图形）作为一种矢量图形格式，因其高度的可缩放性和矢量特性，在网页设计中得到了广泛应用。而VSCode（VisualStudioCode）作为一款流行的代码编辑器，同样在开发者中备受欢迎。本文将深入探讨SVG在VSCode中的使用，包括其优势、配置方法以及最佳实践。SVG简介什么是SVG？SVG（ScalableVectorGraphics
  • 前端渲染大量图片的首屏加载优化方案 啃火龙果的兔子 开发DEMO前端
    渲染大量图片时，首屏加载性能至关重要。以下是全面的优化方案：一、图片资源优化1.图片格式选择WebP格式：比JPEG小25-35%，支持透明AVIF格式：新一代格式，压缩率更高（Chrome/Firefox支持）渐进式JPEG：逐步加载显示SVG：适合图标/简单图形2.图片压缩使用工具压缩：TinyPNG、Squoosh、ImageOptim服务端自动压缩：Sharp（Node.js）、Pillo
  • SVG 在 VSCode 中的使用与优势
    SVG在VSCode中的使用与优势引言SVG（可缩放矢量图形）是一种基于可扩展标记语言的图形图像格式，与传统的位图格式（如JPEG或PNG）相比，SVG图像具有更高的灵活性和可缩放性。随着前端开发领域的不断发展，SVG在网页设计中的应用越来越广泛。本文将介绍SVG在VisualStudioCode（VSCode）中的使用方法及其优势。SVG简介SVG是一种矢量图形格式，与位图不同，矢量图形由直线和
  • svg全链路流程轨迹 一块小砖头儿 javascript开发语言
    直接上效果exportdefault{props:{},data(){return{svgData:["0,200200,200300,300400,300400,200500,200"],};},computed:{},mounted(){},methods:{},};.circle-load-rect-svg{width:800px;}.g-rect-path{fill:none;stroke
  • Skia图形库：绘制2D世界的核心组件
    文章摘要Skia是Google开发的跨平台2D图形库，核心组件包括：SkCanvas（绘图入口）、SkPaint（画笔样式）、SkPath（几何形状）、SkImage/SkBitmap（图片处理）、SkFont/SkTypeface（文本渲染）以及SkSurface（画布载体）。支持CPU/GPU/PDF/SVG多种渲染后端，广泛应用于Chrome、Flutter等项目中，提供从基础绘图到高级特效
  • CAD文件处理控件Aspose.CAD教程：在 C# 中将 DXF 文件转换为 SVG - AutoCAD C# 示例 CodeCraft Studio 控件文档管理c#javaasposeAspose.CADCAD格式转换
    概述使用C#轻松将DXF文件转换为SVG。此转换可更好地兼容Web应用程序，并增强CAD图纸的视觉呈现效果。使用Aspose.CADfor.NET，开发人员可以轻松实现此转换过程。该SDK提供强大的功能，使其成为C#开发人员的可靠选择。Aspose.CADfor.NET凭借其易于集成和高级自定义选项，成为高效处理CAD文件的卓越工具。Aspose.CAD试用版下载加入Aspose技术交流QQ群（1
  • 自用 SVG动态 渐变背景 动画效果无水印 A5资源网 A5资源网性能优化wordpress
    这是一个使用SVG制作的动态渐变背景动画效果，具有流畅的动画过渡和优美的色彩变化。效果预览（附原文件下载）SVG动态渐变背景动画效果-A5资源网body{margin:0;padding:0;overflow:hidden;}svg{width:100vw;height:100vh;}A5资源动态渐变背景效果A5资源网www.A5.org.cnCopyright©2024A5资源网.Allrigh
  • OpenStack-Dashboard界面简单修改 陌殇殇殇 openstack
    OpenStackDashboard界面替换图片一、dashboard界面Logo的路径及文件dashboard的Logo存放（在Controller节点）的路径：/usr/share/openstack-dashboard/openstack_dashboard/static/dashboard/img/涉及需要修改的文件（3个）：favicon.ico//浏览器窗口的小图标logo.svg//
  • WebGL&图形学总结（二） GISer_Jinger 中大厂面试webgl前端javascript
    一、简历中图形学与渲染相关内容梳理（一）专业技能中的图形学储备WebGL与Shader编程：掌握GPU渲染管线原理，能使用GLSL编写着色器，熟悉ShadowMapping、RTT等图形算法。三维引擎应用：熟练使用Three.js和Cesium.js，具备三维场景搭建与高效渲染能力。可视化技术：熟悉Canvas、SVG，掌握GPU加速渲染与主流三维引擎集成（如WebGL与Cesium结合）。（二）
  • nacos开启集群配置 ௸྄ིོུ倾心ღ᭄ᝰꫛꫀꪝ springcloudJava
    在nacos/conf目录下把nacos-mysql.sql导入数据库在application.properties添加以下内容nacos.security.ignore.urls=/,/error,/**/*.css,/**/*.js,/**/*.html,/**/*.map,/**/*.svg,/**/*.png,/**/*.ico,/console-ui/public/**,/v1/auth
  • HTML5+JS实现一个简单的SVG 贝塞尔曲线可视化设计器,通过几个点移动位置,控制曲线的方向 专注VB编程开发20年 html5前端htmlJSSVGbezier-curve贝塞尔曲线
    三次贝塞尔曲线,二次贝塞尔曲线有什么区别https://blog.csdn.net/xiaoyao961/article/details/148678265SVG贝塞尔曲线可视化设计器下面是一个简单的贝塞尔曲线可视化设计器，使用HTML5和JavaScript实现。这个设计器允许你通过拖动控制点来实时调整贝塞尔曲线的形状。这个贝塞尔曲线设计器具有以下特点：直观的交互：可以直接拖动起点、终点和控制点
  • 前端开发者必须要掌握的技术栈及学习建议，都是干货 老猿阿浪 前端学习前端
    作为前端开发者，必须要掌握的技术栈非常的广泛，但总体脉络不变，以下是当前前端开发的核心技术分类和学习建议，按优先级和重要性排序如下（都是干货）：一、基础三件套（必学）HTML5语义化标签、表单验证、WebAccessibility（无障碍访问）Canvas/SVG、音视频嵌入CSS3盒模型、Flex/Grid布局、响应式设计（媒体查询）动画（Transition/Animation）、变量（CSS
  • HTML5 更新的功能 TE-茶叶蛋 面试复习系列html知识html5前端html
    文章目录前言**一、语义化标签（SemanticElements）****二、多媒体支持（Audio&Video）****三、图形与绘图（Canvas&SVG）****1.``****2.SVG内联支持****四、表单增强（FormFeatures）****1.新输入类型****2.新属性****五、本地存储（WebStorage）****六、地理定位（Geolocation）****七、拖放AP
  • 前端性能调优工具与指标 BitCat 前端工程化前端面试
    性能指标解析核心Web指标核心Web指标(CoreWebVitals)是Google定义的一组关键性能指标，直接影响用户体验和SEO排名：FCP(FirstContentfulPaint):首次内容绘制，记录页面首次渲染任何文本、图像、非白色画布或SVG的时间点优:3.0sLCP(LargestContentfulPaint):最大内容绘制，衡量视口中最大内容元素的渲染时间优:4.0sCLS(Cu
  • 什么是D3.js，有什么特点 前端与小赵 javascript开发语言d3.js
    什么是D3.js？D3.js（Data-DrivenDocuments）是一个用于数据可视化的JavaScript库，由MikeBostock创建。D3.js基于Web标准（如HTML、SVG和CSS），允许开发者使用数据驱动的方式动态生成和操作文档。D3.js提供了大量的工具和函数，用于处理数据、创建图表、实现动画效果和交互功能，是数据可视化领域中最受欢迎的库之一。D3.js的核心概念数据绑定：
  • keycloak 配置 mysql_README.md · jacking119/loc-framework - Gitee.com 叶伏城 keycloak配置mysql
    [![MavenCentral](https://maven-badges.herokuapp.com/maven-central/com.github.lord-of-code/loc-framework-build/badge.svg)](https://maven-badges.herokuapp.com/maven-central/com.github.lord-of-code/loc-f
  • html svg canvas图片,javascript svg转canvas和image 啊梨梨 htmlsvgcanvas图片
    代码(内含注释)window.onload=function(){//获取svg内容varsvg=document.getElementById('svg-wrap').innerHTML;varcanvas=document.getElementById('canvas');varc=canvas.getContext('2d');//新建Image对象varimg=newImage();//s
  • html2canvas兼容svg,html2canvas 识别 svg 解决方案 程嵇邢滑
    htmljshtml2canvas([$('div.visualization')[0]],{useCORS:true}).then(function(canvas){if(navigator.msSaveBlob){console.log('thisisIE');varURL=window.URL;varBlobBuilder=window.MSBlobBuilder;navigator.sav
  • Canvas2SVG：将Canvas绘图转换为SVG格式的高效工具 凤高崇
    Canvas2SVG：将Canvas绘图转换为SVG格式的高效工具canvas2svgTranslatesHTML5CanvasdrawcommandstoSVG项目地址:https://gitcode.com/gh_mirrors/ca/canvas2svg项目介绍Canvas2SVG是一个强大的JavaScript库，它允许开发者将HTML5Canvas上的绘制内容转换成SVG格式，这在需要导
  • 解决html2canvas 截图中SVG有image不渲染问题 guxuehua 遇到的问题react.js前端reactjshtml2canvasqrcode.react
    最近是在使用html2canvas做分享海报的图片，用qrcode.react的QRCodeSVG生成了二维码，但是发现生成的海报二维码中间的logo不渲染例如是由于html2canvas截图时不会去请求SVG中的image的远程图片，将其改为base64可解决
  • 【CSS性能优化技巧】 AmyGeng123 css性能优化前端
    CSS性能优化技巧加载时性能优化项1.使用标签代替@import2.压缩CSS3.css单一样式4.建立公共样式类5.合并css文件减少http请求6.使用0而不是0px6.避免使用!Important7.使用CSS代替图片实现一些特效8.SVG代替图片9.避免使用通配*规则10.不要去用标签限定ID或者类选择符11.减少css嵌套，加速css解析12.充分利用css继承属性，减少代码量13.使用
  • vue里组件化引入svg图标的方式 rolling_kitten vuevue.js前端javascript
    如果发现文章变成vip了请留言或私信，不是我自己设置的。配置好后可以轻松从iconfont导入svg图标或者任意svg图标。参考：https://blog.csdn.net/weixin_39729729/article/details/137348970https://blog.csdn.net/CMDN123456/article/details/139854354官网https://www.
  • vue3 + ts + vite + element-plus根据url路径保持对应栏目高亮 yskbchewidhw vue3前端javascripttypescript
    上代码：000111222333YzpAction1Action2退出import{ref}from"vue"import{useRouter}from"vue-router"importlogosfrom"@/assets/img/logo.svg"constrouter=useRouter()//img资源constlogo=ref(logos)leturlname=router.curren
  • 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其他