格式化小拓
格式化小拓

day40-3d Background Boxes（3D背景盒子转换）

50 天学习 50 个项目 - HTMLCSS and JavaScript

day40-3d Background Boxes（3D背景盒子转换）

效果

day40-3d Background Boxes（3D背景盒子转换）_第1张图片
day40-3d Background Boxes（3D背景盒子转换）_第2张图片
day40-3d Background Boxes（3D背景盒子转换）_第3张图片

index.html

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>3D Boxes Backgroundtitle>
    <link rel="stylesheet" href="style.css" />
head>

<body>
    
    <button id="btn" class="magic">变换 button>
    
    <div id="boxes" class="boxes big">div>
    <script src="script.js">script>
body>

html>

style.css

/* 引入字体 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');

* {
    /* 内减模式 width=border+padding+内容的宽度 */
    box-sizing: border-box;
}

body {
    background-color: #fafafa;
    font-family: 'Roboto', sans-serif;
    /* 子元素竖直居中排列 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
}

/* 按钮 */
.magic {
    background-color: #f9ca24;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    border: 0;
    border-radius: 3px;
    font-size: 16px;
    padding: 12px 20px;
    cursor: pointer;
    /* 固定定位 距离窗口 1rem */
    position: fixed;
    top: 1rem;
    /* 字间距 */
    letter-spacing: 1px;
    /* 底部阴影 */
    box-shadow: 0 3px rgba(249, 202, 36, 0.5);
    z-index: 100;
    /* 去除按钮元素的默认外边框 */
    outline: none;
}

/* 伪类选择器 点击按钮 按钮无阴影 向下移动 */
.magic:active {
    box-shadow: none;
    transform: translateY(2px);
}

/* 3D容器 */
.boxes {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    height: 500px;
    width: 500px;
    position: relative;
    /* 默认下是all */
    transition: 0.4s ease;
}

/* 小盒子显示时，宽高变大 */
.boxes.big {
    width: 600px;
    height: 600px;
}

/* 大盒子内的小盒子 */
.boxes.big .box {
    transform: rotateZ(360deg);
}

/* 小盒子 */
.box {
    background-image: url('https://media.giphy.com/media/EZqwsBSPlvSda/giphy.gif');
    background-repeat: no-repeat;
    background-size: 500px 500px;
    position: relative;
    /* 小盒子的大小会影响后续js生成小盒子 */
    height: 125px;
    width: 125px;
    transition: 0.4s ease;
}

/* 小盒子右侧的影音由伪元素实现 */
.box::after {
    content: '';
    background-color: #f6e58d;
    position: absolute;
    top: 8px;
    right: -15px;
    height: 100%;
    width: 15px;
    /* 向下倾斜45度 */
    transform: skewY(45deg);
}

/* 底部阴影 */
.box::before {
    content: '';
    background-color: #f9ca24;
    position: absolute;
    bottom: -15px;
    left: 8px;
    height: 15px;
    width: 100%;
    /* 向右倾斜45度 */
    transform: skewX(45deg);
}

script.js


// 重点 flex position transform 伪元素 transition transform: skewY(45deg); transform: skewX(45deg);
// 1.获取元素节点
const boxesContainer = document.getElementById('boxes')//大盒子容器
const btn = document.getElementById('btn')//按钮
// 2.绑定点击事件 通过切换大盒子的big类，即宽高来切换显示效果
btn.addEventListener('click', () => boxesContainer.classList.toggle('big'))
// 函数：创建小盒子
function createBoxes() {
    // 4*4
    for (let i = 0; i < 4; i++) {
        for (let j = 0; j < 4; j++) {
            const box = document.createElement('div')
            box.classList.add('box')
            // 设置图片的位置，即显示图片的哪块区域
            box.style.backgroundPosition = `${-j * 125}px ${-i * 125}px`
            boxesContainer.appendChild(box)
        }
    }
}
// 初始化创建小盒子
createBoxes()

你可能感兴趣的:(50天50个小demo前端,3d,html5,css3,javascript,前端)

  • letcode hot 100 第5题 int main* letcode热题100leetcode数据结构c++算法
    letcodehot100第5题题目盛最多水的容器给定一个长度为n的整数数组height。有n条垂线，第i条线的两个端点是(i,0)和(i,height[i])。找出其中的两条线，使得它们与x轴共同构成的容器可以容纳最多的水。返回容器可以储存的最大水量。说明：你不能倾斜容器。示例1：输入：[1,8,6,2,5,4,8,3,7]输出：49解释：图中垂直线代表输入数组[1,8,6,2,5,4,8,3,
  • CCF-CSP第27次认证第一题——如此编码【NA公式推导】 CS战士plus CCFCSP#第一题ccfcspC++学习
    CCF-CSP第27次认证第一题——如此编码官网题目链接时间限制：1.0秒空间限制：512MiB下载题目目录（样例文件）题目背景某次测验后，顿顿老师在黑板上留下了一串数字23333便飘然而去。凝望着这个神秘数字，小P同学不禁陷入了沉思……题目描述已知某次测验包含n道单项选择题，其中第i题（1≤≤1≤i≤n）有ai个选项，正确选项为bi，满足≥2ai≥2且0≤<0≤bi<ai。比如说，ᵅ
  • ESP32 小智 AI 机器人入门教程从原理到实现（自己云端部署） 与光同尘 大道至简 人工智能机器人python人机交互githubvisualstudio单片机
    此博客为一篇针对初学者的详细教程，涵盖小智AI机器人的原理、硬件准备、软件环境搭建、代码实现、云端部署以及优化扩展。文章结合了现有的网络资源，取长补短，确保内容易于理解和操作。简介：本教程将指导初学者使用ESP32微控制器开发一个简单的语音对话机器人“小智”。我们将介绍所需的基础原理、硬件准备、软件环境搭建，以及如何编写代码实现语音唤醒和与云端大模型的对接。通过本教程，即使没有深厚的AI或嵌入式经
  • 我与DeepSeek读《大型网站技术架构》（3） 诺亚凹凸曼 架构
    大型网站架构的核心要素《大型网站技术架构：核心原理与案例分析》第三章聚焦于大型网站架构的核心要素，从技术维度剖析了构建高可用、高性能、可扩展系统的关键设计方向。1.五大核心架构要素(1)性能（Performance）目标：快速响应用户请求，优化用户体验。关键策略：前端优化：CDN加速静态资源、合并压缩JS/CSS、浏览器缓存。服务端优化：缓存（Redis/Memcached）、异步处理（消息队列）
  • 算法与数据结构（回文数） a_j58 数据结构
    题目思路对于这个我的第一想法就是转换为字符串然后判断字符串是否为回文，它会消耗额外的地址空间。还有一种想法就是将数字反转并判断是否为回文，但可能需要处理数字溢出的问题。若要避免出现数字溢出的问题，我们可以只反转它的一半，若前半部分和后半部分相同，则说明它是一个回文数。如123321，我们将它的后半部分反转，得到123，它与前半部分相同，说明它是一个回文数。算法首先，我们可以先考虑到它的一些临界情况
  • Manus联创澄清：我们并未使用MCP技术 耶耶Norsea 网络杂烩人工智能
    摘要近日，Manus联创针对外界关于其产品可能涉及“沙盒越狱”的疑问进行了正式回应。公司明确表示并未使用Anthropic的MCP（模型上下文协议）技术，并强调MCP是一个旨在标准化应用程序与大型语言模型（LLM）之间上下文交互的开放标准。此外，Manus联创宣布了开源计划，以增强透明度和社区参与。季逸超也确认他们没有采用MCP技术，进一步澄清了相关质疑。关键词沙盒越狱,MCP技术,开源计划,透明
  • Shodan的概述与安装 耶耶Norsea Shodan安全web安全python
    一、Shodan简述Shodan是一个独特的网络搜索引擎，它专门针对互联网上的设备进行不间断扫描，并将扫描结果存储起来，供用户检索。这使得Shodan能够快速搜索到网络中的各种设备和服务，例如Web服务器、路由器、摄像头、物联网设备等，甚至包括某些已知漏洞的暴露设备。Shodan的主要用途：设备搜索：通过Shodan，你可以搜索到全球范围内连接到互联网的各种设备，如企业服务器、摄像头、智能家居设备
  • C# 巩固记录（五） 休#威廉姆斯 C#c#开发语言
    C#构造函数实例构造函数构造函数是类中特殊的成员函数，它的名称与它所在类的名称相同，并且没有返回值。当我们使用new关键字创建类的对象时，可以使用实例构造函数来创建和初始化类中的任意成员属性。静态构造函数静态构造函数用于初始化类中的静态数据或执行仅需执行一次的特定操作。静态构造函数将在创建第一个实例或引用类中的静态成员之前自动调用。静态构造函数具有以下特性：静态构造函数不使用访问权限修饰符修饰或不
  • 斐波拉契数列 RichardK. c++学习
    题目描述给定正整数n，求斐波那契数列的第n项F(n)。令F(n)表示斐波那契数列的第n项，它的定义是：当n=1时，F(n)=1；当n=2时，F(n)=1；当n>2时，F(n)=F(n−1)+F(n−2)。大数据版：斐波拉契数列-大数据版输入描述一个正整数n（1≤n≤104）。输出描述斐波那契数列的第n项F(n)。由于结果可能很大，因此将结果对10007取模后输出。样例1输入1输出1解释边界定义：F
  • JavaScript模块化开发的演进历程 IronKee JavaScriptjavascript前端
    写在前面的话js模块化历程记录了js模块化思想的诞生与变迁历史不是过去，历史正在上演，一切终究都会成为历史拥抱变化，面向未来延伸阅读-JavaScript诞生（这也解释了JS为何一开始没有模块化）JavaScript因为互联网而生，紧随着浏览器的出现而问世1990年底，欧洲核能研究组织（CERN）科学家Tim，发明了万维网（WorldWideWeb），最早的网页只能在操作系统的终端里浏览，非常不方
  • DSP28335 ADC模块SOC触发机制详解（附完整代码） DOMINICHZL dsp单片机嵌入式硬件
    [摘要]本文基于TITMS320F28335芯片，深入讲解其ADC模块的SOC（Start-of-Conversion）触发机制，涵盖软件触发、ePWM硬件触发等模式，并提供完整的配置代码与实验验证方法。1.ADC模块与SOC概述DSP28335的ADC模块为12位精度、16通道模数转换器，支持8个独立的SOC（Start-of-Conversion）配置。每个SOC可独立配置以下参数：触发源（软
  • 提升空间卫生，稀土抗菌剂让铺地材料更健康 金士镧新材料有限公司 全文检索科技生活安全
    一、稀土元素的抗菌特性稀土元素包括镧系元素及其他一些具有特定化学性质的元素（如钪、钇等），这些元素具有较强的催化性和化学活性，能有效抑制细菌的生长和繁殖。稀土元素尤其是铈、钕、钬、钇等，因其在抗菌方面的特殊作用，能够有效杀灭多种常见的细菌和真菌，并能防止细菌的耐药性产生。稀土抗菌剂的抗菌抑菌机理有四个层面:1.稀土化合物与细菌表面静电结合，造成直接的杀灭；2.基于稀土的光催化半导体特性，通过光生氧
  • Redis缓存穿透、雪崩、击穿的解决方案 Fanxt_Ja 缓存redis数据库javaspringcloudintellij-idea
    在大型业务系统或用户活跃量较大的环境中，用户往往对某些数据的访问量会非常大，为了保护数据库而引入了缓存Redis，但是其也会出现一些问题，而导致严重的后果，比如缓存穿透、缓存雪崩、缓存击穿，下面我将针对这几个问题给出解决方案。1.缓存穿透缓存穿透发生的原因就是“用户”访问一个缓存中不存在，数据库中也不存在的数据。当这种请求量非常大时，就会对数据库造成非常大的压力。为了解决这个问题，通常有两种解决方
  • 大数据技术生态圈：Hadoop、Hive、Spark的区别和关系 雨中徜徉的思绪漫溢 大数据hadoophive
    大数据技术生态圈：Hadoop、Hive、Spark的区别和关系在大数据领域中，Hadoop、Hive和Spark是三个常用的开源技术，它们在大数据处理和分析方面发挥着重要作用。虽然它们都是为了处理大规模数据集而设计的，但它们在功能和使用方式上存在一些区别。本文将详细介绍Hadoop、Hive和Spark的区别和关系，并提供相应的源代码示例。Hadoop：Hadoop是一个用于分布式存储和处理大规
  • 【30天玩转python】项目实战：从零开始开发一个Python项目 爱技术的小伙子 30天玩转pythonlinux运维服务器
    项目实战：从零开始开发一个Python项目在学习Python的过程中，开发一个完整的项目是非常重要的实战练习。它不仅能够帮助你巩固所学的知识，还能提高实际编程能力。本文将带领你从零开始开发一个Python项目，介绍从项目规划、环境搭建、代码实现到项目发布的完整过程。我们将以一个简单的“任务管理系统”为例，逐步讲解如何构建、测试和优化这个项目。1.项目规划1.1项目简介我们将开发一个基于命令行的任务
  • 卡尔曼滤波算法从理论到实践：在STM32中的嵌入式实现 DOMINICHZL STM32算法stm32嵌入式硬件
    摘要：卡尔曼滤波（KalmanFilter）是传感器数据融合领域的经典算法，在姿态解算、导航定位等嵌入式场景中广泛应用。本文将从公式推导、代码实现、参数调试三个维度深入解析卡尔曼滤波，并给出基于STM32硬件的完整工程案例。一、卡尔曼滤波核心思想1.1什么是卡尔曼滤波？卡尔曼滤波是一种最优递归估计算法，通过融合预测值（系统模型）与观测值（传感器数据），在噪声干扰环境下实现对系统状态的动态估计。其核
  • ffplay 使用文档介绍 码流怪侠 FFmpegffplay播放器音视频直播转码
    ffplayffplay是一个简单的媒体播放器，它是FFmpeg项目的一部分。FFmpeg是一个广泛使用的多媒体框架，能够解码、编码、转码、复用、解复用、流化、过滤和播放几乎所有类型的媒体文件。ffplay主要用于测试和调试，因为它提供了一个命令行界面，可以方便地查看媒体文件的详细信息，如视频帧、音频波形等。它支持多种视频和音频格式，并且可以实时显示解码过程中的统计信息。使用文档原文地址：http
  • flink+kafka实现流数据处理学习 上海研博数据 java
    在应用系统的建设过程中，通常都会遇到需要实时处理数据的场景，处理实时数据的框架有很多，本文将以一个示例来介绍flink+kafka在流数据处理中的应用。1、概念介绍flink：是一个分布式、高可用、高可靠的大数据处理引擎，提供了一种高效、可靠、可扩展的方式来处理和分析实时数据。kafka：是用于构建实时数据管道和流应用程序并具有横向扩展，容错，wickedfast（变态快）等优点的一种消息中间件。
  • Python从0到100（七十六）：计算机视觉-直方图和自适应直方图均衡化 是Dream呀 python计算机视觉开发语言
    前言：零基础学Python：Python从0到100最新最全教程。想做这件事情很久了，这次我更新了自己所写过的所有博客，汇集成了Python从0到100，共一百节课，帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、计算机视觉、机器学习、神经网络以及人工智能相关知识，成为学习学习和学业的先行者！欢迎大家订阅专栏：零基础学Python：Python从0到100最新
  • Elasticsearch 入门教学：从零开始掌握分布式搜索引擎 格子先生Lab 搜索引擎elasticsearch分布式
    引言Elasticsearch是一个开源的分布式搜索引擎，基于ApacheLucene构建，能够实现近乎实时的数据搜索和分析。它广泛应用于日志分析、全文搜索、数据可视化等场景。本文将带你从零开始学习Elasticsearch，掌握其基本概念、安装配置、数据操作及搜索功能。1.Elasticsearch简介1.1什么是Elasticsearch？Elasticsearch是一个分布式的RESTful
  • MySql索引使用 沐千熏 mysql数据库
    索引类型#主键索引：PRIMARY这设立主键后数据库自动建立索引，InnoDB为聚簇索引，主键索引列不能为空（NUll）；#唯一索引：UNIQUE索引列的值必须唯一。可以为空值，但是必须只有一个；#普通索引（组合索引）：NORMAL也称为非唯一索引，允许重复值和NULL值。一个索引可以包含多个列，多个列共同组成一个复杂的索引；#全文索引：FULLTEXTFullText（MySQL5.7之前，只有
  • 【LLM】预训练的具体流程 FOUR_A LLMpython人工智能深度学习大模型
    分词器训练预训练模型：就像你已经学会了一些基础知识的“大脑”，我们可以在这个基础上继续学习新东西。比如，有些模型已经学会了英语，但中文学得不够好。中文预训练：为了让这个“大脑”更好地理解中文，我们需要用大量的中文数据继续训练它。分词器（Tokenizer）：它的作用是把一句话拆分成一个个小单元（比如词语或字）。比如，“我喜欢学习”会被拆成“我/喜欢/学习”。这些拆分后的单元会被转换成数字，方便模型
  • android屏幕旋转生命周期,Activity、Fragment生命周期---横竖屏切换的生命周期 老K先生 android屏幕旋转生命周期
    先贴出一张大家众所周知activity流程图onCreate():创建Activity调用，用于Activity的初始化，还有个Bundle类型的参数，可以访问以前存储的状态。onStart():Activity在屏幕上对用户可见时调用，但还不可与用户交互onRestart():在activity停止后，在再次启动之前被调用。onResume():Activity开始和用户交互的时候调用，这时该A
  • 大数据面试之路 (一) 数据倾斜 愿与狸花过一生 大数据面试职场和发展
    记录大数据面试历程数据倾斜大数据岗位，数据倾斜面试必问的一个问题。一、数据倾斜的表现与原因表现某个或某几个Task执行时间过长，其他Task快速完成。Spark/MapReduce作业卡在某个阶段（如reduce阶段），日志显示少数Task处理大量数据。资源利用率不均衡（如CPU、内存集中在某些节点）。常见场景Key分布不均：如某些Key对应的数据量极大（如用户ID为空的记录、热点事件）。数据分区
  • python递推法_如何使用Python递归函数中的递推？ 热茶走 python递推法
    我们大家都知道，一个函数可能存在多种不同的用法，很少是有函数只针对一个方式，那么基于一种函数，我们肯定要了解多个方式，今日针对递归函数里的递推内容给大家介绍哦~递归是什么？是指函数/过程/子程序在运行过程序中直接或间接调用自身而产生的重入现象。下面是个人理解：递归就是在函数内部调用自己的函数被称之为递归。实例：#直接调用自己：deffunc:print('fromfunc')funcFunc#间接
  • 递推和递归_一文学会递归递推 HR刀姐 递推和递归
    递归算法和递推算法无论是在ACM竞赛还是项目工程上都有着极为广泛的应用，但想要完全掌握两者的思想并不容易，对于刚刚接触编程的人来说更是这样，我在初次接触递归递推时就吃了很多的苦头，除了当时对编程语言不太熟悉之外，最大的原因就是难以理解其中的思想，本文将二者结合代码分别讲解，力求以"理论+实践"的方式使读者明白两种算法。一箭双雕，一文双递。一.递归和递推的区别学习递归递推的一个容易遇到的问题就是混淆
  • 飞控简析-从入门到跑路序章 skyman满天星 飞控简析pixhawk无人机开源飞控
    一、序言茫茫天数此中求，世道兴衰不自由万万千千说不尽，不如推背去归休本人搞飞控差不多两年了，从一开始什么都不懂的真·小白，到现在的高级小白，我已经经历了太多太多。因为感觉飞控是一个比较小众的产品，所以国内的资料并不是很完善，有些文章重复太多了，而且每个人看问题的视角是不一样的。我虽然只是个半瓶水，但是也想为国内的飞控圈子做一点贡献。二、学飞控有没有前途这个话题有点小，大一点的问法应该是学嵌入式有没
  • 固定表头、首列 —— uniapp、vue 项目 菲力蒲LY vue.jsuni-app前端
    项目实地：也可以在【微信小程序】搜索体验：xny.handbook另一个体验项目：官网一、效果展示二、代码展示（1）html部分股票代码建议投金额实际投金额建议股数实际股数◎原单价涨出-单价↑跌出+单价↓+○预赚+●实赚-○预赔-●实赔操作{{item.stockCode}}{{item.calculAdvsIvsMoney}}{{item.calculRealIvsMoney}}{{item.t
  • python递推式_Python 递推式构造列表(List Comprehensions) man One python递推式
    你需要构造一个新的列表,列表中的元素是从一个已知列表中的元素计算而得到的.比如你要创建一个列表,里面的元素是另一个列表中的元素加23后得到的.使用递推式构造列表是最理想的方法:thenewlist=[x+23forxintheoldlist]如果你希望用一个列表中大于5的元素构造一个新的列表,使用递推式也是很方便的:thenewlist=[xforxintheoldlistifx>5]如果你希望将
  • ZooKeeper学习总结（1）——ZooKeeper入门介绍 一杯甜酒 ZooKeeper学习总结Zookeeper
    1.概述Zookeeper是Hadoop的一个子项目，它是分布式系统中的协调系统，可提供的服务主要有：配置服务、名字服务、分布式同步、组服务等。它有如下的一些特点：简单Zookeeper的核心是一个精简的文件系统，它支持一些简单的操作和一些抽象操作，例如，排序和通知。丰富Zookeeper的原语操作是很丰富的，可实现一些协调数据结构和协议。例如，分布式队列、分布式锁和一组同级别节点中的“领导者选举
  • 矩阵求逆（JAVA）初等行变换 qiuwanchi 矩阵求逆（JAVA）
    package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(初等行变换) * @author 邱万迟 *
  • JDK timer antlove javajdkschedulecodetimer
    1.java.util.Timer.schedule(TimerTask task, long delay)：多长时间（毫秒）后执行任务 2.java.util.Timer.schedule(TimerTask task, Date time)：设定某个时间执行任务 3.java.util.Timer.schedule(TimerTask task, long delay,longperiod
  • JVM调优总结 -Xms -Xmx -Xmn -Xss coder_xpf jvm应用服务器
    堆大小设置JVM 中最大堆大小有三方面限制：相关操作系统的数据模型（32-bt还是64-bit）限制；系统的可用虚拟内存限制；系统的可用物理内存限制。32位系统下，一般限制在1.5G~2G；64为操作系统对内存无限制。我在Windows Server 2003 系统，3.5G物理内存，JDK5.0下测试，最大可设置为1478m。 典型设置： java -Xmx
  • JDBC连接数据库 Array_06 jdbc
    package Util; import java.sql.Connection; import java.sql.DriverManager; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; public class JDBCUtil { //完
  • Unsupported major.minor version 51.0（jdk版本错误） oloz java
    java.lang.UnsupportedClassVersionError: cn/support/cache/CacheType : Unsupported major.minor version 51.0 (unable to load class cn.support.cache.CacheType) at org.apache.catalina.loader.WebappClassL
  • 用多个线程处理1个List集合 362217990 多线程threadlist集合
      昨天发了一个提问，启动5个线程将一个List中的内容，然后将5个线程的内容拼接起来，由于时间比较急迫，自己就写了一个Demo，希望对菜鸟有参考意义。。 import java.util.ArrayList; import java.util.List; import java.util.concurrent.CountDownLatch; public c
  • JSP简单访问数据库 香水浓 sqlmysqljsp
    学习使用javaBean，代码很烂，仅为留个脚印 public class DBHelper { private String driverName; private String url; private String user; private String password; private Connection connection; privat
  • Flex4中使用组件添加柱状图、饼状图等图表 AdyZhang Flex
    1.添加一个最简单的柱状图 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <?xml version= "1.0"&n
  • Android 5.0 - ProgressBar 进度条无法展示到按钮的前面 aijuans android
    在低于SDK < 21 的版本中，ProgressBar 可以展示到按钮前面，并且为之在按钮的中间，但是切换到android 5.0后进度条ProgressBar 展示顺序变化了，按钮再前面，ProgressBar 在后面了我的xml配置文件如下：   [html]  view plain copy   <RelativeLa
  • 查询汇总的sql baalwolf sql
    select   list.listname, list.createtime,listcount from dream_list as list ,   (select listid,count(listid) as listcount  from dream_list_user  group by listid  order by count(
  • Linux du命令和df命令区别 BigBird2012 linux
            1，两者区别             du，disk usage,是通过搜索文件来计算每个文件的大小然后累加，du能看到的文件只是一些当前存在的，没有被删除的。他计算的大小就是当前他认为存在的所有文件大小的累加和。        
  • AngularJS中的$apply，用还是不用？ bijian1013 JavaScriptAngularJS$apply
            在AngularJS开发中，何时应该调用$scope.$apply()，何时不应该调用。下面我们透彻地解释这个问题。         但是首先，让我们把$apply转换成一种简化的形式。         scope.$apply就像一个懒惰的工人。它需要按照命
  • [Zookeeper学习笔记十]Zookeeper源代码分析之ClientCnxn数据序列化和反序列化 bit1129 zookeeper
    ClientCnxn是Zookeeper客户端和Zookeeper服务器端进行通信和事件通知处理的主要类，它内部包含两个类，1. SendThread 2. EventThread， SendThread负责客户端和服务器端的数据通信，也包括事件信息的传输，EventThread主要在客户端回调注册的Watchers进行通知处理   ClientCnxn构造方法   &
  • 【Java命令一】jmap bit1129 Java命令
    jmap命令的用法：   [hadoop@hadoop sbin]$ jmap Usage: jmap [option] <pid> (to connect to running process) jmap [option] <executable <core> (to connect to a
  • Apache 服务器安全防护及实战 ronin47
    此文转自IBM. Apache 服务简介 Web 服务器也称为 WWW 服务器或 HTTP 服务器 (HTTP Server)，它是 Internet 上最常见也是使用最频繁的服务器之一，Web 服务器能够为用户提供网页浏览、论坛访问等等服务。 由于用户在通过 Web 浏览器访问信息资源的过程中，无须再关心一些技术性的细节，而且界面非常友好，因而 Web 在 Internet 上一推出就得到
  • unity 3d实例化位置出现布置？ brotherlamp unity教程unityunity资料unity视频unity自学
    问：unity 3d实例化位置出现布置？ 答：实例化的同时就可以指定被实例化的物体的位置,即 position  Instantiate (original : Object, position : Vector3, rotation : Quaternion) : Object 这样你不需要再用Transform.Position了,   如果你省略了第二个参数(
  • 《重构，改善现有代码的设计》第八章 Duplicate Observed Data bylijinnan java重构
    import java.awt.Color; import java.awt.Container; import java.awt.FlowLayout; import java.awt.Label; import java.awt.TextField; import java.awt.event.FocusAdapter; import java.awt.event.FocusE
  • struts2更改struts.xml配置目录 chiangfai struts.xml
    struts2默认是读取classes目录下的配置文件，要更改配置文件目录，比如放在WEB-INF下，路径应该写成../struts.xml(非/WEB-INF/struts.xml) web.xml文件修改如下：   <filter> <filter-name>struts2</filter-name> <filter-class&g
  • redis做缓存时的一点优化 chenchao051 redishadooppipeline
            最近集群上有个job，其中需要短时间内频繁访问缓存，大概7亿多次。我这边的缓存是使用redis来做的，问题就来了。       首先，redis中存的是普通kv，没有考虑使用hash等解结构，那么以为着这个job需要访问7亿多次redis，导致效率低，且出现很多redi
  • mysql导出数据不输出标题行 daizj mysql数据导出去掉第一行去掉标题
    当想使用数据库中的某些数据，想将其导入到文件中，而想去掉第一行的标题是可以加上-N参数 如通过下面命令导出数据： mysql -uuserName -ppasswd -hhost -Pport -Ddatabase -e " select * from tableName"  > exportResult.txt 结果为： studentid
  • phpexcel导出excel表简单入门示例 dcj3sjt126com PHPExcelphpexcel
    先下载PHPEXCEL类文件，放在class目录下面，然后新建一个index.php文件，内容如下 <?php error_reporting(E_ALL); ini_set('display_errors', TRUE); ini_set('display_startup_errors', TRUE);   if (PHP_SAPI == 'cli') die('
  • 爱情格言 dcj3sjt126com 格言
     1) I love you not because of who you are, but because of who I am when I am with you. 　　 我爱你，不是因为你是一个怎样的人，而是因为我喜欢与你在一起时的感觉。 　　2) No man or woman is worth your tears, and the one who is, won‘t
  • 转 Activity 详解——Activity文档翻译 e200702084 androidUIsqlite配置管理网络应用
    activity 展现在用户面前的经常是全屏窗口，你也可以将 activity 作为浮动窗口来使用（使用设置了 windowIsFloating 的主题），或者嵌入到其他的 activity （使用 ActivityGroup ）中。 当用户离开 activity 时你可以在 onPause() 进行相应的操作 。更重要的是，用户做的任何改变都应该在该点上提交 ( 经常提交到 ContentPro
  • win7安装MongoDB服务 geeksun mongodb
    1.  下载MongoDB的windows版本：mongodb-win32-x86_64-2008plus-ssl-3.0.4.zip，Linux版本也在这里下载，下载地址： http://www.mongodb.org/downloads   2.  解压MongoDB在D:\server\mongodb, 在D:\server\mongodb下创建d
  • Javascript魔法方法:__defineGetter__,__defineSetter__ hongtoushizi js
    转载自： http://www.blackglory.me/javascript-magic-method-definegetter-definesetter/ 在javascript的类中,可以用defineGetter和defineSetter_控制成员变量的Get和Set行为 例如,在一个图书类中,我们自动为Book加上书名符号: function Book(name){
  • 错误的日期格式可能导致走nginx proxy cache时不能进行304响应 jinnianshilongnian cache
    昨天在整合某些系统的nginx配置时，出现了当使用nginx cache时无法返回304响应的情况，出问题的响应头： Content-Type:text/html; charset=gb2312 Date:Mon, 05 Jan 2015 01:58:05 GMT Expires:Mon , 05 Jan 15 02:03:00 GMT Last-Modified:Mon, 05
  • 数据源架构模式之行数据入口 home198979 PHP架构行数据入口
    注：看不懂的请勿踩，此文章非针对java，java爱好者可直接略过。   一、概念 行数据入口（Row Data Gateway）：充当数据源中单条记录入口的对象，每行一个实例。   二、简单实现行数据入口 为了方便理解，还是先简单实现： <?php /** * 行数据入口类 */ class OrderGateway { /*定义元数
  • Linux各个目录的作用及内容 pda158 linux脚本
    1）根目录“/” 　　根目录位于目录结构的最顶层，用斜线（/）表示，类似于 Windows 操作系统的“C:\“，包含Fedora操作系统中所有的目录和文件。 　　2）/bin 　　/bin 　　目录又称为二进制目录，包含了那些供系统管理员和普通用户使用的重要 linux命令的二进制映像。该目录存放的内容包括各种可执行文件，还有某些可执行文件的符号连接。常用的命令有：cp、d
  • ubuntu12.04上编译openjdk7 ol_beta HotSpotjvmjdkOpenJDK
    获取源码 从openjdk代码仓库获取(比较慢) 安装mercurial Mercurial是一个版本管理工具。 sudo apt-get install mercurial 将以下内容添加到$HOME/.hgrc文件中，如果没有则自己创建一个： [extensions] forest=/home/lichengwu/hgforest-crew/forest.py fe
  • 将数据库字段转换成设计文档所需的字段 vipbooks 设计模式工作正则表达式
            哈哈，出差这么久终于回来了，回家的感觉真好！         PowerDesigner的物理数据库一出来，设计文档中要改的字段就多得不计其数，如果要把PowerDesigner中的字段一个个Copy到设计文档中，那将会是一件非常痛苦的事情。
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他