机计复计机
机计复计机

50 Projects 50 Days - Form Input Wave 学习记录

项目地址

Form Input Wave

展示效果

50 Projects 50 Days - Form Input Wave 学习记录_第1张图片
Form Input Wave

实现思路

简单的登陆界面结构，只是在输入框聚焦时标题提示文字会有一个字母逐渐向上跳动的动画效果，这需要针对每个字符单独设置变换的延时，可以考虑在JavaScript中处理这部分逻辑，而不必在HTML中将每个字符都写成一个单独的元素。

实现细节

HTML结构

在container内，主要三个区域：大标题，表单输入以及下面的提示文字，案例里面把提示文字也放到了表单里，这个和放到外面其实没有区别。表单中，两个输入框和一个提交按钮，由于两个输入框还要带上动画文字，因此外面需要包一层div方便定位。

<body>
  <div class="container">
    <h1>Please Loginh1>

    <form>
      <div class="form-control">
        <input type="text" required>
        <label>Emaillabel>
      div>
      <div class="form-control">
        <input type="password" required>
        <label>Passwordlabel>
      div>
      
      <button class="btn">Loginbutton>

      <p class="text">Don't have an account? <a href="#">Registera>p>
    form>
  div>
  <script src="script.js">script>
body>

CSS样式

整体外观和布局

给输入框、按钮和文字添加必要的样式即可得到案例中的显示效果。

.container {
  background-color: rgba(0, 0, 0, 0.4);
  padding: 20px 40px;
  border-radius: 5px;
}

.container h1 {
  text-align: center;
  margin-bottom: 30px;
}

.container a {
  text-decoration: none;
  color: lightblue;
}

.btn {
  cursor: pointer;
  display: inline-block;
  width: 100%;
  background: lightblue;
  padding: 15px;
  font-family: inherit;
  font-size: 16px;
  border: 0;
  border-radius: 5px;
}

.btn:focus {
  outline: 0;
}

.btn:active {
  transform: scale(0.98);
}

.text {
  margin-top: 30px;
}

.form-control {
  position: relative;
  margin: 20px 0 40px;
  width: 300px;
}

.form-control input {
  background-color: transparent;
  border: 0;
  border-bottom: 2px #fff solid;
  display: block;
  width: 100%;
  padding: 15px 0;
  font-size: 18px;
  color: #fff;
}

.form-control input:focus,
.form-control input:valid {
  outline: 0;
  border-bottom-color: lightblue;
}

交互效果

label元素改为绝对定位放到输入框上。
在经过JavaScript逻辑之后label中的字符将会变成一个个span元素，当输入框聚焦或有输入值时，则应该让span元素向上位移一段距离。但注意label和span都是inline元素，不支持transform属性，因此需要把他们变成inline-block。

.form-control label {
  position: absolute;
  top: 15px;
  left: 0;
  pointer-events: none;
}

.form-control label span {
  display: inline-block;
  font-size: 18px;
  min-width: 5px;
  transition: 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.form-control input:focus + label span,
.form-control input:valid + label span {
  color: lightblue;
  transform: translateY(-30px);
}

JavaScript逻辑

改造label内部的元素结构，需要给DOM元素的innerHTML属性重新赋值，读取元素内的文字则需要用到innerText属性。对于从左到右依次动画的效果需要使用到transition-delay属性

const labels = document.querySelectorAll('.form-control label')

labels.forEach(label => {
    label.innerHTML = label.innerText
        .split('')
        .map((letter, idx) => `${idx * 50}ms">${letter}`)
        .join('')
})

总结

  1. 从左到右依次变化的效果需要使用到transition-delay属性。
  2. 使用JavaScript帮忙转化结构，不必重复在HTML中书写。

你可能感兴趣的:(前端基础,学习,css,javascript,html,前端)

  • 有哪些好用的AI工具？(你想要的AI工具都在这) c++
    1.常见应用场景1.1.国内通用大模型模型名称简介官网地址DeepSeek深度求索公司研发的高性能开源模型，以低成本、高推理能力著称，支持数学、代码等复杂任务。https://chat.deepseek.com/豆包字节跳动开发的智能语言模型，基于深度学习技术，支持多种自然语言处理任务。https://www.doubao.com/Kimi月之暗面科技推出的长文本处理AI助手，擅长中英文对话、文件
  • 【SpringBoot】34、SpringBoot整合Redis实现序列化存储Java对象 Asurplus SpringBoot2.x系列redis序列化springbootjava对象
    前面我们已经介绍过【SpringBoot】十七、SpringBoot中整合Redis，我们可以看出，在SpringBoot对Redis做了一系列的自动装配，使用还是非常方便的一、背景1、思考通过我们前面的学习，我们已经可以往Redis中存入字符串，那么我们要往Redis中存入Java对象该怎么办呢？2、方案我们可以将Java对象转化为JSON对象，然后转为JSON字符串，存入Redis，那么我们从
  • 【前端VUE】npm i 出现版本错误等报错 简单直接解决命令 华如锦 2023-FUSE-时代开发本地环境配置前端vue.jsnpm
    前端vuenpmi安装时出现报错原因在新版本的npm中，默认情况下，npminstall遇到冲突的peerDependencies时将失败。解决办法使用--force或--legacy-peer-deps可解决这种情况。--force会无视冲突，并强制获取远端npm库资源，当有资源冲突时覆盖掉原先的版本。--legacy-peer-deps：安装时忽略所有peerDependencies，忽视依赖
  • SpringCloud03—服务治理：SpringCloud Eureka m0_75011249 程序员springcloudeurekajava
    《一线大厂Java面试题解析+核心总结学习笔记+最新讲解视频+实战项目源码》，点击传送门，即可获取！spring-boot-starter-parent2.5.1org.springframework.cloudspring-cloud-starter-eureka1.4.7.RELEASEorg.springframework.cloudspring-cloud-dependencies2020
  • 【洛谷】P1886 滑动窗口 /【模板】单调队列，经典！ SiMmming 算法算法c++数据结构
    目录题目AC代码详解deque语法一道经典的单调队列模板题！！“如果一个选手比你小还比你强，你就可以退役了。”——单调队列的原理——算法学习笔记(66):单调队列-知乎题目P1886滑动窗口/【模板】单调队列-洛谷【普及/提高-】AC代码#includeusingnamespacestd;intn,m;structNode{intid;//编号intval;//大小};dequeq1;//min,
  • 快速入门Springboot+vue——MybatisPlus多表查询及分页查询 ONEPEICE-ing vue.jsspringboot前端mybatis
    学习自哔哩哔哩上的“刘老师教编程”，具体学习的网站为：7.MybatisPlus多表查询及分页查询_哔哩哔哩_bilibili，以下是看课后做的笔记，仅供参考。多表查询多表查询[Mybatis中的]：实现复杂关系映射，可以使用@Results直接，@Result注解，@One注解，@Many注解组合完成复杂关系的配置。@Results：代替标签，该注解中可以加入单个或多个@Result注解@Res
  • pnpm vs npm CCSBRIDGE 了解Vuenpm前端node.js
    pnpmvsnpm：区别与常见操作指南在现代前端开发中，包管理工具是不可或缺的。最常见的包管理工具有npm、yarn和pnpm。其中，pnpm以其高效的磁盘利用率和更快的安装速度受到越来越多的开发者青睐。本文将对比pnpm和npm，并介绍pnpm的常见配置及操作。一、pnpmvsnpm：核心区别特性pnpmnpm磁盘占用低：采用硬链接和符号链接共享node_modules，节省磁盘空间高：每个项目
  • ASP.NET Core 多身份验证方案：.NET 8 如何玩转灵活安全性？ 墨瑾轩 一起学学C#【六】asp.net.net后端
    关注墨瑾轩，带你探索编程的奥秘！超萌技术攻略，轻松晋级编程高手技术宝库已备好，就等你来挖掘订阅墨瑾轩，智趣学习不孤单即刻启航，编程之旅更有趣嘿，小伙伴们，你们好！今天我们要聊一个超级重要的话题：如何在ASP.NETCore中处理多个身份验证方案。在现代Web应用中，单一的身份验证方案往往无法满足复杂的业务需求。那么，如何在.NET8中实现多个身份验证方案，确保应用既灵活又安全呢？别急，接下来我会手
  • 【深度学习】预训练和微调概述 CS_木成河 深度学习深度学习人工智能语言模型预训练微调
    预训练和微调概述1.预训练和微调的介绍1.1预训练（Pretraining）1.2微调（Fine-Tuning）2.预训练和微调的区别预训练和微调是现代深度学习模型训练中的两个关键步骤，它们通常是一个预训练-微调(Pretrain-Finetune)流程的不同阶段。两者相辅相成，共同帮助模型从通用的知识到特定任务的适应。1.预训练和微调的介绍1.1预训练（Pretraining）定义：预训练是指在
  • 【深度学习大模型实例教程：Transformer架构、多模态模型与自监督学习】 生活De°咸鱼 AIGCJava深度学习大数据AIGC
    深度学习大模型实例教程：Transformer架构、多模态模型与自监督学习1.深度学习基础概述1.1深度学习的核心概念1.2常见深度学习模型1.3大模型的挑战与解决方案2.数据准备2.1数据处理示例：CIFAR-103.构建深度学习模型4.训练模型5.使用预训练模型（迁移学习）6.Transformer架构6.1Transformer的核心原理6.2Transformer的基本组件6.3Trans
  • python 第三方包自动导入_7行代码，彻底告别python第三方包import导入问题！ weixin_39581716 python第三方包自动导入
    最近有不少小伙伴咨询关于pyton第三方包导入的问题，今天我们就来聊聊第三方包导入那些事。随着对python学习的渐入臻境，越来越多的小伙伴们开始导入自己所需的第三方包，实现各种各样的功能。但是，他(她)们遇到了一个非常烦恼的问题自己用pip已经下载好的第三方包，import总是报错，显示没有该moudle.pip显示scipy模块已安装好但在pycharm里，我们import导入时，编辑器却报错
  • 深度学习模型的全面解析：技术进展、应用场景与未来趋势 阿尔法星球 深度学习与神经网络实战机器学习
    1.深度学习模型概述1.1深度学习模型的定义与分类深度学习模型是基于人工神经网络的算法，它们通过模仿人脑的处理机制来学习数据中的复杂模式和特征。这些模型可以根据其结构和应用场景被分为不同的类别，包括但不限于卷积神经网络（CNN）、循环神经网络（RNN）、长短期记忆网络（LSTM）、生成对抗网络（GAN）和Transformer模型等。1.2深度学习模型的关键特点深度学习模型的关键特点在于其深度，即
  • 如何系统学习 MATLAB 热爱技术。 Matlab学习matlab信息可视化
    引言MATLAB（MatrixLaboratory）是一种广泛应用于工程、科学和数学领域的高效编程工具。它不仅在矩阵运算、数据分析和图形可视化等方面表现出色，还在信号处理、控制系统设计以及机器学习中占有重要地位。对于初学者和有一定编程经验的学习者来说，系统学习MATLAB可以帮助你在科研和工程项目中取得更大的进展。本文将为你提供一套系统的学习MATLAB的方法和资源，帮助你从零开始掌握这门强大的工
  • ASPNETCore6 写日志方式（log4net，log4net+sql server，Nlog） 临璟 笔记.net.netcoreasp.net
    前言最近正在学习net6，正好学到日志组件这一块，写一个笔记吧。ASPNETCore6写日志方式（log4net，log4net+sqlserver，Nlog）参考使用软件：VisualStudio2022，SqlServer2019一、log4netlog4net是Apache软件基金会Apache日志记录服务项目的一部分。日志记录服务项目旨在为应用程序调试和审核提供跨语言日志记录服务。1.引入
  • 深度学习模型：原理、架构与应用 一ge科研小菜菜 工具深度学习
    深度学习（DeepLearning）是机器学习中的一个分支，基于人工神经网络的发展，尤其是多层神经网络的研究，使其在语音识别、图像处理、自然语言处理等领域取得了显著进展。深度学习的核心是通过大量数据的训练，学习到数据的内在结构和模式，并且具备自动从复杂的输入中提取特征的能力。本文将从深度学习的基本原理、常见模型、训练技巧、应用领域及其面临的挑战等方面进行详细探讨，帮助理解深度学习模型如何在现代科技
  • 基于深度学习的焊缝缺陷检测识别系统：YOLOv10 + UI界面 + 数据集 深度学习&目标检测实战项目 深度学习YOLOui目标跟踪分类人工智能
    1.引言1.1背景介绍焊接是现代工业制造中的重要工艺之一，其质量直接影响产品的安全性、耐用性和可靠性。然而，由于焊接工艺的复杂性，在实际应用中不可避免地会出现焊缝缺陷，如气孔、裂纹、未熔合等。这些缺陷不仅降低了焊接质量，还可能导致严重的安全事故。因此，如何高效、准确地检测焊缝缺陷成为工业领域的重要研究课题。传统的焊缝缺陷检测方法主要依赖于人工经验或简单的图像处理技术。这些方法不仅效率低下，而且受主
  • 基于深度学习的钢材表面缺陷检测系统：UI界面 + R-CNN + 数据集 深度学习&目标检测实战项目 R-CNN检测系统深度学习uir语言开发语言计算机视觉cnn人工智能
    在制造业中，钢材表面缺陷的检测是保证产品质量和生产效率的关键环节。随着工业自动化水平的提高，传统的人工检测已经无法满足快速、精确的检测要求。基于深度学习的钢材表面缺陷检测系统能够通过计算机视觉自动识别钢材表面的缺陷类型和位置，极大地提升了检测的准确性和效率。本文将详细介绍如何基于深度学习、R-CNN算法和自定义数据集构建一个钢材表面缺陷检测系统。内容涵盖从数据准备、R-CNN模型训练到UI界面设计
  • [漏洞挖掘与防护] 01.漏洞利用之CVE-2019-0708复现及防御详解（含学习路线） Eastmount 网络安全自学篇网络安全漏洞挖掘web渗透CVE系统安全
    这是作者新开的一个专栏——“漏洞挖掘与防护”，前期会复现各种经典和最新漏洞，并总结防护技巧；后期尝试从零学习漏洞挖掘技术，包括Web漏洞和二进制及IOT相关漏洞，以及Fuzzing技术。新的征程，新的开启，漫漫长征路，偏向虎山行。享受过程，感谢您的陪伴，一起加油~欢迎关注作者新建的『网络攻防和AI安全之家』知识星球（文章末尾）第一篇文章将详细介绍Windows远程桌面服务漏洞（CVE-2019-0
  • MATLAB基础学习相关知识 没有不重的名么 matlab学习数据结构
    MATLAB安装参考：抖音-记录美好生活MATLAB基础知识学习参考：【1小时Matlab速成教程-哔哩哔哩】https://b23.tv/CnvHtO3第1部分：变量定义和基本运算生成矩阵：%生成矩阵%直接法%,表示行;表示列a=[1,2,3;4,5,6;7,8,9];%冒号一维矩阵a=开始：步长：结束，步长为1可省略b=1:1:10;%1,2,...10b=1:10;%与上一个等价%函数生成%
  • JavaScript 类型转换的意外 神明木佑 javascript开发语言ecmascript
    在JavaScript中，类型转换是将一个数据类型转换为另一个数据类型的过程。它可以是显式的，即通过使用特定的转换函数或操作符来实现，也可以是隐式的，即由JavaScript引擎自动完成。以下是JavaScript中的一些常见类型转换规则：字符串转换：使用String()函数或toString()方法可以将其他类型的值转换为字符串类型。varnum=42;varstr=String(num);//
  • CSS 伪类和伪元素的混淆 神明木佑 css前端
    在CSS中，伪类和伪元素是两个不同的概念。它们的作用是相似的，都用于对元素进行样式修饰，但它们的使用方式和语法有所不同。伪类（pseudo-class）是用于选择元素的特定状态或条件的关键词，表示元素在特定状态下的样式。常见的伪类有:hover（当鼠标悬停在元素上时）、:active（当元素被激活时）、:focus（当元素获得焦点时）等。伪类使用单冒号（:）作为前缀。例如，使用:hover伪类可以
  • HTML 图像标签使用陷阱 神明木佑 html前端
    新手在使用标签时常见的错误有：忘记设置alt属性：alt属性用于提供图像的替代文本信息，当图像无法显示时，浏览器会显示alt属性中的文本。如果忘记设置alt属性，用户在无法看到图像的情况下无法获取替代文本信息，降低了网站的可访问性。错误地设置图像大小：可以通过设置width和height属性来指定图像的显示大小，但是一些新手可能会错误地设置了不合适的大小值，导致图像在页面上显示过大或过小，从而破坏
  • input的Checkbox（复选框）属性具体怎么使用 神明木佑 前端javascript开发语言
    Checkbox（复选框）是一种常用的表单元素，允许用户从一组选项中选择一个或多个选项。它在各种应用程序和网站中广泛使用，为用户提供灵活的选择方式。以下是Checkbox的一些基本用法和注意事项：基本用法：在HTML中，Checkbox是通过标签创建的。每个Checkbox都有一个name属性，用于标识该Checkbox所属的组。当用户提交表单时，只有被选中的Checkbox的值会被发送。Chec
  • C语言学习，插入排序 五味香 c语言学习排序算法算法开发语言android数据结构
    C语言，插入排序是一种简单直观的排序算法，插入排序是通过构建有序序列，对于未排序数据，在已排序序列中从后向前扫描，找到相应位置并插入。示例：//插入排序函数voidinsertionSort(intarr[],intn){for(inti=1;i=0&&arr[j]>key){arr[j+1]=arr[j];j=j-1;}arr[j+1]=key;}}//打印voidprintArray(inta
  • 鸿蒙NEXT开发-应用数据持久化之用户首选项 东林知识库 鸿蒙学习harmonyos华为
    注意：博主有个鸿蒙专栏，里面从上到下有关于鸿蒙next的教学文档，大家感兴趣可以学习下如果大家觉得博主文章写的好的话，可以点下关注，博主会一直更新鸿蒙next相关知识目录1.应用数据持久化2.应用数据持久化-用户首选项2.1概述2.2约束限制2.3常用方法2.3.1封装用户首选项工具类2.3.2初始化用户首选项2.3.3使用用户首选项1.应用数据持久化应用数据持久化，是指应用将内存中的数据通过文件
  • 前端必备：正则表达式入门指南与高频场景实战 禅意码农 js正则表达式javascriptnode.js
    正则表达式是处理文本的瑞士军刀，但对于新手来说可能有些复杂。本文通过通俗易懂的讲解和实用案例，带你快速上手！一、正则表达式基础组成1.修饰符（Flags）修饰符放在正则表达式末尾（如/pattern/igm），用于控制匹配模式：修饰符名称作用iignoreCase忽略大小写（如匹配"A"和"a"）gglobal全局匹配（匹配所有结果，而非第一个）mmultiline多行模式（允许^和$匹配行首行尾
  • 〖程序员的自我修养 - 认知剖析篇②〗- 学习编程之前你需要知道这些 哈哥撩编程 程序员：职场效能必修宝典程序员的自我修养学习编程前的思考如何选择一门编程语言职场和发展学习编程可以做什么
    人之所以会觉得迷茫，本质上是欠缺对自己的一个控制力、识别庞杂信息、去伪存真的独立思考与认知能力。说明：该文属于程序员的自我修养专栏，购买任意白宝书体系化专栏可加入易编程社区，早鸟价订阅模式除外。福利：加入社区的小伙伴们，除了可以获取博主所有付费专栏的阅读权限之外，还可加入星荐官共赢计划，详情请戳我。作者：不渴望力量的哈士奇(哈哥)，十余年工作经验,跨域学习者，从事过全栈研发、产品经理等工作，现任研
  • 【Kafka专栏 12】实时数据流与任务队列的较量 ：Kafka与RabbitMQ有什么不同 夏之以寒 夏之以寒-kafka专栏kafkarabbitmq数据流任务队列
    作者名称：夏之以寒作者简介：专注于Java和大数据领域，致力于探索技术的边界，分享前沿的实践和洞见文章专栏：夏之以寒-kafka专栏专栏介绍：本专栏旨在以浅显易懂的方式介绍Kafka的基本概念、核心组件和使用场景，一步步构建起消息队列和流处理的知识体系，无论是对分布式系统感兴趣，还是准备在大数据领域迈出第一步，本专栏都提供所需的一切资源、指导，以及相关面试题，立刻免费订阅，开启Kafka学习之旅！
  • 鸿蒙NEXT（开发进阶）通过关系型数据库实现数据持久化 你不要给我蛙蛙叫啊 鸿蒙开发HarmonyOSOpenHarmonyharmonyos华为鸿蒙前端鸿蒙系统android数据库
    鸿蒙NEXT开发实战往期必看文章：一分钟了解”纯血版！鸿蒙HarmonyOSNext应用开发！“非常详细的”鸿蒙HarmonyOSNext应用开发学习路线！（从零基础入门到精通）HarmonyOSNEXT应用开发案例实践总结合（持续更新......）HarmonyOSNEXT应用开发性能优化实践总结（持续更新......）场景介绍关系型数据库基于SQLite组件，适用于存储包含复杂关系数据的场景，
  • PyTorch torch.logsumexp 详解：数学原理、应用场景与性能优化（中英双语） 阿正的梦工坊 PyTorchDeepLearningpytorch人工智能python
    PyTorchtorch.logsumexp详解：数学原理、应用场景与性能优化在深度学习和概率模型中，我们经常需要计算数值稳定的对数概率操作，特别是在处理softmax归一化、对数似然计算、损失函数优化等任务时，直接求和再取对数可能会导致数值溢出。torch.logsumexp正是为了解决这一问题而设计的。在本文中，我们将详细介绍：torch.logsumexp的数学原理它的实际用途为什么它比直接
  • html页面js获取参数值 0624chenhong html
    1.js获取参数值js function GetQueryString(name) {      var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");      var r = windo
  • MongoDB 在多线程高并发下的问题 BigCat2013 mongodbDB高并发重复数据
    最近项目用到 MongoDB , 主要是一些读取数据及改状态位的操作. 因为是结合了最近流行的 Storm进行大数据的分析处理，并将分析结果插入Vertica数据库，所以在多线程高并发的情境下, 会发现 Vertica 数据库中有部分重复的数据. 这到底是什么原因导致的呢？笔者开始也是一筹莫 展，重复去看 MongoDB 的 API , 终于有了新发现 ： com.mongodb.DB 这个类有
  • c++ 用类模版实现链表(c++语言程序设计第四版示例代码) CrazyMizzz 数据结构C++
    #include<iostream> #include<cassert> using namespace std; template<class T> class Node { private: Node<T> * next; public: T data;
  • 最近情况 麦田的设计者 感慨考试生活
       在五月黄梅天的岁月里，一年两次的软考又要开始了。到目前为止，我已经考了多达三次的软考，最后的结果就是通过了初级考试（程序员）。人啊，就是不满足，考了初级就希望考中级，于是，这学期我就报考了中级，明天就要考试。感觉机会不大，期待奇迹发生吧。这个学期忙于练车，写项目，反正最后是一团糟。后天还要考试科目二。这个星期真的是很艰难的一周，希望能快点度过。   
  • linux系统中用pkill踢出在线登录用户 被触发 linux
    由于linux服务器允许多用户登录，公司很多人知道密码，工作造成一定的障碍所以需要有时踢出指定的用户 1/#who   查出当前有那些终端登录（用 w 命令更详细） # who root     pts/0        2010-10-28 09:36 (192
  • 仿QQ聊天第二版 肆无忌惮_ qq
    在第一版之上的改进内容:  第一版链接: http://479001499.iteye.com/admin/blogs/2100893   用map存起来号码对应的聊天窗口对象,解决私聊的时候所有消息发到一个窗口的问题. 增加ViewInfo类,这个是信息预览的窗口,如果是自己的信息,则可以进行编辑.   信息修改后上传至服务器再告诉所有用户,自己的窗口
  • java读取配置文件 知了ing
    1，java读取.properties配置文件 InputStream in; try { in = test.class.getClassLoader().getResourceAsStream("config/ipnetOracle.properties");//配置文件的路径 Properties p = new Properties()
  • __attribute__ 你知多少？ 矮蛋蛋 C++gcc
    原文地址: http://www.cnblogs.com/astwish/p/3460618.html GNU C 的一大特色就是__attribute__ 机制。__attribute__ 可以设置函数属性（Function Attribute ）、变量属性（Variable Attribute ）和类型属性（Type Attribute ）。 __attribute__ 书写特征是：
  • jsoup使用笔记 alleni123 java爬虫JSoup
    <dependency> <groupId>org.jsoup</groupId> <artifactId>jsoup</artifactId> <version>1.7.3</version> </dependency> 2014/08/28 今天遇到这种形式，
  • JAVA中的集合 Collectio 和Map的简单使用及方法 百合不是茶 listmapset
             List ,set ,map的使用方法和区别 java容器类类库的用途是保存对象，并将其分为两个概念：     Collection集合：一个独立的序列，这些序列都服从一条或多条规则;List必须按顺序保存元素  ，set不能重复元素；Queue按照排队规则来确定对象产生的顺序（通常与他们被插入的
  • 杀LINUX的JOB进程 bijian1013 linuxunix
    今天发现数据库一个JOB一直在执行，都执行了好几个小时还在执行，所以想办法给删除掉   系统环境：    ORACLE 10G    Linux操作系统   操作步骤如下： 第一步.查询出来那个job在运行，找个对应的SID字段 select * from dba_jobs_running--找到job对应的sid &n
  • Spring AOP详解 bijian1013 javaspringAOP
            最近项目中遇到了以下几点需求，仔细思考之后，觉得采用AOP来解决。一方面是为了以更加灵活的方式来解决问题，另一方面是借此机会深入学习Spring AOP相关的内容。例如，以下需求不用AOP肯定也能解决，至于是否牵强附会，仁者见仁智者见智。 1.对部分函数的调用进行日志记录，用于观察特定问题在运行过程中的函数调用
  • [Gson六]Gson类型适配器(TypeAdapter) bit1129 Adapter
    TypeAdapter的使用动机  Gson在序列化和反序列化时，默认情况下，是按照POJO类的字段属性名和JSON串键进行一一映射匹配，然后把JSON串的键对应的值转换成POJO相同字段对应的值，反之亦然，在这个过程中有一个JSON串Key对应的Value和对象之间如何转换(序列化/反序列化)的问题。   以Date为例，在序列化和反序列化时，Gson默认使用java.
  • 【spark八十七】给定Driver Program， 如何判断哪些代码在Driver运行，哪些代码在Worker上执行 bit1129 driver
    Driver Program是用户编写的提交给Spark集群执行的application，它包含两部分 作为驱动： Driver与Master、Worker协作完成application进程的启动、DAG划分、计算任务封装、计算任务分发到各个计算节点(Worker)、计算资源的分配等。 计算逻辑本身，当计算任务在Worker执行时，执行计算逻辑完成application的计算任务
  • nginx 经验总结 ronin47 nginx 总结
    　　　深感nginx的强大，只学了皮毛，把学下的记录。 　　　获取Header 信息，一般是以$http_XX（ＸＸ是小写）            获取body,通过接口，再展开，根据Ｋ取Ｖ 　　　获取uri,以$arg_XX      &n
  • 轩辕互动-1.求三个整数中第二大的数2.整型数组的平衡点 bylijinnan 数组
    import java.util.ArrayList; import java.util.Arrays; import java.util.List; public class ExoWeb { public static void main(String[] args) { ExoWeb ew=new ExoWeb(); System.out.pri
  • Netty源码学习-Java-NIO-Reactor bylijinnan java多线程netty
    Netty里面采用了NIO-based Reactor Pattern 了解这个模式对学习Netty非常有帮助 参考以下两篇文章： http://jeewanthad.blogspot.com/2013/02/reactor-pattern-explained-part-1.html http://gee.cs.oswego.edu/dl/cpjslides/nio.pdf
  • AOP通俗理解 cngolon springAOP
    1.我所知道的aop     初看aop,上来就是一大堆术语，而且还有个拉风的名字，面向切面编程，都说是OOP的一种有益补充等等。一下子让你不知所措，心想着：怪不得很多人都和 我说aop多难多难。当我看进去以后，我才发现：它就是一些java基础上的朴实无华的应用，包括ioc，包括许许多多这样的名词，都是万变不离其宗而 已。 2.为什么用aop&nb
  • cursor variable 实例 ctrain variable
    create or replace procedure proc_test01 as type emp_row is record( empno emp.empno%type, ename emp.ename%type, job emp.job%type, mgr emp.mgr%type, hiberdate emp.hiredate%type, sal emp.sal%t
  • shell报bash: service: command not found解决方法 daizj linuxshellservicejps
    今天在执行一个脚本时，本来是想在脚本中启动hdfs和hive等程序，可以在执行到service hive-server start等启动服务的命令时会报错，最终解决方法记录一下：   脚本报错如下： ./olap_quick_intall.sh: line 57: service: command not found ./olap_quick_intall.sh: line 59
  • 40个迹象表明你还是PHP菜鸟 dcj3sjt126com 设计模式PHP正则表达式oop
    你是PHP菜鸟，如果你：1. 不会利用如phpDoc 这样的工具来恰当地注释你的代码2. 对优秀的集成开发环境如Zend Studio 或Eclipse PDT 视而不见3. 从未用过任何形式的版本控制系统，如Subclipse4. 不采用某种编码与命名标准 ，以及通用约定，不能在项目开发周期里贯彻落实5. 不使用统一开发方式6. 不转换（或）也不验证某些输入或SQL查询串（译注：参考PHP相关函
  • Android逐帧动画的实现 dcj3sjt126com android
    一、代码实现： private ImageView iv; private AnimationDrawable ad; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout
  • java远程调用linux的命令或者脚本 eksliang linuxganymed-ssh2
    转载请出自出处： http://eksliang.iteye.com/blog/2105862        Java通过SSH2协议执行远程Shell脚本(ganymed-ssh2-build210.jar)   使用步骤如下： 1.导包 官网下载: http://www.ganymed.ethz.ch/ssh2/ ma
  • adb端口被占用问题 gqdy365 adb
    最近重新安装的电脑，配置了新环境，老是出现： adb server is out of date. killing... ADB server didn't ACK * failed to start daemon * 百度了一下，说是端口被占用，我开个eclipse，然后打开cmd，就提示这个，很烦人。 一个比较彻底的解决办法就是修改
  • ASP.NET使用FileUpload上传文件 hvt .netC#hovertreeasp.netwebform
    前台代码： <asp:FileUpload ID="fuKeleyi" runat="server" /> <asp:Button ID="BtnUp" runat="server" onclick="BtnUp_Click" Text="上 传" />
  • 代码之谜（四）- 浮点数（从惊讶到思考） justjavac 浮点数精度代码之谜IEEE
    在『代码之谜』系列的前几篇文章中，很多次出现了浮点数。 浮点数在很多编程语言中被称为简单数据类型，其实，浮点数比起那些复杂数据类型（比如字符串）来说， 一点都不简单。 单单是说明 IEEE浮点数 就可以写一本书了，我将用几篇博文来简单的说说我所理解的浮点数，算是抛砖引玉吧。 一次面试 记得多年前我招聘 Java 程序员时的一次关于浮点数、二分法、编码的面试， 多年以后，他已经称为了一名很出色的
  • 数据结构随记_1 lx.asymmetric 数据结构笔记
    第一章   1.数据结构包括数据的 逻辑结构、数据的物理/存储结构和数据的逻辑关系这三个方面的内容。 2.数据的存储结构可用四种基本的存储方法表示，它们分别是 顺序存储、链式存储 、索引存储 和 散列存储。 3.数据运算最常用的有五种，分别是  查找/检索、排序、插入、删除、修改。 4.算法主要有以下五个特性：  输入、输出、可行性、确定性和有穷性。 5.算法分析的
  • linux的会话和进程组 网络接口 linux
    会话： 一个或多个进程组。起于用户登录，终止于用户退出。此期间所有进程都属于这个会话期。会话首进程：调用setsid创建会话的进程1.规定组长进程不能调用setsid，因为调用setsid后，调用进程会成为新的进程组的组长进程.如何保证？ 先调用fork，然后终止父进程，此时由于子进程的进程组ID为父进程的进程组ID，而子进程的ID是重新分配的，所以保证子进程不会是进程组长，从而子进程可以调用se
  • 二维数组 元素的连续求解 1140566087 二维数组ACM
    import java.util.HashMap; public class Title { public static void main(String[] args){ f(); } // 二位数组的应用 //12、二维数组中，哪一行或哪一列的连续存放的0的个数最多，是几个0。注意，是“连续”。 public static void f(){
  • 也谈什么时候Java比C++快 windshome javaC++
      刚打开iteye就看到这个标题“Java什么时候比C++快”，觉得很好笑。   你要比，就比同等水平的基础上的相比，笨蛋写得C代码和C++代码，去和高手写的Java代码比效率，有什么意义呢？   我是写密码算法的，深刻知道算法C和C++实现和Java实现之间的效率差，甚至也比对过C代码和汇编代码的效率差，计算机是个死的东西，再怎么优化，Java也就是和C
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他