林cc
林cc

純前端 - 原生自定義加載動畫

純前端 - 原生自定義加載動畫

  • 參考
  • 核心原理
    • html 代碼
    • css 代碼
      • Step1
      • Step2
      • Step3
      • Step4
      • Step5
      • Step6
  • 效果展示

參考

參考 鏈接
「HTML+CSS」–自定义加载动画【007】 https://cloud.tencent.com/developer/article/1811548
CSS3 animation（动画） 属性 https://www.runoob.com/cssref/css3-pr-animation.html

核心原理

其實這個功能相對很簡單，只是看到好玩想說自己實踐下順扁做個紀錄而已。其實原理就只是通過 span 和 span::after 以及簡單的 css3 動畫而已，很間單的。下面一步步來看看怎麼做的！

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">
    <title>Documenttitle>
    <link rel="stylesheet" href="loading.css">
head>
<body>
    <span>span>
body>
html>

css 代碼

/* loading.css */

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

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

span {
     
  width: 120px;
  height: 120px;
  border: 10px solid transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-bottom-color: orange; 
  border-radius: 50%;
  animation: loading 2s linear infinite;
}
span::after {
     
  position: relative;
  content: "";
  display: inline-block;
  width: 96px;
  height: 96px;
  border: 10px solid #fff;
  border-radius: 50%;
}
@keyframes loading {
     
  0% {
     
    transform: rotate(0deg);
  }
  100% {
     
    transform: rotate(360deg);
  }
}

下面拆解下怎麼寫出上面代碼的。

Step1

首先先把 span 設置大小，弄出一個邊框來。

span {
     
  width: 120px;
  height: 120px;
  border: 10px solid #fff;
}

純前端 - 原生自定義加載動畫_第1张图片

Step2

基於 Step1 的外框在裡面弄出一個內框，與外框要留有一些間隙。這邊就使用到 css 的偽元素 ::。

span {
     
  width: 120px;
  height: 120px;
  border: 10px solid #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
span::after {
     
  position: relative;
  content: "";
  display: inline-block;
  width: 96px;
  height: 96px;
  border: 10px solid #fff;
}

純前端 - 原生自定義加載動畫_第2张图片

Step3

這一步要把 1/4 的外框變成有色的。

  border-bottom-color: orange;

純前端 - 原生自定義加載動畫_第3张图片

Step4

然後把內框和外框都做圓角設置。

  border-radius: 50%;

純前端 - 原生自定義加載動畫_第4张图片

Step5

把外框樣式變得透明。

  border: 10px solid transparent;

純前端 - 原生自定義加載動畫_第5张图片
這邊有個小技巧，就是雖然我們在 span 上這麼設置了 border，但因為 border-bottom-color 設置了顏色所以依然會顯示。

Step6

最後就是添加動畫，這邊使用到了 css3 的 animation 屬性，配合 @keyframes。

animation: loading 2s linear infinite;

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

到這邊就都大功搞成啦～最後來看看最終的效果圖！

效果展示

純前端 - 原生自定義加載動畫_第6张图片

你可能感兴趣的:(前端,前端)

  • 工程化与框架系列（32）--前端测试实践指南 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端
    前端测试实践指南引言前端测试是保证应用质量的重要环节。本文将深入探讨前端测试的各个方面，包括单元测试、集成测试、端到端测试等，并提供实用的测试工具和最佳实践。测试概述前端测试主要包括以下类型：单元测试：测试独立组件和函数集成测试：测试多个组件的交互端到端测试：模拟用户行为的完整测试性能测试：测试应用性能指标快照测试：UI组件的视觉回归测试测试工具实现测试运行器//测试运行器类classTestRu
  • SEO 优化 前端岳大宝 前端核心知识总结前端html
    以下是SEO（搜索引擎优化）的基础知识点梳理，从前端技术、内容策略到搜索引擎原理，覆盖核心优化方向：一、SEO基础概念定义与目标SEO是通过优化网站结构、内容和技术，提升网站在搜索引擎自然搜索结果中的排名，吸引更多免费流量。核心目标：满足用户搜索意图，同时符合搜索引擎爬虫的抓取规则。搜索引擎工作原理爬取（Crawling）：搜索引擎蜘蛛（如Googlebot）抓取网页内容。索引（Indexing）
  • 代练系统源码小程序如何助力游戏代练行业数字化转型？ mysqlvue.jsphp
    在电子竞技日益成为全球性娱乐和文化现象的今天，游戏代练服务作为连接高水平玩家与普通玩家的桥梁，其市场需求迅速增长。为满足这一需求，多客代练系统应运而生，它不仅简化了代练服务的匹配流程，还通过智能化管理提升了服务质量和用户体验。本文将深入探讨多客代练系统的核心优势、用户价值以及它如何塑造游戏竞技行业的未来。源码获取地址！！！！请点击！！！！前端框架主要负责用户界面的展示和交互。多客代练系统采用：un
  • 前端笔试高频算法题及JavaScript实现 GISer_Jinger 前端算法javascript
    以下是前端笔试常见的编程算法题及JavaScript代码现，结合最新面试题整理：一、数组/字符串处理两数之和找出数组中两数之和等于目标值的索引consttwoSum=(nums,target)=>{constmap=newMap();for(leti=0;i{letmap=newMap(),max=0,left=0;for(letright=0;right[...newSet(arr.flat(I
  • 工程化与框架系列（31）--前端依赖管理实践 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端
    前端依赖管理实践引言前端依赖管理是现代Web开发中的重要环节。本文将深入探讨前端依赖管理的最佳实践，包括包管理工具、版本控制、依赖分析和优化等方面，帮助开发者更好地管理项目依赖。依赖管理概述前端依赖管理主要包括以下方面：包管理工具：npm、yarn、pnpm等版本控制：语义化版本、锁文件等依赖分析：依赖树、循环依赖等依赖优化：体积优化、重复依赖等安全管理：漏洞检测、更新维护等依赖管理工具实现依赖分
  • Vue.js 3 的设计思路：从声明式UI到高效渲染机制 前端 贾公子 vue.jsuiflutter
    目录一、声明式UI与虚拟DOM的灵活性二、渲染器：虚拟DOM到真实DOM的桥梁三、组件的本质与实现四、编译与运行时的协同优化五、性能与可维护性的权衡总结Vue.js3作为新一代前端框架，其设计理念在声明式UI描述、虚拟DOM优化、组件化架构以及编译与运行时协作等方面实现了显著突破。本文将从多个角度深入探讨其设计思路。一、声明式UI与虚拟DOM的灵活性Vue.js3的核心特性之一是声明式UI描述，开
  • 前端发布缓存导致白屏解决方案 洛祁枫 web前端前端缓存
    解决发布H5后因为本地缓存白屏方案一、核心配置优化（前提是访问网站的请求能抵达服务器）方案一：前端项目设置全局不缓存方案运行逻辑：在H5服务器配置中增加Cache-Control:no-cache或max-age=0响应头，禁用静态资源缓存‌；优点：能在服务器出口处最大可能地解决发布项目缓存问题缺点：用户在不同界面跳转都会重新加载界面信息，影响整个前端加载速度，高并发时容易造成带宽压力方案二：首页
  • Web 开发的“三件套” zhangpeng455547940 Web开发reactnativereact.jsjavascript
    HTML：定义内容结构。CSS：控制样式布局。JavaScript：实现动态行为和复杂逻辑。JavaScript应用场景前端开发：操作DOM、处理用户事件、实现动画等。后端开发：通过Node.js构建服务器端应用。跨平台开发：Electron（桌面应用）、ReactNative（移动端）等。
  • [CRMEB知识付费系统]移动端课程列表一级分类模式实现 道法自然|~ CRMEBvuehtml5css
    写在前面最近在使用crmeb知识付费下系统的时候，发现默认是二级分类模式，但需求需要一级直接展示内容所以只能重构一下了,重构只改动了前端，非必要不去改动后端，会很麻烦.....目录写在前面实施准备代码结构与功能说明1.页面结构2.数据与状态管理3.核心方法解析3.1获取一级分类(getCateList)3.2获取二级分类(getSubject)3.3加载课程列表(getSpecialList)3.
  • 从零实现OSS阿里云图片上传：前端采用的vue3+element-plus，后端采用javaspingboot，实现上传图片到云，然后存储数据库链接能够回显的效果 绝顶少年 阿里云前端数据库
    后端（JavaSpringBoot）1.添加依赖在pom.xml中添加必要的依赖，包括阿里云OSSSDK、SpringBootWeb、MyBatis-Plus等：org.springframework.bootspring-boot-starter-webcom.baomidoumybatis-plus-boot-starter3.4.3.4com.aliyun.ossaliyun-sdk-oss
  • 前端如何通过后端返回的文件流下载csv文件 陈正阳~ 前端前端javascriptjson
    前端如何通过后端返回的文件流下载csv文件有一个下载的csv,后端返回了文件流有一个下载的csv,后端返回了文件流exportfunctionexportCSV(data:exportCSVParams):any{returnaxios({url:`/export/exportCSV?tableName=${data.tableName}&dataBaseName=${data.dataBaseN
  • VNode 码农 小王 javascript
    1.什么是VNode？VNode的全称是VirtualNode,也就是虚拟节点.它是指一个抽象的节点对象，用于描述真实DOM中的元素。在前端框架中，通过操作VNode来实现虚拟DOM，从而提高性能。2.VNode的本质本质上是JavaScript对象,这个对象就是更加轻量级的对DOM的描述3.为什么需要VNode？在前端框架中，我们通常需要在页面中操作DOM元素，如增删改查等操作。但是DOM操作是
  • 前端及后端实现csv文件下载功能 绝顶少年 前端
    方法一、前端内容：consturl=window.URL.createObjectURL(newBlob([res.data]));constlink=document.createElement('a');link.href=url;constfileNameDateTime=getFormattedDateTime();constfilename="用户提现列表"+fileNameDateTi
  • 前端面试：React hooks 调用是可以写在 if 语句里面吗？ returnShitBoy 前端react.jsjavascript
    在React中，Hooks是一种新的特性，允许你在函数组件中使用状态（state）和其他React特性。非常重要的一点是，ReactHooks必须遵循特定的规则，以确保组件的行为一致。ReactHooks使用规则只能在函数组件中调用Hook：你只能在React的函数组件或自定义Hooks中调用Hook，而不能在普通JavaScript函数中调用它们。不能在条件语句中调用Hook：Hooks不能放在
  • 《react》前端面试题 微 光 面试题react.js前端javascript
    说说你对reacthook的理解ReactHooks是React16.8版本引入的一种新的特性，它允许在不编写class的情况下使用state和其他React特性。我的理解主要集中在以下几个方面：函数组件的状态管理：Hooks提供了useState这样的钩子函数，使得我们可以在函数组件中使用状态（state），而不需要将组件转换为class组件。这简化了代码，并使组件的逻辑更易于理解和维护。副作用
  • HTML5拼图游戏开发经验分享 木木黄木木 html5前端html
    HTML5拼图游戏开发经验分享这里写目录标题HTML5拼图游戏开发经验分享前言项目架构1.文件结构2.核心功能模块技术要点解析1.响应式布局2.图片处理3.拖拽交互4.动画效果性能优化开发心得项目亮点总结源码分享写在最后前言在Web前端开发领域，通过实战项目来提升编程技能是最有效的学习方式之一。今天我要分享一个HTML5拼图游戏的开发经验，这个项目涵盖了现代前端开发的多个重要概念，包括响应式设计、
  • nginx报错：the “ssl“ parameter requires ngx_http_ssl_module in usrlocalnginxconfnginx.conf128 m0_67391401 面试学习路线阿里巴巴android前端后端
    前情回放：我一个前端被发配到客户那里当运维，我只想安安静静的敲代码怎么就这么难呢（我太难了。。。）。言归正传，遇到客户要求把http换成https，客户这边是生产环境。没有办法随便搞，只能把自己的域名换成https了，经过2天的努力啃骨头，终于搞定了，为了避免忘记，遇到了几个个问题，特此记录一下。准备工作：1一台服务器（我的是腾讯服务器），一个域名（我的是阿里申请的域名），服务器打开443端口（我
  • 前端小食堂 | Day16 - 前端监控の天眼通 喵爪排序 前端
    ️今日天眼：错误追踪与性能透视1.错误监控の捕虫网//全局错误捕获window.addEventListener('error',(e)=>{sendToServer({type:'JS_ERROR',message:e.message,stack:e.error?.stack,filename:e.filename,lineno:e.lineno});});//️Promise未捕获异常wind
  • 【H2O2 | 软件开发】事件循环机制 过期的H2O2 【H2O2】全栈面试题前端javascript
    目录前言开篇语准备工作正文概念流程事件队列类型示例结束语前言开篇语本系列为短篇，每次讲述少量知识点，无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的，希望对诸位有所帮助。准备工作概念篇，不对开发环境作要求。正文概念事件循环（EventLoop）是处理异步事件的一种机制，特别是在单线程环境中（如JavaScript在浏览器或Node.js中的运行）。它允许程序在
  • 【H2O2 | 软件开发】Axios发送Http请求 过期的H2O2 【H2O2】全栈面试题Vue3前端http交互Axios
    目录前言开篇语准备工作正文概念封装工具包示例结束语前言开篇语本系列为短篇，每次讲述少量知识点，无需一次性灌输太多的新知识点。该主题文章主要是围绕前端、全栈开发相关面试常见问题撰写的，希望对诸位有所帮助。如果您需要为面试八股文做准备，笔者建议重点关注加粗强调部分，它们是概念中的关键词。准备工作软件：【参考版本】VisualStudioCode第三方js库（框架）：【参考版本】Vue3，Axios（v
  • 「手把手教学」Monorepo项目搭建与管理——实战案例 lifire_H Monorepo实战前端
    Monorepo项目搭建与管理文章目录Monorepo项目搭建与管理@[TOC]实战案例第一部分：Vue组件库搭建1.1创建Vue组件库子包1.2安装Vue相关依赖1.3创建组件示例1.4配置Vite构建实战案例第二部分：创建NestJS后端服务2.1创建NestJS子包2.2安装NestJS核心依赖2.3生成NestJS项目骨架2.4基础服务代码示例2.5配置跨域支持（为前端联调准备）实战案例第
  • Sass (Scss) 与 Less 的区别与选择 王强你强 sassscssless
    在前端开发中，CSS预处理器如Sass（SyntacticallyAwesomeStylesheets）和Less被广泛使用，它们通过引入变量、嵌套规则、混合、函数等特性，使CSS的开发过程更加高效和灵活。Sass和Less作为两大主流CSS预处理器，各自具有独特的优点和特性。本文将详细探讨Sass（特别是其语法扩展Scss）与Less之间的区别，并提供选择建议。1.语法差异Sass最初是使用缩进
  • 工程化与框架系列（30）--前端日志系统实现 一进制ᅟᅠ        ‌‍‎‏  前端工程化与框架前端状态模式
    前端日志系统实现引言前端日志系统是应用监控和问题诊断的重要工具。本文将深入探讨前端日志系统的设计与实现，包括日志收集、处理、存储和分析等方面，帮助开发者构建完整的前端日志解决方案。日志系统概述前端日志系统主要包括以下方面：日志收集：用户行为、性能指标、错误信息等日志处理：过滤、格式化、压缩等日志存储：本地存储、远程上传等日志分析：统计分析、可视化展示等实时监控：告警、通知等日志系统实现日志管理器/
  • 鸿蒙(HarmonyOS)应用开发实战——数据库版本升级案例 CTrup 移动开发鸿蒙开发HarmonyOSharmonyos数据库华为鸿蒙开发装饰器模式ArkUI前端
    往期推文全新看点学鸿蒙开发的优劣势，你清楚吗？建议你了解一下！鸿蒙（HarmonyOS）北向开发知识点记录~鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~鸿蒙应用开发与鸿蒙系统开发哪个更有前景？嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~对于大前端开发来说，转鸿蒙开发究竟是福还是祸？鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？记录一场鸿蒙开发岗位面试经历~持续更新中…
  • react组件设计原则_前端组件设计原则 weixin_39825259 react组件设计原则
    原标题：前端组件设计原则译者：@没有好名字了译文：https://github.com/lightningminers/article/issues/36，https://juejin.im/post/5c49cff56fb9a049bd42a90f作者：@AndrewDinihan原文：https://engineering.carsguide.com.au/front-end-componen
  • Vue3中使用exceljs和file-saver实现Excel导出（含图片导出）完整方案 叫我OldFe excel
    问题背景在Vue3项目中，当我们需要将包含图片的数据导出到Excel时，常用的sheetjs/xlsx库存在局限性：无法直接导出图片到单元格。本文将提供完整的解决方案，封装可直接复用的工具函数。解决方案技术选型使用exceljs+file-saver组合：exceljs：支持图片插入的Excel操作库file-saver：前端文件保存工具功能特性✅支持多图片列导出✅自动识别Base64和DataU
  • Redis- 秒杀场景 左灯右行的爱情 redis数据库缓存
    秒杀什么是秒杀场景秒杀场景挑战有哪些高并发与性能挑战数据一致性挑战安全性挑战秒杀系统的架构设计前端策略服务层设计库存控制策略订单处理流程技术实现缓存设计与优化分布式锁与一致性保证消息队列应用安全防护措施什么是秒杀场景秒杀场景的本质是在极短时间内承受大量并发请求，同时保证有限商品的正确售卖。它具有三个核心特征：高并发（短时间内大量用户涌入）、资源有限（商品数量有限）和时效性强（活动在特定时间开始和结
  • 前端打包优化相关 Webpack 怒放的生命1991 webpack前端webpacknode.js
    前端打包优化相关Webpack打包时间的优化（基于VueCLI4+Webpack5）1.Webpack配置减少打包时间1.1对JS配置：排除node_modules和src中的打包内容在开发环境下，修改Webpack的JS规则，排除/node_modules和src目录中的JavaScript文件。这意味着node_modules和src目录中的JavaScript文件不会经过该规则定义的加载器处
  • Python, Springboot 开发基于人类指令生成机器人3D可视化动态模型app Geeker-2025 pythonspringboot
    开发一个基于人类指令生成机器人3D可视化动态模型的APP是一个复杂且多层次的项目，涉及前端和后端的多个技术栈。以下是一个高层次的设计概述，涵盖主要的技术栈和功能模块，并提供使用Python和SpringBoot进行联合开发的示例。##技术栈概述###前端-**框架**：React.js或Vue.js（用于构建用户界面）-**3D可视化**：Three.js或React-Three-Fiber（用于
  • uinapp前端技术带动陪玩软件市场，语音陪玩系统源码开发打造你自己的市场 前端后端小程序数据库服务器
    游戏陪玩app是一种为游戏玩家提供专业陪玩服务的软件。这个软件汇聚了大量游戏玩家，特别是大神级别的玩家，为玩家提供贴心、专业的游戏陪玩服务。用户可以通过软件轻松查找和选择满意的陪玩。此外，陪玩软件还提供了如语音互动、礼物打赏，在线接单，社交直播等功能，方便玩家畅玩游戏。跨平台开发：uniapp支持一次开发，多端发布，包括iOS、Android、Web以及各种小程序等平台。这意味着开发者可以编写一套
  • HttpClient 4.3与4.3版本以下版本比较 spjich javahttpclient
    网上利用java发送http请求的代码很多，一搜一大把，有的利用的是java.net.*下的HttpURLConnection，有的用httpclient，而且发送的代码也分门别类。今天我们主要来说的是利用httpclient发送请求。 httpclient又可分为 httpclient3.x httpclient4.x到httpclient4.3以下 httpclient4.3
  • Essential Studio Enterprise Edition 2015 v1新功能体验 Axiba .net
    概述：Essential Studio已全线升级至2015 v1版本了！新版本为JavaScript和ASP.NET MVC添加了新的文件资源管理器控件，还有其他一些控件功能升级，精彩不容错过，让我们一起来看看吧！ syncfusion公司是世界领先的Windows开发组件提供商，该公司正式对外发布Essential Studio Enterprise Edition 2015 v1版本。新版本
  • [宇宙与天文]微波背景辐射值与地球温度 comsci 背景
            宇宙这个庞大,无边无际的空间是否存在某种确定的,变化的温度呢?      如果宇宙微波背景辐射值是表示宇宙空间温度的参数之一,那么测量这些数值,并观测周围的恒星能量输出值,我们是否获得地球的长期气候变化的情况呢?   &nbs
  • lvs-server 男人50 server
    #!/bin/bash # # LVS script for VS/DR # #./etc/rc.d/init.d/functions # VIP=10.10.6.252 RIP1=10.10.6.101 RIP2=10.10.6.13 PORT=80 case $1 in start)   /sbin/ifconfig eth2:0 $VIP broadca
  • java的WebCollector爬虫框架 oloz 爬虫
    WebCollector主页： https://github.com/CrawlScript/WebCollector 下载：webcollector-版本号-bin.zip将解压后文件夹中的所有jar包添加到工程既可。 接下来看demo package org.spider.myspider; import cn.edu.hfut.dmic.webcollector.cra
  • jQuery append 与 after 的区别 小猪猪08
    1、after函数 定义和用法： after() 方法在被选元素后插入指定的内容。 语法： $(selector).after(content) 实例： <html> <head> <script type="text/javascript" src="/jquery/jquery.js"></scr
  • mysql知识充电 香水浓 mysql
    索引 索引是在存储引擎中实现的，因此每种存储引擎的索引都不一定完全相同，并且每种存储引擎也不一定支持所有索引类型。 根据存储引擎定义每个表的最大索引数和最大索引长度。所有存储引擎支持每个表至少16个索引，总索引长度至少为256字节。 大多数存储引擎有更高的限制。MYSQL中索引的存储类型有两种：BTREE和HASH，具体和表的存储引擎相关； MYISAM和InnoDB存储引擎
  • 我的架构经验系列文章索引 agevs 架构
    下面是一些个人架构上的总结，本来想只在公司内部进行共享的，因此内容写的口语化一点，也没什么图示，所有内容没有查任何资料是脑子里面的东西吐出来的因此可能会不准确不全，希望抛砖引玉，大家互相讨论。 要注意，我这些文章是一个总体的架构经验不针对具体的语言和平台，因此也不一定是适用所有的语言和平台的。 （内容是前几天写的，现附上索引）   前端架构 http://www.
  • Android so lib库远程http下载和动态注册 aijuans andorid
    一、背景      在开发Android应用程序的实现，有时候需要引入第三方so lib库，但第三方so库比较大，例如开源第三方播放组件ffmpeg库, 如果直接打包的apk包里面, 整个应用程序会大很多.经过查阅资料和实验，发现通过远程下载so文件，然后再动态注册so文件时可行的。主要需要解决下载so文件存放位置以及文件读写权限问题。   二、主要
  • linux中svn配置出错 conf/svnserve.conf:12: Option expected 解决方法 baalwolf option
    在客户端访问subversion版本库时出现这个错误： svnserve.conf:12: Option expected 为什么会出现这个错误呢，就是因为subversion读取配置文件svnserve.conf时，无法识别有前置空格的配置文件，如### This file controls the configuration of the svnserve daemon, if you##
  • MongoDB的连接池和连接管理 BigCat2013 mongodb
    在关系型数据库中，我们总是需要关闭使用的数据库连接，不然大量的创建连接会导致资源的浪费甚至于数据库宕机。这篇文章主要想解释一下mongoDB的连接池以及连接管理机制，如果正对此有疑惑的朋友可以看一下。 通常我们习惯于new 一个connection并且通常在finally语句中调用connection的close()方法将其关闭。正巧，mongoDB中当我们new一个Mongo的时候，会发现它也
  • AngularJS使用Socket.IO bijian1013 JavaScriptAngularJSSocket.IO
            目前，web应用普遍被要求是实时web应用，即服务端的数据更新之后，应用能立即更新。以前使用的技术（例如polling）存在一些局限性，而且有时我们需要在客户端打开一个socket，然后进行通信。         Socket.IO(http://socket.io/)是一个非常优秀的库，它可以帮你实
  • [Maven学习笔记四]Maven依赖特性 bit1129 maven
    三个模块 为了说明问题，以用户登陆小web应用为例。通常一个web应用分为三个模块，模型和数据持久化层user-core, 业务逻辑层user-service以及web展现层user-web， user-service依赖于user-core user-web依赖于user-core和user-service   依赖作用范围  Maven的dependency定义
  • 【Akka一】Akka入门 bit1129 akka
    什么是Akka Message-Driven Runtime is the Foundation to Reactive Applications In Akka, your business logic is driven through message-based communication patterns that are independent of physical locatio
  • zabbix_api之perl语言写法 ronin47 zabbix_api之perl
    zabbix_api网上比较多的写法是python或curl。上次我用java－－http://bossr.iteye.com/blog/2195679，这次用perl。for example: #!/usr/bin/perl use 5.010 ; use strict ; use warnings ; use JSON :: RPC :: Client ; use
  • 比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！ brotherlamp linux运维工程师linux运维工程师教程linux运维工程师视频linux运维工程师资料linux运维工程师自学
    比优衣库跟牛掰的视频流出了，兄弟连Linux运维工程师课堂实录，更加刺激，更加实在！   ----------------------------------------------------- 兄弟连Linux运维工程师课堂实录-计算机基础-1-课程体系介绍1 链接：http://pan.baidu.com/s/1i3GQtGL 密码：bl65   兄弟连Lin
  • bitmap求哈密顿距离-给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y( bylijinnan java
    import java.util.Random; /** * 题目： * 给定N（1<=N<=100000）个五维的点A(x1,x2,x3,x4,x5)，求两个点X(x1,x2,x3,x4,x5)和Y(y1,y2,y3,y4,y5)， * 使得他们的哈密顿距离（d=|x1-y1| + |x2-y2| + |x3-y3| + |x4-y4| + |x5-y5|）最大
  • map的三种遍历方法 chicony map
    package com.test; import java.util.Collection; import java.util.HashMap; import java.util.Iterator; import java.util.Map; import java.util.Set; public class TestMap { public static v
  • Linux安装mysql的一些坑 chenchao051 linux
    1、mysql不建议在root用户下运行   2、出现服务启动不了，111错误，注意要用chown来赋予权限， 我在root用户下装的mysql，我就把usr/share/mysql/mysql.server复制到/etc/init.d/mysqld, (同时把my-huge.cnf复制/etc/my.cnf)  chown -R cc /etc/init.d/mysql
  • Sublime Text 3 配置 daizj 配置Sublime Text
    Sublime Text 3 配置解释(默认){// 设置主题文件“color_scheme”: “Packages/Color Scheme – Default/Monokai.tmTheme”,// 设置字体和大小“font_face”: “Consolas”,“font_size”: 12,// 字体选项：no_bold不显示粗体字，no_italic不显示斜体字，no_antialias和
  • MySQL server has gone away 问题的解决方法 dcj3sjt126com SQL Server
    MySQL server has gone away 问题解决方法，需要的朋友可以参考下。 应用程序（比如PHP）长时间的执行批量的MYSQL语句。执行一个SQL，但SQL语句过大或者语句中含有BLOB或者longblob字段。比如，图片数据的处理。都容易引起MySQL server has gone away。 今天遇到类似的情景，MySQL只是冷冷的说：MySQL server h
  • javascript/dom:固定居中效果 dcj3sjt126com JavaScript
    <!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/1999/xhtml&
  • 使用 Spring 2.5 注释驱动的 IoC 功能 e200702084 springbean配置管理IOCOffice
    使用 Spring 2.5 注释驱动的 IoC 功能 developerWorks 文档选项 将打印机的版面设置成横向打印模式 打印本页 将此页作为电子邮件发送 将此页作为电子邮件发送 级别： 初级 陈 雄华 ([email protected]), 技术总监, 宝宝淘网络科技有限公司 2008 年 2 月 28 日  &nb
  • MongoDB常用操作命令 geeksun mongodb
    1.   基本操作 db.AddUser(username,password)               添加用户 db.auth(usrename,password)      设置数据库连接验证 db.cloneDataBase(fromhost)    
  • php写守护进程（Daemon） hongtoushizi PHP
    转载自： http://blog.csdn.net/tengzhaorong/article/details/9764655   守护进程（Daemon）是运行在后台的一种特殊进程。它独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件。守护进程是一种很有用的进程。php也可以实现守护进程的功能。   1、基本概念   &nbs
  • spring整合mybatis,关于注入Dao对象出错问题 jonsvien DAOspringbeanmybatisprototype
    今天在公司测试功能时发现一问题： 先进行代码说明： 1，controller配置了Scope="prototype"（表明每一次请求都是原子型）    @resource/@autowired service对象都可以（两种注解都可以）。 2，service 配置了Scope="prototype"（表明每一次请求都是原子型）
  • 对象关系行为模式之标识映射 home198979 PHP架构企业应用对象关系标识映射
    HELLO!架构   一、概念 identity Map:通过在映射中保存每个已经加载的对象，确保每个对象只加载一次，当要访问对象的时候，通过映射来查找它们。其实在数据源架构模式之数据映射器代码中有提及到标识映射，Mapper类的getFromMap方法就是实现标识映射的实现。     二、为什么要使用标识映射？ 在数据源架构模式之数据映射器中 //c
  • Linux下hosts文件详解 pda158 linux
    　1、主机名： 　　无论在局域网还是INTERNET上，每台主机都有一个IP地址，是为了区分此台主机和彼台主机，也就是说IP地址就是主机的门牌号。 　　公网：IP地址不方便记忆，所以又有了域名。域名只是在公网（INtERNET)中存在，每个域名都对应一个IP地址，但一个IP地址可有对应多个域名。 　　局域网：每台机器都有一个主机名，用于主机与主机之间的便于区分，就可以为每台机器设置主机
  • nginx配置文件粗解 spjich javanginx
    #运行用户#user  nobody;#启动进程,通常设置成和cpu的数量相等worker_processes  2;#全局错误日志及PID文件#error_log  logs/error.log;#error_log  logs/error.log  notice;#error_log  logs/error.log  inf
  • 数学函数 w54653520 java
    public  class  S {        // 传入两个整数，进行比较，返回两个数中的最大值的方法。      public  int  get( int  num1, int  nu
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他