aTeacher
aTeacher

CSS动画实例：行星和卫星

      设页面中有

，用来绘制一个行星和卫星图形。这个图形包括三部分：行星、卫星和卫星旋转的轨道。定义. planet的样式规则如下：

.planet

 {

    position:absolute;

    top:80px;

    left:80px;

    height:100px;

    width:100px;

    border-radius:50%;  border:1px solid #f00;

    animation:rond 3s  linear infinite;

  }

  .planet:before

  {

    content: "";

    height:10px;

    width:10px;

    position:absolute;

    background-color:#f00;

    border-radius:50%;

    top:50px;

    left:-5px;

  }

  .planet:after

  {

    content: '';

    height:60px;

    width:60px;

    background:#f00;

    border-radius:50%;

    position:absolute;

    top:20px;

    left:20px;

  }

可在页面中显示如图1所示的图案。

 CSS动画实例：行星和卫星_第1张图片

图1  行星和卫星

      定义关键帧，使得卫星在轨道上绕行星旋转。编写的HTML文件如下。

DOCTYPE html>
<html>
<head>
<title>行星和卫星title>
<style>
  .container 
  {
     width:350px; 
     height:350px; 
     margin:100px auto; 
     position:relative;
     border: 4px solid rgba(255, 0, 0, 0.9);
     border-radius: 10%;
  }
  .planet
 {
    position:absolute;
    top:80px;
    left:80px;
    height:100px;
    width:100px;
    border-radius:50%;  border:1px solid #f00;
    animation:rond 3s  linear infinite;
  }
  .planet:before
  {
    content: "";
    height:10px;
    width:10px;
    position:absolute;
    background-color:#f00;
    border-radius:50%;
    top:50px;
    left:-5px;
  }
  .planet:after
  {
    content: '';
    height:60px;
    width:60px;
    background:#f00;
    border-radius:50%;
    position:absolute;
    top:20px;
    left:20px;
  }
  @keyframes rond 
  {
     0% {transform : rotate(0deg);}
     100% {transform : rotate(360deg);}
  }
style>
head>
<body>
<div class="container">
  <div class="planet">div>
div>
body>
html>
View Code

      在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图2所示的动画效果。

CSS动画实例：行星和卫星_第2张图片 

图2  绕行星旋转的卫星

      在图2中有一颗红色的小卫星绕着红色的卫星旋转，再加入一个蓝色的小卫星绕着蓝色的行星旋转。可以编写如下的HTML文件。

DOCTYPE html>
<html>
<head>
<title>行星和卫星title>
<style>
  .container 
  {
     width:350px; 
     height:350px; 
     margin:100px auto; 
     position:relative;
     border: 4px solid rgba(255, 0, 0, 0.9);
     border-radius: 10%;
  }
  .planet1
 {
    position:absolute;
    top:80px;
    left:80px;
    height:100px;
    width:100px;
    border-radius:50%;  border:1px solid #f00;
    animation:rond 3s  linear infinite;
  }
  .planet1:before
  {
    content: "";
    height:10px;
    width:10px;
    position:absolute;
    background-color:#f00;
    border-radius:50%;
    top:50px;
    left:-5px;
  }
  .planet1:after
  {
    content: '';
    height:60px;
    width:60px;
    background:#f00;
    border-radius:50%;
    position:absolute;
    top:20px;
    left:20px;
  }
  .planet2
 {
    position:absolute;
    top:180px;
    left:180px;
    height:80px;
    width:80px;
    border-radius:50%;  border:1px solid #00f;
    animation:rond 3s  linear infinite;
  }
  .planet2:before
  {
    content: "";
    height:10px;
    width:10px;
    position:absolute;
    background-color:#00f;
    border-radius:50%;
    top:40px;
    left:-5px;
  }
  .planet2:after
  {
    content: '';
    height:40px;
    width:40px;
    background:#00f;
    border-radius:50%;
    position:absolute;
    top:20px;
    left:20px;
  }
  @keyframes rond 
  {
     0% {transform : rotate(0deg);}
     100% {transform : rotate(360deg);}
  }
style>
head>
<body>
<div class="container">
  <div class="planet1">div>
  <div class="planet2">div>
div>
body>
html>
View Code

      在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图3所示的动画效果。

 CSS动画实例：行星和卫星_第3张图片

图3  绕各自轨道旋转的两颗卫星

      上面的HTML文件中，为了绘制两颗行星，页面中定义了两个div：一个类名为planet1，另一个名为planet2。分别为两个类定义样式规则，这两个类的样式规则基本相同，复制后略作修改即可。

       若在页面中搞多个绕各自轨道旋转的卫星怎么办呢？采用类似的方法（定义类名为planet3、planet4、…等层，再复制样式规则略作修改）虽然可以实现，但重复代码太多，导致HTML文件大小偏大。因此，采用自定义变量的方式更好些。

       比较类.planet1和.planet2的样式规则定义，可以为一个绕轨道旋转的卫星抽象出5个属性：表示行星大小的--size、表示行星位置的--top和--left，表示卫星旋转速度的—speed、表示颜色的--color。

      编写的HTML文件内容如下。

DOCTYPE html>
<html>
<head>
<title>行星和卫星title>
<style>
  .container 
  {
     width:350px; 
     height:350px; 
     margin:100px auto; 
     position:relative;
     border: 4px solid rgba(255, 0, 0, 0.9);
     border-radius: 10%;
  }
  .planet
 {
    position:absolute;
    top:var(--top);
    left:var(--left);
    height:calc(var(--size) + 40px);
    width:calc(var(--size) + 40px);
    border-radius:50%;  border:1px solid var(--color);
    animation:rond var(--speed)  linear infinite;
  }
  .planet:before
  {
    content: "";
    height:10px;
    width:10px;
    position:absolute;
    background-color:var(--color);
    border-radius:50%;
    top:calc(var(--size) / 2 + 20px);
    left:-5px;
  }
  .planet:after
  {
    content: '';
    height:var(--size);
    width:var(--size);
    background:var(--color);
    border-radius:50%;
    position:absolute;
    top:20px;
    left:20px;
  }
  @keyframes rond 
  {
     0% {transform : rotate(0deg);}
     100% {transform : rotate(360deg);}
  }
style>
head>
<body>
<div class="container">
  <div class="planet" style="--size:60px;--left:50px; --top: 30px; --color:#f00; --speed: 3s;">div>
  <div class="planet" style="--size:60px;--left:200px; --top: 30px; --color:#f0f; --speed: 3s;">div>
  <div class="planet" style="--size:40px;--left:25px; --top: 135px; --color:#ff0; --speed: 2.5s;">div>
  <div class="planet" style="--size:40px;--left:135px; --top: 135px; --color:#0f0; --speed: 2.5s;">div>
  <div class="planet" style="--size:40px;--left:245px; --top: 135px; --color:#0ff; --speed: 2.5s;">div>
  <div class="planet" style="--size:60px;--left:50px; --top: 220px; --color:#00f; --speed: 3s;">div>
  <div class="planet" style="--size:60px;--left:200px; --top: 220px; --color:#800080; --speed: 3s;">div>
div>
body>
html>
View Code

       在浏览器中打开包含这段HTML代码的html文件，可以呈现出如图4所示的动画效果。

CSS动画实例：行星和卫星_第4张图片 

图4  绕各自轨道旋转的七颗卫星

通过这个例子，可以体会CSS中自定义变量的使用方法。

你可能感兴趣的:(CSS动画实例：行星和卫星)

  • Oracle登录时忘记用户名或密码，怎么办？ 杨云龙666 oracle数据库sqldatabase数据库开发笔记经验分享
    Oracle默认用户名和密码（注意：Oracle12c规定用户名都必须以C##开头，否则无法使用。）1.用户名:sys密码:change_on_install或者managerassysdba2.用户名:system密码:manager3.用户名:scott密码:tiger一、忘记账户：可以使用以上默认账号其中一个用户及密码，在PL/SQL管理工具中登录，运行selectusernamefromd
  • linux监听tcp端口数据包,linux tcpdump抓包 weixin_39615741 linux监听tcp端口数据包
    8种机械键盘轴体对比本人程序员，要买一个写代码的键盘，请问红轴和茶轴怎么选？tcpdump是在命令行下运行的常用数据包分析器。它允许用户显示通过计算机所连接的网络传输或接收的TCP/IP和其他数据包。根据BSD许可分发,tcpdump是免费软件。tcpdump适用于大多数类Unix操作系统：Linux，Solaris，BSD，macOS，HP-UX，Android和AIX等。在这些系统中,tcpd
  • php ip获取邮政编码,地理位置-如何从IP地址确定邮政编码和城市？ 哈士奇爱深海鱼 phpip获取邮政编码
    以下是我发现的使用[http://ipinfodb.com/ip_locator.php]来获取其信息的代码段的修改版本。请记住，您也可以向他们申请API密钥，并直接使用API来获取您认为合适的信息。如您所见[http://ipinfodb.com/ip_location_api.php，]他们提供了从PHP到JavaScript到ASP.Net的所有示例。如前所述，下面不需要密钥，因为它可以拉动
  • Qutebrowser：Python程序员的浏览器利器 东方佑 量子变法python
    引言在日常工作中，我们常常会遇到一些重复性的操作，比如每天打开固定的几个网页，或者需要频繁地对网页进行截图。如果你是一位Python开发者，并且希望有一种更高效的方式来处理这些任务，那么今天介绍的Qutebrowser绝对会让你眼前一亮。Qutebrowser是一个基于Python和PyQt开发的键盘驱动浏览器，它不仅支持Vim风格的快捷键操作，还允许用户通过编写Python脚本来扩展其功能。接下
  • SSH隧道连接(基于linux) 小熊同学哦 网络安全sshlinux运维
    引言SecureShell（SSH）是一种网络协议，用于在不安全的网络中为网络服务提供安全的传输。SSH协议主要用来进行远程登录，管理服务器，传输文件等。本文将详细介绍SSH的工作原理、配置方法以及常见问题的解决方法，帮助读者更好地理解和使用SSH。1.SSH的基本概念1.1什么是SSH？SSH（SecureShell）是一种加密的网络协议，用于安全地连接到远程计算机。它提供了安全的通信通道，可以
  • 瀑布式开发、快速原型开发、迭代式开发、螺旋式开发、敏捷式开发、DevOps开发的简介与对比 晓北斗NorSnow 多媒体考试devops运维
    以下是项目管理中常见的软件开发模式：瀑布式开发、快速原型开发、迭代式开发、螺旋式开发、敏捷式开发、DevOps开发的简介与对比表格：开发模式简介优点缺点适用场景瀑布式开发最早提出的系统化、结构化的开发方法，将软件开发过程划分为一系列顺序进行的阶段。1.顺序性强，便于管理和控制；2.文档齐全，有利于后期维护和升级；3.结构化可预测，便于计划和资源分配。1.缺乏灵活性，难以应对需求变化；2.早期缺陷检
  • 《薄世宁医学通识50讲》以医学通识为主题，涵盖了医学的多个方面，包括医学哲学、疾病认知、治疗过程、医患关系、公共卫生等 晓北斗NorSnow 图书课程分享学习方法程序员创富创业创新学习程序人生
    《薄世宁医学通识50讲》是一门由薄世宁医生主讲的医学通识课程，该课程旨在通过深入浅出的方式，向广大听众普及医学知识，提升公众对医学的认知和理解。晓北斗推荐-薄世宁医学通识以下是对该课程的详细介绍：一、课程概述《薄世宁医学通识50讲》以医学通识为主题，涵盖了医学的多个方面，包括医学哲学、疾病认知、治疗过程、医患关系、公共卫生等。薄世宁医生以其丰富的医学知识和临床经验，将复杂的医学问题讲解得通俗易懂，
  • 区别Mp3、AAC、WAV 、MWA这些音频文件 晓北斗NorSnow 多媒体考试aac
    同学，MP3、AAC、WAV、WMA这些音频文件格式各有其特点和适用场景，下面我来为你详细解释一下它们的区别：MP3特点：MP3是一种广泛使用的音频压缩技术，它能够在音质丢失很小的情况下将音频文件压缩到更小的程度。MP3格式具有广泛的兼容性、网络传输便利性以及多样化的应用场景等特点，是全球范围内最受欢迎和应用最广的音频文件格式之一。音质与文件大小：MP3格式通过压缩音频数据来减小文件大小，同时保持
  • A6.Springboot-LLama3.2服务自动化构建（三）——编写Pipeline构建仓库初始化脚本 smart_ljh AI大模型应用与实战springboot自动化servletjenkins构建
    下面我们接着上一篇文章《A5.Springboot-LLama3.2服务自动化构建（二）——Jenkins流水线构建配置初始化设置》继续往下分析，编写Pipeline构建脚本。一、统一Shell执行环境Jenkins执行Shell脚本时，会在Jenkins节点上创建一个临时的环境来执行该脚本。这个环境包含了Jenkins运行时需要的所有依赖和资源，以及用户在Jenkins配置中指定的环境变量。当用
  • 医学顶会 MICCAI‘24 | LKM-UNet: 大型内核视觉 Mamba UNet 用于医学图像分割 小白学视觉 医学图像处理论文解读MICCAI深度学习医学图像顶会医学图像处理论文解读
    本文内容只为星球内部成员学习和学术交流，请勿用作他用本文内容只为星球内部成员学习和学术交流，请勿用作他用论文信息题目：LKM-UNet:LargeKernelVisionMambaUNetforMedicalImageSegmentationLKM-UNet:大型内核视觉MambaUNet用于医学图像分割作者：JinhongWang,JintaiChen,DannyChen,JianWu源码链接：
  • Java实现文件内容加解密 qq_34759280 Javajava安全加解密
    背景近期在做一个对数据安全要求比较高的软件，用户要求做到对接口、文件、以及数据库部分敏感字段进行加密。由于系统中文件内容比较敏感，用户要求除了客户其他人不能查看文件具体内容，包括运维人员和开发人员。探讨其实文件加密并不算太复杂。无非就是在用户上传文件的时候将文件内容读出加密写入后再存到服务器，然后用户下载的时候将内容读出然后解密再写入输出流即可。简单实现计算机数据内容是二进制，针对二进制最简单高效
  • Java移位运算符以及位运算 专属_Smile java进阶
    移位运算符：移位运算符是位操作运算符的一种。移位运算符可以在二进制的基础上对数字进行平移。按照平移的方向和填充数字的规则分为三种：>(带符号右移)和>>>(无符号右移)。左移运算符（>）按二进制形式把所有的数字向右移动对应位移位数，低位移出(舍弃)，高位的空位补符号位，即正数补零，负数补1。例如11>>3，则是将数字11右移3位。11的二进制值为00000000000000000000000000
  • Electron版本列表 Qlittleboy electronjavascript前端
    Electron是一个使用Chromium和Node.js构建桌面应用程序的框架。它最初由GitHub开发，现在被多个项目和公司使用。Electron版本列表包括了不同的主版本，每个主版本有其特定的Chromium和Node.js版本。截至2023年，Electron的版本列表如下所示（请注意，这些信息可能会有所更新，因此建议查看Electron的官方网站或其GitHub仓库以获取最新信息）：El
  • 云原生项目纪事系列 — 搞不清情况的小阿辉 Moehoo猛虎 云计算项目阿辉项目管理
    如果得不到这个做事情的机会，好多同事包括你自己工作就没了，家里孩子上学补习费交不起了，房贷还不上了，再选哪个？所以还是做富二代，或者财务有些自由的人比较好，他们可以由着自己的性子来。2023年5月6日，搞不清楚情况的小阿辉（“韦昌辉”）给老模发了以上消息。他自己苦过、饿过、穷过，就以为所有人都跟他一样。不是这块料，硬挺着，没戏。想争权，得要有能人，但能人只和能人在一起，不跟没本事的人打交道。做管理
  • RocketMQ 系列文章 点滴~ rocketmq
    目录使用RocketMQ的业务系统怎么处理消息的重试？使用RocketMQ的业务系统怎么保证消息处理的幂等性？使用RocketMQ的业务系统怎么处理消息的积压？RocketMQ怎么保证消息的可靠性？RocketMQ怎么保证消息的顺序性的？RocketMQ的Topic和消息队列MessageQueue信息，是怎么分布到Broker的？怎么负载均衡到Broker的？NameServer在RocketM
  • FPGA实现光纤通信(3)——光纤8b/10b编码数据回环 得之坦然，失之淡然。 FPGA学习笔记fpga开发开源
    前言光纤通信属于高速串行通信，具有较高的数据传输速率，通常用于服务器以及通信设备之间用于高速数据交换，对于xilinx7系列的FPGA，内部具有集成的高速接口用于实现光纤通信。本次就来实现8b/10b编码数据回环。测试环境：vivado版本：2020.02FPGA芯片：XC7K70T测试说明：进行光纤8B/10B编码数据回环测试8B/10B编码简介8b/10b编码是由IBM公司的Widmer和Fr
  • 一线大厂的 MQ 组件实现思路和架构设计思路 java领域 java开发语言程序人生单元测试python
    首先来看看一线大厂的架构图一线大厂的架构图如上图所示，中间是我们的MQ集群架构，在上层利用keepalived和HA-Proxy，最下面是两个大的MQ集群做一个高可用。当然了，在实际大厂里面可能就不止两个集群了，可以是很多个集群，然后集群之间利用federration插件进行数据同步。上面的生产端组件：这里面可能就有很多的架构设计，比如生产端怎么对一个容器进行缓存，举个例子，我们生产端发送消息，都
  • 《Ansible：自动化运维的“魔法棒”，让繁琐任务一键搞定！》 入眼皆含月 运维ansible自动化
    一、概况1、什么是AnsibleAnsible是一款开源的自动化运维工具，广泛应用于配置管理、应用部署、任务执行和编排等领域。它以其简单易用、高效稳定和强大的功能而受到众多企业和开发者的青睐。2、Ansible的背景在传统运维工作中，服务器配置、软件部署、系统更新等任务通常需要人工手动操作。随着企业规模的扩大和业务的复杂化，手动运维不仅效率低下，还容易出错。Ansible的出现正是为了解决这些问题
  • 《零基础学Nginx：轻松搭建高性能Web服务器-kylin系统》 入眼皆含月 nginx服务器运维
    一、概述Nginx（发音为“engineX”）是一款高性能的开源HTTP服务器和反向代理服务器，同时也支持IMAP/POP3代理服务器。它由俄罗斯程序员伊戈尔·西索夫（IgorSysoev）开发，并于2004年首次发布。Nginx以其高并发处理能力、低资源消耗和高性能而闻名，广泛应用于互联网行业，是许多大型网站和高性能需求场景的首选解决方案。二、Nginx的特点（1）高性能：Nginx采用事件驱动
  • Nginx的常用模块 入眼皆含月 nginx运维
    一、概述Nginx是一款高性能的开源Web服务器和反向代理服务器，它通过模块化架构提供了丰富的功能。二、模块介绍1、autoindex模块1.1、位置：http、server、location1.2、开启autoindexserver{listen80;server_name_;location/{root/code;indexindex.html;autoindexon;#开启列表功能}}1.3
  • 电磁仿真--CST的时域求解器和频域求解器 hi94 电磁场学习笔记电磁学仿真CST
    目录1.简介2.综合概述2.1时域求解器2.2频域求解器3.优劣势对比3.1时域求解器（T、TLM）3.2频域求解器（F）3.3优势与劣势对比4.总结1.简介CSTStudioSuite提供多种类型的高频求解器模块，本文分析常用两种T/TLM和F。2.综合概述2.1时域求解器时域求解器有两种，T和TLM可供选择，都基于六面体网格。他们在大多数高频应用中非常高效，例如连接器、传输线、滤波器、天线等，
  • API接口助力独立站实现物流追踪自动化 FBAPI3713612741 人工智能python爬虫oneapi
    随着信息技术的飞速发展和电子商务的蓬勃兴起，物流追踪已成为电商平台和独立站运营中不可或缺的一环。API（应用程序编程接口）接口作为连接不同软件系统的桥梁，其在物流追踪自动化方面发挥着至关重要的作用。本文将深入探讨API接口如何助力独立站实现物流追踪自动化，并分析其带来的诸多优势。一、API接口的基本概念与功能API接口是一组预定义的函数或协议，允许不同的软件系统之间进行有效的通信和数据交换。这些接
  • 电商数据隐私与合规性：API接口的安全挑战 FBAPI3713612741 大数据python爬虫oneapi人工智能
    随着互联网技术的不断发展和普及，电商行业迎来了高速增长的时代。电商网站作为电商运营与交互的核心平台，承载了大量用户数据，包括个人信息、消费记录、点击数据等。这些用户数据不仅是电商网站运营的重要基础和竞争优势，同时也涉及到用户的隐私权益和信息安全问题。API（应用程序编程接口）接口作为独立站与外部系统交互的门户，不仅关乎数据的保密性、完整性和可用性，还直接影响到用户的隐私保护、企业的声誉以及业务的可
  • 电商数据高效处理，离不开API接口技术的支持 FBAPI3713612741 大数据python爬虫oneapi人工智能
    在当今数字化、信息化高速发展的时代，电子商务（电商）行业以其便捷性、高效性和全球化特点，成为了推动经济发展的重要力量。电商平台的成功运作，离不开大量数据的处理与分析，而高效的数据处理则是电商平台得以持续优化用户体验、提升运营效率、实现精准营销的关键。在这一过程中，API（ApplicationProgrammingInterface，应用程序编程接口）接口技术发挥了至关重要的作用。本文将从API接
  • 电商独立站如何利用API接口实现数据驱动决策 FBAPI3713612741 python爬虫oneapi网络
    在电商行业的快速发展中，独立站作为品牌直面消费者的主要渠道，其运营效率和决策准确性至关重要。API接口（ApplicationProgrammingInterface，应用程序编程接口）作为数据交互的标准方式，在电商独立站中扮演着至关重要的角色。它不仅打破了信息孤岛，实现了数据的集中和统一管理，还为电商业务的高效运行和持续创新提供了坚实的支撑。本文将深入探讨API接口技术如何助力电商独立站实现数据
  • 数字时代信息安全的关键之道—零信任架构 AZone架构院 架构
    随着数字化转型的迅猛推进，信息安全面临的挑战也日益复杂和严峻。传统的网络边界已经逐渐模糊，企业数据流动的复杂性和敏感性也随之增加。在此背景下，零信任架构（ZeroTrustArchitecture，ZTA）应运而生，成为保护企业数字资产的首选策略。TheOpenGroup发布了《零信任的核心原则》，详细阐述了零信任架构的核心原则、应用场景以及技术实现，为企业提供了全面的参考指南。01零信任架构的核
  • 掌握 npm 登录与登出：使用 npm login 和 npm logout 命令 2401_85743969 npm前端node.js
    npm（NodePackageManager）是JavaScript编程语言的包管理器，广泛用于Node.js项目中管理依赖。npm提供了丰富的功能，包括包的安装、版本管理、发布等。使用npmlogin和npmlogout命令可以与npm仓库进行身份验证和登出操作。本文将详细介绍这两个命令的使用方法和相关场景。一、npmlogin命令的使用npmlogin命令用于在终端中向npm仓库进行身份验证，
  • Elasticsearch 索引生命周期管理：优化大数据存储 静谧星光c 大数据elasticsearchjenkins
    Elasticsearch索引生命周期管理：优化大数据存储在处理大规模数据时，存储和检索效率是至关重要的。Elasticsearch是一款功能强大的搜索和分析引擎，它的索引生命周期管理功能可以帮助我们优化大数据的存储和查询性能。本文将介绍Elasticsearch索引生命周期管理的概念，并提供相应的源代码示例。索引生命周期管理（IndexLifecycleManagement，简称ILM）是Ela
  • Oracle架构之用户，权限，角色讲解 爱吃牛肉的大老虎 #Oracleoracle架构ffmpeg
    文章目录1用户1.1简介1.1.1定义1.1.2用户相关信息1.1.2.1用户默认表空间1.1.2.2用户临时表空间1.1.2.3用户资源文件1.1.2.4用户表空间限额1.1.2.5用户管理有关的数据字典1.1.3用户、模式、模式对象1.1.4实例模式SCOTT1.1.5各个角色区别1.2用户管理1.2.1创建用户1.2.2修改用户1.2.3用户监控1.2.4删除用户1.3账户管理1.3.1限制
  • 无线移动通信的关键技术：SOA,WebX.0,Widget/Mashup,P2P/P4P,SaaS/云计算等架构和MIP,SIP,RTSP (实时流协议)等，定义和特点 晓北斗NorSnow 多媒体考试架构
    以下是对无线移动通信中一些关键技术的定义和特点的整理，以表格形式呈现：技术/架构定义特点SOA（面向服务的架构）一种将应用程序划分为自治的、可重用的、可组合的服务，并通过服务之间的松耦合和标准化的接口进行通信的架构模式1.服务导向，将应用程序看作一组互相独立的服务。2.可重用性高，服务可以被不同的应用程序和业务场景复用。3.松耦合，服务之间通过标准化的接口进行通信，不依赖具体的实现细节。4.灵活性
  • Js函数返回值 _wy_ jsreturn
    一、返回控制与函数结果，语法为：return 表达式;作用: 结束函数执行，返回调用函数，而且把表达式的值作为函数的结果 二、返回控制语法为：return;作用: 结束函数执行，返回调用函数，而且把undefined作为函数的结果 在大多数情况下,为事件处理函数返回false,可以防止默认的事件行为.例如,默认情况下点击一个<a>元素,页面会跳转到该元素href属性
  • MySQL 的 char 与 varchar bylijinnan mysql
    今天发现，create table 时，MySQL 4.1有时会把 char 自动转换成 varchar 测试举例： CREATE TABLE `varcharLessThan4` ( `lastName` varchar(3) ) ; mysql> desc varcharLessThan4; +----------+---------+------+-
  • Quartz——TriggerListener和JobListener eksliang TriggerListenerJobListenerquartz
    转载请出自出处：http://eksliang.iteye.com/blog/2208624 一.概述 listener是一个监听器对象，用于监听scheduler中发生的事件，然后执行相应的操作；你可能已经猜到了，TriggerListeners接受与trigger相关的事件，JobListeners接受与jobs相关的事件。   二.JobListener监听器  j
  • oracle层次查询 18289753290 oracle；层次查询；树查询
    .oracle层次查询(connect  by) oracle的emp表中包含了一列mgr指出谁是雇员的经理，由于经理也是雇员，所以经理的信息也存储在emp表中。这样emp表就是一个自引用表，表中的mgr列是一个自引用列，它指向emp表中的empno列，mgr表示一个员工的管理者， select   empno,mgr,ename,sal  from e
  • 通过反射把map中的属性赋值到实体类bean对象中 酷的飞上天空 javaee泛型类型转换
    使用过struts2后感觉最方便的就是这个框架能自动把表单的参数赋值到action里面的对象中 但现在主要使用Spring框架的MVC，虽然也有@ModelAttribute可以使用但是明显感觉不方便。 好吧，那就自己再造一个轮子吧。 原理都知道，就是利用反射进行字段的赋值，下面贴代码 主要类如下：   import java.lang.reflect.Field; imp
  • SAP HANA数据存储：传统硬盘的瓶颈问题 蓝儿唯美 HANA
    SAPHANA平台有各种各样的应用场景，这也意味着客户的实施方法有许多种选择，关键是如何挑选最适合他们需求的实施方案。 在 《Implementing SAP HANA》这本书中，介绍了SAP平台在现实场景中的运作原理，并给出了实施建议和成功案例供参考。本系列文章节选自《Implementing SAP HANA》，介绍了行存储和列存储的各自特点，以及SAP HANA的数据存储方式如何提升空间压
  • Java Socket 多线程实现文件传输 随便小屋 javasocket
            高级操作系统作业，让用Socket实现文件传输，有些代码也是在网上找的，写的不好，如果大家能用就用上。 客户端类：   package edu.logic.client; import java.io.BufferedInputStream; import java.io.Buffered
  • java初学者路径 aijuans java
    学习Java有没有什么捷径?要想学好Java，首先要知道Java的大致分类。自从Sun推出Java以来，就力图使之无所不包，所以Java发展到现在，按应用来分主要分为三大块：J2SE,J2ME和J2EE,这也就是Sun ONE(Open Net Environment)体系。J2SE就是Java2的标准版，主要用于桌面应用软件的编程；J2ME主要应用于嵌入是系统开发，如手机和PDA的编程；J2EE
  • APP推广 aoyouzi APP推广
    一，免费篇 1，APP推荐类网站自主推荐 最美应用、酷安网、DEMO8、木蚂蚁发现频道等,如果产品独特新颖，还能获取最美应用的评测推荐。PS：推荐简单。只要产品有趣好玩，用户会自主分享传播。例如足迹APP在最美应用推荐一次，几天用户暴增将服务器击垮。 2，各大应用商店首发合作 老实盯着排期，多给应用市场官方负责人献殷勤。 3，论坛贴吧推广 百度知道，百度贴吧，猫扑论坛，天涯社区，豆瓣（
  • JSP转发与重定向 百合不是茶 jspservletJava Webjsp转发
      在servlet和jsp中我们经常需要请求,这时就需要用到转发和重定向;   转发包括;forward和include     例子;forwrad转发;  将请求装法给reg.html页面   关键代码;    req.getRequestDispatcher("reg.html
  • web.xml之jsp-config bijian1013 javaweb.xmlservletjsp-config
    1.作用：主要用于设定JSP页面的相关配置。 2.常见定义： <jsp-config> <taglib> <taglib-uri>URI(定义TLD文件的URI,JSP页面的tablib命令可以经由此URI获取到TLD文件)</tablib-uri> <taglib-location> TLD文件所在的位置
  • JSF2.2 ViewScoped Using CDI sunjing CDIJSF 2.2ViewScoped
    JSF 2.0 introduced annotation @ViewScoped; A bean annotated with this scope maintained its state as long as the user stays on the same view(reloads or navigation - no intervening views). One problem w
  • 【分布式数据一致性二】Zookeeper数据读写一致性 bit1129 zookeeper
    很多文档说Zookeeper是强一致性保证，事实不然。关于一致性模型请参考http://bit1129.iteye.com/blog/2155336    Zookeeper的数据同步协议 Zookeeper采用称为Quorum Based Protocol的数据同步协议。假如Zookeeper集群有N台Zookeeper服务器(N通常取奇数，3台能够满足数据可靠性同时
  • Java开发笔记 白糖_ java开发
    1、Map<key,value>的remove方法只能识别相同类型的key值   Map<Integer,String> map = new HashMap<Integer,String>(); map.put(1,"a"); map.put(2,"b"); map.put(3,"c"
  • 图片黑色阴影 bozch 图片
     .event{ padding:0;    width:460px;    min-width: 460px;    border:0px solid #e4e4e4;    height: 350px;    min-heig
  • 编程之美-饮料供货-动态规划 bylijinnan 动态规划
    import java.util.Arrays; import java.util.Random; public class BeverageSupply { /** * 编程之美 饮料供货 * 设Opt（V’，i）表示从i到n-1种饮料中，总容量为V’的方案中，满意度之和的最大值。 * 那么递归式就应该是：Opt（V’，i）=max{ k * Hi+Op
  • ajax大参数（大数据）提交性能分析 chenbowen00 WebAjax框架浏览器prototype
    近期在项目中发现如下一个问题 项目中有个提交现场事件的功能，该功能主要是在web客户端保存现场数据（主要有截屏，终端日志等信息）然后提交到服务器上方便我们分析定位问题。客户在使用该功能的过程中反应点击提交后反应很慢，大概要等10到20秒的时间浏览器才能操作，期间页面不响应事件。 根据客户描述分析了下的代码流程，很简单，主要通过OCX控件截屏，在将前端的日志等文件使用OCX控件打包，在将之转换为
  • [宇宙与天文]在太空采矿,在太空建造 comsci
         我们在太空进行工业活动...但是不太可能把太空工业产品又运回到地面上进行加工,而一般是在哪里开采,就在哪里加工,太空的微重力环境,可能会使我们的工业产品的制造尺度非常巨大....      地球上制造的最大工业机器是超级油轮和航空母舰,再大些就会遇到困难了,但是在空间船坞中,制造的最大工业机器,可能就没
  • ORACLE中CONSTRAINT的四对属性 daizj oracleCONSTRAINT
    ORACLE中CONSTRAINT的四对属性 summary:在data migrate时,某些表的约束总是困扰着我们,让我们的migratet举步维艰,如何利用约束本身的属性来处理这些问题呢?本文详细介绍了约束的四对属性: Deferrable/not deferrable, Deferred/immediate, enalbe/disable, validate/novalidate,以及如
  • Gradle入门教程 dengkane gradle
    一、寻找gradle的历程 一开始的时候，我们只有一个工程，所有要用到的jar包都放到工程目录下面，时间长了，工程越来越大，使用到的jar包也越来越多，难以理解jar之间的依赖关系。再后来我们把旧的工程拆分到不同的工程里，靠ide来管理工程之间的依赖关系，各工程下的jar包依赖是杂乱的。一段时间后，我们发现用ide来管理项程很不方便，比如不方便脱离ide自动构建，于是我们写自己的ant脚本。再后
  • C语言简单循环示例 dcj3sjt126com c
    # include <stdio.h> int main(void) { int i; int count = 0; int sum = 0; float avg; for (i=1; i<=100; i++) { if (i%2==0) { count++; sum += i; } } avg
  • presentModalViewController 的动画效果 dcj3sjt126com controller
    系统自带(四种效果)： presentModalViewController模态的动画效果设置：     [cpp]  view plain copy   UIViewController *detailViewController = [[UIViewController al
  • java 二分查找 shuizhaosi888 二分查找java二分查找
    需求：在排好顺序的一串数字中，找到数字T   一般解法：从左到右扫描数据，其运行花费线性时间O(N)。然而这个算法并没有用到该表已经排序的事实。 /** * * @param array * 顺序数组 * @param t * 要查找对象 * @return */ public stati
  • Spring Security（07）——缓存UserDetails 234390216 ehcache缓存Spring Security
           Spring Security提供了一个实现了可以缓存UserDetails的UserDetailsService实现类，CachingUserDetailsService。该类的构造接收一个用于真正加载UserDetails的UserDetailsService实现类。当需要加载UserDetails时，其首先会从缓存中获取，如果缓存中没
  • Dozer 深层次复制 jayluns VOmavenpo
    最近在做项目上遇到了一些小问题，因为架构在做设计的时候web前段展示用到了vo层，而在后台进行与数据库层操作的时候用到的是Po层。这样在业务层返回vo到控制层，每一次都需要从po-->转化到vo层，用到BeanUtils.copyProperties(source, target)只能复制简单的属性，因为实体类都配置了hibernate那些关联关系，所以它满足不了现在的需求，但后发现还有个很
  • CSS规范整理（摘自懒人图库） a409435341 htmlUIcss浏览器
       刚没事闲着在网上瞎逛，找了一篇CSS规范整理，粗略看了一下后还蛮有一定的道理，并自问是否有这样的规范，这也是初入前端开发的人一个很好的规范吧。 一、文件规范 1、文件均归档至约定的目录中。 具体要求通过豆瓣的CSS规范进行讲解： 所有的CSS分为两大类：通用类和业务类。通用的CSS文件，放在如下目录中： 基本样式库 /css/core
  • C++动态链接库创建与使用 你不认识的休道人 C++dll
    一、创建动态链接库 1.新建工程test中选择”MFC [dll]”dll类型选择第二项"Regular DLL With MFC shared linked"，完成 2.在test.h中添加 extern “C” 返回类型 _declspec(dllexport)函数名(参数列表); 3.在test.cpp中最后写 extern “C” 返回类型 _decls
  • Android代码混淆之ProGuard rensanning ProGuard
    Android应用的Java代码，通过反编译apk文件（dex2jar、apktool）很容易得到源代码，所以在release版本的apk中一定要混淆一下一些关键的Java源码。 ProGuard是一个开源的Java代码混淆器（obfuscation）。ADT r8开始它被默认集成到了Android SDK中。 官网： http://proguard.sourceforge.net/
  • 程序员在编程中遇到的奇葩弱智问题 tomcat_oracle jquery编程ide
    　　现在收集一下：       　　排名不分先后，按照发言顺序来的。   1、Jquery插件一个通用函数一直报错，尤其是很明显是存在的函数，很有可能就是你没有引入jquery。。。或者版本不对 2、调试半天没变化：不在同一个文件中调试。这个很可怕，我们很多时候会备份好几个项目，改完发现改错了。有个群友说的好：   在汤匙
  • 解决maven-dependency-plugin (goals "copy-dependencies","unpack") is not supported xp9802 dependency
    解决办法：在plugins之前添加如下pluginManagement，二者前后顺序如下：   [html]  view plain copy   <build>           <pluginManagement
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他