海轰Pro
海轰Pro

【动画消消乐】HTML+CSS 自定义加载动画 056

前言

Hello！小伙伴！
非常感谢您阅读海轰的文章，倘若文中有错误的地方，欢迎您指出～
自我介绍ଘ(੭ˊᵕˋ)੭
昵称：海轰
标签：程序猿｜C++选手｜学生
简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等，已保研。目前正在学习C++/Linux（真的真的太难了～）
学习经验：扎实基础 + 多做笔记 + 多敲代码 + 多思考 + 学好英语！
日常分享：微信公众号【海轰Pro】 记录生活、学习点滴，欢迎关注～

【动画消消乐】 平时学习生活比较枯燥，无意之间对一些网页、应用程序的过渡/加载动画产生了浓厚的兴趣，想知道具体是如何实现的？ 便在空闲的时候学习下如何使用css实现一些简单的动画效果，文章仅供作为自己的学习笔记，记录学习生活，争取理解动画的原理，多多“消灭”动画！

效果展示

Demo代码

HTML


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Documenttitle>
head>
<body>
    <section><span>span>section>
body>
html>

CSS

html, body {
     
  margin: 0;
  height: 100%;
}

body {
     
  display: flex;
  justify-content: center;
  align-items: center;
  background: #263238;
}

section {
     
  width: 650px;
  height: 300px;
  padding: 10px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 红色边框仅作提示 */
  border: 2px solid red;
}

span {
     
  width: 96px;
  height: 96px;
  display: inline-block;
  position: relative;
  border: 2px solid white;
  animation: rotation 4s linear infinite;
}

span::before, span::after {
     
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 2px solid red;
  width: 76px;
  height: 76px;
  animation: rotationBack 3s linear infinite;
  transform-origin: center center;
}

span::after {
     
  width: 56px;
  height: 56px;
  border-color: white;
  animation: rotation 2s linear infinite;
}

@keyframes rotationBack {
     
  0% {
     
    transform: rotate(0deg)
  }
  100% {
     
    transform: rotate(-360deg)
  }
}

@keyframes rotation {
     
  0% {
     
    transform: rotate(0deg)
  }
  100% {
     
    transform: rotate(360deg)
  }
}

原理详解

步骤1

使用span标签，设置

  • 宽度、高度均为96px
  • 边框：2px solid white
  • 相对定位
  width: 96px;
  height: 96px;
  position: relative;
  border: 2px solid white;

效果图如下

【动画消消乐】HTML+CSS 自定义加载动画 056_第1张图片

步骤2

利用span::before和span::after伪元素充当span里面的白色/红色小方框

同时设置

  • 宽度、高度为76px
  • 绝对定位（ left: 0; right: 0; top: 0; bottom: 0; margin: auto;）
  • 边框：2px solid red

span::before, span::after {
     
  content: '';
  position: absolute;
  
  /*使得元素居于正中间*/
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  
  border: 2px solid red;
  width: 76px;
  height: 76px;
}

效果图如下

【动画消消乐】HTML+CSS 自定义加载动画 056_第2张图片

步骤3

再分离span::after

设置为

  • 宽度、高度均为56px
  • 边框颜色：白色
/*代码放在before/after的后面  这样才会对after进行重新设置*/
span::after {
     
  width: 56px;
  height: 56px;
  border-color: white;
}

效果图如下

【动画消消乐】HTML+CSS 自定义加载动画 056_第3张图片

步骤4

为span添加动画

  • 顺时针旋转（0-360度） 无限循环
  • 速度曲线：linear
animation: rotation 4s linear infinite;

@keyframes rotation {
     
  0% {
     
    transform: rotate(0deg)
  }
  100% {
     
    transform: rotate(360deg)
  }
}

同时对span::after也使用该动画，修改下动画持续时间为2s

animation: rotation 2s linear infinite;

效果图如下

步骤5

步骤4中span::before尽管没有设置动画，但是其也是位于span上，所以也随span一起旋转

这里我们对span::before添加一个动画，旋转方向相反即可

 animation: rotationBack 3s linear infinite;

@keyframes rotationBack {
     
  0% {
     
    transform: rotate(0deg)
  }
  100% {
     
    transform: rotate(-360deg)
  }
}

最终效果图如下

结语

学习参考：

https://codepen.io/bhadupranjal/pen/vYLZYqQ

文章仅作为学习笔记，记录从0到1的一个过程

希望对您有所帮助，如有错误欢迎小伙伴指正～

我是海轰ଘ(੭ˊᵕˋ)੭，如果您觉得写得可以的话，请点个赞吧

谢谢支持❤️

【动画消消乐】HTML+CSS 自定义加载动画 056_第4张图片

你可能感兴趣的:(Web前端,前端,css,html,自定义加载动画,学习笔记)

  • 跨语言语义理解与生成：多语言预训练方法及一致性优化策略 网罗开发 AI大模型人工智能深度学习负载均衡
    网罗开发（小红书、快手、视频号同名）  大家好，我是展菲，目前在上市企业从事人工智能项目研发管理工作，平时热衷于分享各种编程领域的软硬技能知识以及前沿技术，包括iOS、前端、HarmonyOS、Java、Python等方向。在移动端开发、鸿蒙开发、物联网、嵌入式、云原生、开源等领域有深厚造诣。图书作者：《ESP32-C3物联网工程开发实战》图书作者：《SwiftUI入门，进阶与实战》超级个体：CO
  • 本地运行 DeepSeek-R1 的成本究竟多高？ 前端javascript
    ReactHook深入浅出CSS技巧与案例详解vue2与vue3技巧合集VueUse源码解读本地运行DeepSeek-R1的成本究竟多高？DeepSeek让人们对大规模生成式模型的追求更进一步，甚至有人想在本地跑下规模高达671B参数的版本。但要在家里开这种“巨无霸”，可不是闹着玩的：光是推理就对硬件提出了非常高的要求。这篇文章将大致拆解一下，如果真想在个人电脑上运行DeepSeek-R1，可能需
  • CSDN2019博客之星评选——期待各位大佬的投票！ 十步杀一人_千里不留行 程序人生
    我的序号是68，68，68！！http://m234140.nofollow.ax.mvote.cn/opage/d4cf886a-057e-1c0d-56f1-3a86340af8fd.html2019年CSDN博客之星年度总评选已开启：68.十步杀一人_千里不留行，微信、QQ、微博渠道可以连投5票哦！扫码为我投票哦：
  • 《现代CSS技术应用与实践》小册完结啦！
    历时125天，《现代CSS技术应用与实践》小册迎来了完结，总篇数40篇，约11万字。后续还会继续更新，欢迎订阅支持我。《现代CSS技术应用与实践》是一本专注于现代CSS技术应用与实践的指导手册。小册旨在帮助读者深入理解现代CSS新特性的概念、原理和应用，掌握现代CSS技术的最新进展和实践经验，从而提升网页设计和开发的技能。小册内容涵盖现代CSS的基础知识、CSS嵌套及作用域、CSS布局技术与技巧、
  • Qt/C++编写自定义控件72-提示进度条 feiyangqingyun Qt/C++自定义控件Qt自定义控件提示进度条插件免费
    一、前言我们在很多的安装包中，在安装过程中，经常可以在底部看到一个漂亮的进度条，上面悬浮着显示对应的进度，然后底部进度多种颜色渐变展示，Qt自带的进度条或者操作系统的进度条样式，不够炫，这次索性直接来个自定义绘制实现，至于是继承QWidget类还是QProgressBar类，都无所谓，如果是继承自QWidget类的话，就需要自己设置最大值最小值范围值，而继承自QProgressBar的话就可以直接
  • Matplotlib 高级图表绘制与交互式可视化（ipywidgets） eqwaak0 matplotlibmatplotlibpython开发语言人工智能
    目录：ipywidgets介绍1.什么是ipywidgets直接开始：动态调整正弦波频率随机散点图启用交互式模式使用滑块和下拉菜单调整图表样式使用布局管理器创建复杂界面使用动画创建动态图表最后：综合示例：动态仪表盘ipywidgets介绍1.什么是ipywidgetsipywidgets是一个用于JupyterNotebook和JupyterLab的交互式HTML小部件库，允许用户在Jupyter
  • Java 第八章 异常（2） 点纭 java前端开发语言
    目录编辑异常处理捕获异常基本语法实例声明异常注意：实例抛出异常实例运行期异常和编译期异常自定义异常定义基本语法注意实例异常处理●Java的异常处理是通过5个关键字来实现的：try、catch、finally、throw、throws捕获异常try执行可能产生异常的代码catch捕获异常finally无论是否发生异常，代码总能执行基本语法1.try{可能会发生异常的代码}catch(异常类型引用名)
  • 【网络安全】WebPack源码（前端源码）泄露 + jsmap文件还原 秋说 前端web安全webpack
    前言webpack是一个JavaScript应用程序的静态资源打包器。它构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。大部分Vue等项目应用会使用webpack进行打包，使用webpack打包应用程序会在网站js同目录下生成js.map文件。漏洞风险通过泄露的前端源代码可以查找各种信息，如隐蔽接口、API、加密算法、管理员邮箱、内部功能等等，或
  • html网络安全工具源码 网络安全前端 网络安全queen web安全安全
    点击文末小卡片，免费获取网络安全全套资料，资料在手，涨薪更快前端常见的网络安全包括：xss（跨站脚本攻击）、csrf（跨站请求伪造）、sql注入攻击等。1）跨站脚本攻击（xss）原理：攻击者往web页面中注入恶意script代码（或者在url的查询参数中注入script代码），当用户浏览访问时，嵌入的script代码就会执行，造成危害。反射型xss：用户点击攻击连接，服务器解析后响应，在返回的内容
  • 《Cell》期刊作者提交指南 TigerZ 生信宝库 科研技能程序人生
    ❝写在前面在投稿论文前，阅读目标期刊的政策要求是非常必要的。本文为《Cell》期刊提供给作者的提交指南，包含了提交论文的相关信息和政策要求。本着自己学习、分享他人的态度，分享学习笔记，希望能对大家有所帮助。目录1期刊介绍（Aboutthejournal）2编辑评估时间表（Editorialevaluationtimeline）3CellPress期刊之间的关系（Relationshipbetwee
  • 量化交易入门——平台框架、技术类策略、量化心得 アナリスト 机器学习深度学习概率论算法
    量化平台分类：本地：MC、TB、WH、TS、MT4云端：聚宽、优矿、米筐、bigquantSDK/量化API：万得、东财choice、掘金量化开源框架：PyCTP、Vnpy、zipline、quicklib使用平台的优点：省时省力，无需收集清洗数据无需编写复杂的回测引擎有大量集成好的函数使用使用平台的缺点：无法导入数据；数据有问题就没辙无法自定义下单算法很多限制，如日线只能用收盘价买卖编程语法不统
  • 飞书二维码联合登录，对接起来太简单了 王念博客 飞书
    1.先创建一个飞书应用2.引入JS库3.自定义jsconstgoto="https://passport.feishu.cn/suite/passport/oauth/authorize?client_id=cli_&redirect_uri=httindex&response_type=code&state=STATE";constQRLoginObj=QRLogin({id:"login_co
  • aop解决 防重复提交 小羊炒饭 javaspring
    背景描述虽然前端控制了按钮不能连续点击，但是在网络信号弱的情况下，仍然会出现第一次点击，请求A网络信号弱，这个时候前端按钮仍然可以点击，然后用户点击第二次。结果两次请求全部成功，数据库生成了两条除了ID以外一模一样的数据。（业务上不允许这种数据出现）解决方式采用AOP，对于不能重复提交的接口在后端加上控制。第一步自定义注解/***@Authorztc*@Description防止重复提交自定义注解
  • 在 Vue 2 中使用 Three.js 导入本地 3D 模型 cherryzm88 webvue2javascriptvue.js前端3d
    引言Three.js是一个流行的JavaScript库，它能够帮助开发者轻松地在Web页面上创建3D内容。而Vue.js作为前端框架，可以与Three.js结合，构建交互式3DWeb应用。本篇博客将介绍如何在Vue2中使用Three.js加载本地3D模型。1.初始化Vue2项目如果你的项目还没有Vue2环境，可以使用VueCLI初始化：```shvuecreatemy-threejs-appcdm
  • web第三次作业 天宇&嘘月 前端cssjavascript
    CSS样式*{margin:0;padding:0;box-sizing:border-box;}html,body{width:100%;height:100%;}.container{width:100%;height:100%;background-color:#f2f1f2;}header{width:1200px;height:50px;background-color:#fff;mar
  • php glob 指定目录,php使用glob函数快速查询指定目录文件的方法_php技巧 程序员小智和大鹏 phpglob指定目录
    本文实例讲述了php使用glob函数快速查询指定目录文件的方法。分享给大家供大家参考。具体如下：php搜索当前目录所有文件,代码如下:$array=glob('*.*');print_r($array);/*Array([0]=>1.php[1]=>10.php[2]=>11.php[3]=>2.asp[4]=>3.asp[5]=>4.aspx[6]=>5.html[7]=>6.php[8]=>7
  • rem、em、vw区别 IT木昜 大白话前端面试题前端javascriptcss
    在前端开发里，rem、em、vw都是用来设置元素大小的单位，下面就用大白话讲讲它们的区别。参考标准不一样rem：就像大家都用同一把“大尺子”来量东西，这把“大尺子”就是网页里根元素（也就是标签）的字体大小。不管元素在网页里的哪个位置，只要用rem做单位，它的大小就按照这把“大尺子”来算。比如根元素字体大小是16px，那么1rem就是16px，2rem就是32px。em：每个元素自己有一把“小尺子”
  • 【无标题】 是懒羊羊吖～ 笔记
    一.WED前端应用软件：c/s架构b/s架构web前端：html5css3javascripthtml5：超文本标记语言----超链接，文字，标签标签语法规范：结束-----双标签标签体------可以嵌套inputimg---------单标签属性：定制元素的行为，属性是不通用的，每一个标签存在自身的属性，当属性名等于属性值时,只需要写属性名，不需要写属性值。二.HTML1.样式//文档声明：告
  • python图形界面化编程GUI（二）常用的组件(Text、Radiobutton、Checkbutton、Canvas)和布局管理器(gird、pack、place) hwwaizs python-GUI图形化编程python开发语言
    Text文本框Text(多行文本框)的主要用于显示多行文本，还可以显示网页链接,图片,HTML页面,甚至CSS样式表，添加组件等。主要用来显示信息，也常被当做简单的文本处理器、⽂本编辑器或者网页浏览器来使用。IDLE就是Text组件构成的。insert插入的时候可以用INSERT代表当前光标的位置，END代表在结尾的位置，也可以用插入小数的形式，2.3代表第二行第三列后插入。fromtkinter
  • tailwindcss4.0 升级后的一个坑 tailwindcss
    tailwindcss4.0升级了，用了vite的方式，因为主UI框架用的antdv，结果出现了antdv组件自身的css比tailwindcss的优先级高的情况。发现tailwindcss的类都被layer了，而这个layer的特性就是比平常的css优先级要低，考虑到antdv还不能把自身css套上layer（antd好像可以），所以只能把tailwind的layer去掉了，也是为了一些老的ui
  • 技术分享：MyBatis SQL 日志解析脚本 ￡漫步 云端彡 运维趣分享sqljavamybatis日志解析
    技术分享：MyBatisSQL日志解析脚本1.脚本功能概述2.实现细节2.1HTML结构2.2JavaScript逻辑3.脚本代码4.使用方法4.1示例5.总结在日常开发中，使用MyBatis作为持久层框架时，我们经常需要查看SQL日志以调试和优化查询。然而，MyBatis的日志输出通常包含占位符和参数信息，这使得直接执行这些SQL语句变得困难。为了解决这个问题，我们开发了一个简单的HTML和Ja
  • C语言结构体学习笔记 BUG 劝退师 c语言c语言学习笔记
    C语言结构体学习笔记目录结构体基本概念结构体变量定义结构体初始化结构体数组结构体指针共用体枚举类型typedef自定义类型总结结构体基本概念1.什么是结构体？结构体：一种用户自定义的数据类型，用于将多个不同类型的变量组合成一个整体。用途：表示复杂数据（如学生信息：学号、姓名、成绩等）。2.结构体定义struct结构体名{数据类型成员1;数据类型成员2;//可以嵌套结构体struct子结构体名子成员
  • 前端：纯前端快速实现html导出word和pdf m0_74823715 前端htmlword
    实现html导出word，需要使用两个库。html-docx-js和file-saver导出word的js方法>npminstallhtml-docx-js>npminstallfile-saverjs引入importFileSaverfrom“file-saver”;importhtmlDocxfrom“html-docx-js/dist/html-docx”;/**导出word方法*/expo
  • FPGA设计怎么学？薪资前景好吗？ 博览鸿蒙 FPGAfpga开发
    FPGA前端设计和各岗位之间有着很多联系，是一个薪资待遇高，前景发展好的岗位。但这个岗位的门槛也比较高，很多人不知道怎么学习，下面就和宸极教育一起来了解一下吧。数字前端设计必备技能1、熟悉数字电路设计2、熟悉Verilog或VHDL3、熟悉异步电路设计4、熟悉FIFO的设计5、熟悉UNIX系统及其工具的使用6、熟悉脚本语言Perl、Shell、Tcl等7、熟悉C/C++语言、SystemVeril
  • 【Tools/macOS系列】macOS终端配置：zsh+iTerm2+OhMyZsh 飞翔的鲲 【实用工具专栏】macOSzshiTerm2终端ohmyzsh
    DATE:2021.7.17文章目录1、前言2、参考3、终端和vim配置效果图4、终端配置步骤4.1、安装iTerm24.2、安装oh-my-zsh4.3、主题和颜色4.4、插件4.5、特殊字体Hackherdfont4.6、vim配置4.7、随时唤起4.8、自定义界面壁纸1、前言macOS的终端Terminal界面非常简单，没有Linux下面的颜色设置和自动补齐等功能，用起来非常不方便。本文讲解
  • Vue-纯前端导出word文档 2501_90252408 前端vue.jsword
    varbuf=doc.getZip().generate({type:‘nodebuffer’});//bufisanodejsbuffer,youcaneitherwriteittoafileordoanythingelsewithit.fs.writeFileSync(path.resolve(__dirname,‘output.docx’),buf);####jszip-utils[jszi
  • css主题色修改后会多出一个css吗？css怎么定义变量？ 编程星空 CSSrust开发语言后端
    在CSS中修改主题色时，通常不会直接生成一个新的CSS文件，而是通过CSS变量（CustomProperties）或预处理器变量（如Sass、Less）来动态修改样式。以下是详细说明：1.CSS变量（CustomProperties）CSS变量是现代CSS提供的一种功能，允许在样式表中定义可复用的值，并在需要时动态修改。定义CSS变量CSS变量以--开头，通常在:root伪类中定义全局变量。:ro
  • 纯前端导入导出txt文件 今天吃了嘛o 前端导入导出txt文件javascripthtmlhtml5
    1.html部分导入导出{{alone}}2.js部分导出的时候我尝试了很多次改变编码格式为gb2312的，但是无果，所以我再读取的时候先读取文件判断了文件编码格式，然后再去根据编码格式读取文件并展示页面。exportdefault{data(){return{works:[],};},methods:{handleBeforeUpload(file){this.fileList=[file];c
  • vue中使用ueditor上传到服务器_vue+Ueditor集成 [前后端分离项目][图片、文件上传][富文本编辑]... 小西超人
    写在最前面的话：鉴于近期很多的博友讨论，说我按照文章的一步一步来，弄好之后，怎么会提示后端配置项http错误，文件上传会提示上传错误。这里提别申明一点，ueditor在前端配置好后，需要与后端部分配合进行，后端部分的项目代码git地址：https://github.com/coderliguoqing/UeditorSpringboot，然后将配置ueditor.config.js里的server
  • vuecli项目实战--管理系统 团团kobebryant 项目前端框架javajavascript前端vue.js
    一、项目搭建HBuider直接：新建--项目--填项目名称、选地址、下拉选vue项目（2.6.10）项目结构这个样子：二、前端配置1.路由配置（地址）在src文件夹下创建router文件夹在router文件夹下面创建js文件index.js---配置组件的地址还有导航守卫、路由嵌套也配在这里1.组件路由2.组件路由嵌套3.路由导航记得跟vue对象关联还有导出路由嗷importVuefrom'vue
  • ASM系列五 利用TreeApi 解析生成Class lijingyao8206 ASM字节码动态生成ClassNodeTreeAPI
       前面CoreApi的介绍部分基本涵盖了ASMCore包下面的主要API及功能，其中还有一部分关于MetaData的解析和生成就不再赘述。这篇开始介绍ASM另一部分主要的Api。TreeApi。这一部分源码是关联的asm-tree-5.0.4的版本。          在介绍前，先要知道一点， Tree工程的接口基本可以完
  • 链表树——复合数据结构应用实例 bardo 数据结构树型结构表结构设计链表菜单排序
    我们清楚：数据库设计中，表结构设计的好坏，直接影响程序的复杂度。所以，本文就无限级分类（目录）树与链表的复合在表设计中的应用进行探讨。当然，什么是树，什么是链表，这里不作介绍。有兴趣可以去看相关的教材。 需求简介： 经常遇到这样的需求，我们希望能将保存在数据库中的树结构能够按确定的顺序读出来。比如，多级菜单、组织结构、商品分类。更具体的，我们希望某个二级菜单在这一级别中就是第一个。虽然它是最后
  • 为啥要用位运算代替取模呢 chenchao051 位运算哈希汇编
        在hash中查找key的时候，经常会发现用&取代%，先看两段代码吧，     JDK6中的HashMap中的indexFor方法： /** * Returns index for hash code h. */ static int indexFor(int h, int length) {
  • 最近的情况 麦田的设计者 生活感悟计划软考想
          今天是2015年4月27号      整理一下最近的思绪以及要完成的任务             1、最近在驾校科目二练车，每周四天，练三周。其实做什么都要用心，追求合理的途径解决。为
  • PHP去掉字符串中最后一个字符的方法 IT独行者 PHP字符串
    今天在PHP项目开发中遇到一个需求，去掉字符串中的最后一个字符 原字符串1,2,3,4,5,6, 去掉最后一个字符","，最终结果为1,2,3,4,5,6 代码如下： $str = "1,2,3,4,5,6,"; $newstr = substr($str,0,strlen($str)-1); echo $newstr;
  • hadoop在linux上单机安装过程 _wy_ linuxhadoop
    1、安装JDK     jdk版本最好是1.6以上，可以使用执行命令java -version查看当前JAVA版本号，如果报命令不存在或版本比较低，则需要安装一个高版本的JDK，并在/etc/profile的文件末尾，根据本机JDK实际的安装位置加上以下几行：    export JAVA_HOME=/usr/java/jdk1.7.0_25  
  • JAVA进阶----分布式事务的一种简单处理方法 无量 多系统交互分布式事务
    每个方法都是原子操作： 提供第三方服务的系统，要同时提供执行方法和对应的回滚方法 A系统调用B,C,D系统完成分布式事务 =========执行开始======== A.aa(); try { B.bb(); } catch(Exception e) { A.rollbackAa(); } try { C.cc(); } catch(Excep
  • 安墨移动广 告：移动DSP厚积薄发 引领未来广 告业发展命脉 矮蛋蛋 hadoop互联网
    　　“谁掌握了强大的DSP技术，谁将引领未来的广 告行业发展命脉。”2014年，移动广 告行业的热点非移动DSP莫属。各个圈子都在纷纷谈论，认为移动DSP是行业突破点，一时间许多移动广 告联盟风起云涌，竞相推出专属移动DSP产品。 　　到底什么是移动DSP呢? 　　DSP(Demand-SidePlatform)，就是需求方平台，为解决广 告主投放的各种需求，真正实现人群定位的精准广
  • myelipse设置 alafqq IP
      在一个项目的完整的生命周期中，其维护费用，往往是其开发费用的数倍。因此项目的可维护性、可复用性是衡量一个项目好坏的关键。而注释则是可维护性中必不可少的一环。 注释模板导入步骤  安装方法： 打开eclipse/myeclipse 选择 window-->Preferences-->JAVA-->Code-->Code
  • java数组 百合不是茶 java数组
    java数组的   声明  创建  初始化；   java支持C语言      数组中的每个数都有唯一的一个下标 一维数组的定义 声明： int[] a = new int[3];声明数组中有三个数int[3] int[] a 中有三个数，下标从0开始，可以同过for来遍历数组中的数
  • javascript读取表单数据 bijian1013 JavaScript
    利用javascript读取表单数据，可以利用以下三种方法获取： 1、通过表单ID属性：var a = document.getElementByIdx_x_x("id"); 2、通过表单名称属性：var b = document.getElementsByName("name"); 3、直接通过表单名字获取：var c = form.content.
  • 探索JUnit4扩展：使用Theory bijian1013 javaJUnitTheory
    理论机制（Theory） 一.为什么要引用理论机制（Theory）         当今软件开发中，测试驱动开发（TDD — Test-driven development）越发流行。为什么 TDD 会如此流行呢？因为它确实拥有很多优点，它允许开发人员通过简单的例子来指定和表明他们代码的行为意图。 TDD 的优点：     &nb
  • [Spring Data Mongo一]Spring Mongo Template操作MongoDB bit1129 template
    什么是Spring Data Mongo Spring Data MongoDB项目对访问MongoDB的Java客户端API进行了封装，这种封装类似于Spring封装Hibernate和JDBC而提供的HibernateTemplate和JDBCTemplate，主要能力包括 1. 封装客户端跟MongoDB的链接管理 2. 文档-对象映射，通过注解:@Document(collectio
  • 【Kafka八】Zookeeper上关于Kafka的配置信息 bit1129 zookeeper
    问题： 1. Kafka的哪些信息记录在Zookeeper中 2. Consumer Group消费的每个Partition的Offset信息存放在什么位置 3. Topic的每个Partition存放在哪个Broker上的信息存放在哪里 4. Producer跟Zookeeper究竟有没有关系？没有关系！！！   //consumers、config、brokers、cont
  • java OOM内存异常的四种类型及异常与解决方案 ronin47 java OOM 内存异常
          　OOM异常的四种类型： 　　　 　　一：　StackOverflowError ：通常因为递归函数引起（死递归，递归太深）。-Xss 128k 一般够用。     　  二：　out Of memory: PermGen Space：通常是动态类大多，比如web 服务器自动更新部署时引起。-Xmx
  • java-实现链表反转-递归和非递归实现 bylijinnan java
    20120422更新： 对链表中部分节点进行反转操作，这些节点相隔k个： 0->1->2->3->4->5->6->7->8->9 k=2 8->1->6->3->4->5->2->7->0->9 注意1 3 5 7 9 位置是不变的。 解法： 将链表拆成两部分： a.0-&
  • Netty源码学习-DelimiterBasedFrameDecoder bylijinnan javanetty
    看DelimiterBasedFrameDecoder的API，有举例： 接收到的ChannelBuffer如下： +--------------+ | ABC\nDEF\r\n | +--------------+ 经过DelimiterBasedFrameDecoder(Delimiters.lineDelimiter())之后，得到： +-----+----
  • linux的一些命令 -查看cc攻击-网口ip统计等 hotsunshine linux
    Linux判断CC攻击命令详解 2011年12月23日 ⁄ 安全 ⁄ 暂无评论 查看所有80端口的连接数 netstat -nat|grep -i '80'|wc -l 对连接的IP按连接数量进行排序 netstat -ntu | awk '{print $5}' | cut -d: -f1 | sort | uniq -c | sort -n 查看TCP连接状态 n
  • Spring获取SessionFactory ctrain sessionFactory
    String sql = "select sysdate from dual"; WebApplicationContext wac = ContextLoader.getCurrentWebApplicationContext(); String[] names = wac.getBeanDefinitionNames(); for(int i=0; i&
  • Hive几种导出数据方式 daizj hive数据导出
    Hive几种导出数据方式   1.拷贝文件   如果数据文件恰好是用户需要的格式，那么只需要拷贝文件或文件夹就可以。 hadoop fs –cp source_path target_path   2.导出到本地文件系统   --不能使用insert into local directory来导出数据，会报错 --只能使用
  • 编程之美 dcj3sjt126com 编程PHP重构
    我个人的 PHP 编程经验中，递归调用常常与静态变量使用。静态变量的含义可以参考 PHP 手册。希望下面的代码，会更有利于对递归以及静态变量的理解   header("Content-type: text/plain"); function static_function () { static $i = 0; if ($i++ < 1
  • Android保存用户名和密码 dcj3sjt126com android
    转自：http://www.2cto.com/kf/201401/272336.html 我们不管在开发一个项目或者使用别人的项目，都有用户登录功能，为了让用户的体验效果更好，我们通常会做一个功能，叫做保存用户，这样做的目地就是为了让用户下一次再使用该程序不会重新输入用户名和密码，这里我使用3种方式来存储用户名和密码 1、通过普通 的txt文本存储 2、通过properties属性文件进行存
  • Oracle 复习笔记之同义词 eksliang Oracle 同义词Oracle synonym
    转载请出自出处：http://eksliang.iteye.com/blog/2098861 1.什么是同义词       同义词是现有模式对象的一个别名。       概念性的东西，什么是模式呢？创建一个用户，就相应的创建了 一个模式。模式是指数据库对象，是对用户所创建的数据对象的总称。模式对象包括表、视图、索引、同义词、序列、过
  • Ajax案例 gongmeitao Ajaxjsp
    数据库采用Sql Server2005 项目名称为:Ajax_Demo 1.com.demo.conn包 package com.demo.conn; import java.sql.Connection;import java.sql.DriverManager;import java.sql.SQLException; //获取数据库连接的类public class DBConnec
  • ASP.NET中Request.RawUrl、Request.Url的区别 hvt .netWebC#asp.nethovertree
      如果访问的地址是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree%3C&n=myslider#zonemenu那么Request.Url.ToString() 的值是：http://h.keleyi.com/guestbook/addmessage.aspx?key=hovertree<&
  • SVG 教程 （七）SVG 实例，SVG 参考手册 天梯梦 svg
    SVG 实例 在线实例 下面的例子是把SVG代码直接嵌入到HTML代码中。 谷歌Chrome，火狐，Internet Explorer9，和Safari都支持。 注意：下面的例子将不会在Opera运行，即使Opera支持SVG - 它也不支持SVG在HTML代码中直接使用。   SVG 实例 SVG基本形状 一个圆 矩形 不透明矩形 一个矩形不透明2 一个带圆角矩
  • 事务管理 luyulong javaspring编程事务
    事物管理 spring事物的好处 为不同的事物API提供了一致的编程模型 支持声明式事务管理 提供比大多数事务API更简单更易于使用的编程式事务管理API 整合spring的各种数据访问抽象 TransactionDefinition 定义了事务策略 int getIsolationLevel()得到当前事务的隔离级别 READ_COMMITTED 
  • 基础数据结构和算法十一：Red-black binary search tree sunwinner AlgorithmRed-black
      The insertion algorithm for 2-3 trees just described is not difficult to understand; now, we will see that it is also not difficult to implement. We will consider a simple representation known
  • centos同步时间 stunizhengjia linux集群同步时间
    做了集群，时间的同步就显得非常必要了。 以下是查到的如何做时间同步。 在CentOS 5不再区分客户端和服务器，只要配置了NTP，它就会提供NTP服务。 1)确认已经ntp程序包： # yum install ntp 2)配置时间源（默认就行，不需要修改） # vi /etc/ntp.conf server pool.ntp.o
  • ITeye 9月技术图书有奖试读获奖名单公布 ITeye管理员 ITeye
    ITeye携手博文视点举办的9月技术图书有奖试读活动已圆满结束，非常感谢广大用户对本次活动的关注与参与。 9月试读活动回顾：http://webmaster.iteye.com/blog/2118112本次技术图书试读活动的优秀奖获奖名单及相应作品如下（优秀文章有很多，但名额有限，没获奖并不代表不优秀）：      《NFC：Arduino、Andro
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他