设计师工作日常
设计师工作日常

有趣的CSS - 搜索框小动效

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是使用 css 模拟实现搜索图标过渡到输入框的小动效的一个效果。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

目录

  • 整体效果
  • 核心代码
    • html 代码
    • css 部分代码
  • 完整代码如下
    • html 页面
    • css 样式
    • 页面渲染效果

整体效果

有趣的CSS - 搜索框小动效_第1张图片

使用 input 自定义样式模拟一个搜索图标，使用 transition 过渡属性实现搜索图标过渡到输入框的交互效果。

此效果可适用于移动端H5页面、app导航栏等位置场景，增强动画交互体验。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<label>
  <input type="text" required>
  <span class="line">span>
label>

input 标签设置 required 判断是否为空。

css 部分代码

label{
  position: relative;
}
input{
  width: 38px;
  height: 38px;
  line-height: 38px;
  outline-style: none;
  font-size: 16px;
  color: #333;
  border: 3px solid #a8a8a8;
  border-radius: 19px;
  padding: 0 16px;
  box-sizing: border-box;
  transition: all 1s ease-in-out;
}
.line{
  width: 3px;
  height: 14px;
  display: block;
  background-color: #a8a8a8;
  transform: rotate(320deg);
  position: absolute;
  left: 30px;
  top: 32px;
  z-index: 10;
  opacity: 1;
  transition: all 1s ease-in-out;
}
input:focus,input:valid{
  width: 180px;
}
input:focus+.line,input:valid+.line{
  width: 1px;
  height: 16px;
  left: 19px;
  top: 10px;
  opacity: 0;
  transform: rotate(360deg);
}

input 自定义样式成圆形，随着 :focus 、:valid 判断输入框状态，来实现过渡动画。

完整代码如下

html 页面

DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="style.css">
    <title>搜索框小动效title>
  head>
  <body>
    <div class="app">
      <label>
        <input type="text" required>
        <span class="line">span>
      label>
    div>
  body>
html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
label{
  position: relative;
}
input{
  width: 38px;
  height: 38px;
  line-height: 38px;
  outline-style: none;
  font-size: 16px;
  color: #333;
  border: 3px solid #a8a8a8;
  border-radius: 19px;
  padding: 0 16px;
  box-sizing: border-box;
  transition: all 1s ease-in-out;
}
.line{
  width: 3px;
  height: 14px;
  display: block;
  background-color: #a8a8a8;
  transform: rotate(320deg);
  position: absolute;
  left: 30px;
  top: 32px;
  z-index: 10;
  opacity: 1;
  transition: all 1s ease-in-out;
}
input:focus,input:valid{
  width: 180px;
}
input:focus+.line,input:valid+.line{
  width: 1px;
  height: 16px;
  left: 19px;
  top: 10px;
  opacity: 0;
  transform: rotate(360deg);
}

页面渲染效果

有趣的CSS - 搜索框小动效_第2张图片
以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

[1] 原文阅读

CSS 是一种很酷很有趣的计算机语言，在这里跟大家分享一些 CSS 实例 Demo，为学习者获取灵感和思路提供一点帮助，希望你们喜欢。

我是 Just，这里是「设计师工作日常」，求点赞求关注！

你可能感兴趣的:(有趣的css,css,前端,css,动画,交互,ux,ui,搜索框)

  • 开源模型应用落地-DeepSeek-R1-Distill-Qwen-7B与vllm实现推理加速的正确姿势（一） 开源技术探险家 开源模型-实际应用落地#人工智能自然语言处理语言模型深度学习
    一、前言在当今人工智能技术迅猛发展的时代，各类人工智能模型如雨后春笋般不断涌现，其性能的优劣直接影响着应用的广度与深度。从自然语言处理到计算机视觉，从智能安防到医疗诊断，AI模型广泛应用于各个领域，人们对其准确性、稳定性和高效性的期望也与日俱增。在此背景下，DeepSeek模型的出现为行业带来了新的曙光。DeepSeek团队开发的DeepSeek-R1-Distill-Qwen-7B模型，利用蒸馏
  • 文件共享：局域网传输的安全与效率 办公效能师 安全网络web安全
    在当今数字化办公的浪潮中，企业内部的文件共享已然成为日常运营不可或缺的关键环节。无论是项目资料的分发、团队协作成果的传递，还是重要数据的备份存档，高效且安全的文件共享机制直接关乎企业的业务推进速度、团队协作流畅度以及信息资产的安全保障。而局域网传输，作为企业内部文件流通的“高速公路”，凭借其得天独厚的优势，在安全与效率层面大放异彩，为文件共享难题提供了卓越解决方案。一、极速传输效率：充分释放带宽潜
  • 无线电罗盘 改进自KerberosSDR 平替KrakenSDR 老邵的科创世界 KerberosSDRkrakensdrkerberossdr无线电测向
    大约5年前，一款易上手的无线电测向机——KerberosSDR横空出世。它是一款多通道相参接收机，由4通道rtlsdr组成。相信大家都是知道，要实现无线电测向，除了硬件上需要特殊的电路设计外，还需要一些软件校准算法。而KerberosSDR相比之前其它同类SDR（如USRPQR210,X310或LimeSDRQPCIe），它的优势就在于事先做好了这个软件，用户只需要把树莓派烧录好配套镜像就能使用。
  • 蓝桥杯——试题集——入门训练 唐煜鑫 蓝桥杯c语言
    入门训练BEGIN-1A+B问题问题描述输入A、B，输出A+B。输入格式输入的第一行包括两个整数，由空格分隔，分别表示A、B。输出格式输出一行，包括一个整数，表示A+B的值。样例输入1245样例输出57数据规模与约定-10000intmain(){inta,b;scanf("%d%d",&a,&b);printf("%d",a+b);return0;}BEGIN-2序列求和问题描述求1+2+3+…
  • 蓝桥杯——BASIC-02——基础练习 序列求和 满天星✧ 蓝桥杯职场和发展算法
    问题描述：求1+2+3+...+n的值。输入格式：输入包括一个整数n。输出格式：输出一行，包括一个整数，表示1+2+3+...+n的值。数据规模与约定：1<=n<=1,000,000,000。说明：有一些试题会给出多组样例输入输出以帮助你更好的做题。一般在提交之前所有这些样例都需要测试通过才行，但这不代表这几组样例数据都正确了你的程序就是完全正确的，潜在的错误可能仍然导致你的得分较低。请注意这里的
  • 算法：蓝桥杯——四平方和（C语言） _DonQuijote C语言算法c语言算法
    目录问题说明设计思路程序代码运行结果反思什么是二分法？什么是打表法？数组排序函数qsort（）问题说明四平方和定理，又称为拉格朗日定理：每个正整数都可以表示为至多4个正整数的平方和，如果把0包括进去，就正好可以表示为4个数的平方和。比如：5=0^2+0^2+1^2+2^27=1^2+1^2+1^2+2^2（^符号表示乘方的意思）对于一个给定的正整数，可能存在多种平方和的表示法。要求你对4个数排序：
  • 循环队列中由于front与rear指针位置定义不同导致的判空、判满条件差异 XDU小迷弟 数据结构数据结构算法线性代数
    花了好长时间将这四种组合理了一下，希望对自己和大家有所帮助，要是您发现哪里不妥，还请多多指点呀，先谢过啦！通过牺牲一个存储空间来判断循环队列的空和满状态，以下是基于这个前提下，针对不同的front和rear定义方式的判空、判满条件及计算队列元素个数的方法：1.front指向队头元素的前一个位置，rear指向队尾元素的后一个位置队空条件:(Q.front+1)%MaxSize==Q.rear队满条件
  • 队列—学习 走啦小孩 算法c++数据结构蓝桥杯学习
    1.手写队列的实现使用数组实现队列是一种常见的方法。队列的基本操作包括入队（enqueue）和出队（dequeue）。队列的头部和尾部分别用head和tail指针表示。代码实现constintN=10000;//定义队列容量，确保够用intque[N];//队列，用数组模拟inthead=0;//head始终指向队头。que[head]是队头。开始时队列为空，head=0inttail=-1;//
  • [蓝桥杯 2022 省 A] 求和——前缀和，差分 夏微凉. 蓝桥杯算法蓝桥杯算法职场和发展
    蓝桥杯2022省赛A组C题题目描述给定n个整数a1,a2,⋯,an,求它们两两相乘再相加的和，即S=a1⋅a2+a1⋅a3+⋯+a1⋅an+a2⋅a3+⋯+an−2⋅an−1+an−2⋅an+an−1⋅an输入格式输入的第一行包含一个整数n。第二行包含n个整数a1,a2,⋯an。输出格式输出一个整数S，表示所求的和。请使用合适的数据类型进行运算。输入输出样例输入#1复制41369输出#1复制117
  • 幸运数字——蓝桥杯 走啦小孩 算法
    1.问题描述哈沙德数是指在某个固定的进位制当中，可以被各位数字之和整除的正整数。例如126126是十进制下的一个哈沙德数，因为(126)10mod(1+2+6)=0；126也是八进制下的哈沙德数，因为(126)10=(176)8，(126)10mod(1+7+6)=0；同时126也是16进制下的哈沙德数，因为(126)10=(7e)16，(126)10mod(7+e)=0。小蓝认为，如果一个整数在
  • 油漆面积——蓝桥杯 走啦小孩 算法数据结构c++蓝桥杯
    1.题目描述X星球的一批考古机器人正在一片废墟上考古。该区域的地面坚硬如石、平整如镜。管理人员为方便，建立了标准的直角坐标系。每个机器人都各有特长、身怀绝技。它们感兴趣的内容也不相同。经过各种测量，每个机器人都会报告一个或多个矩形区域，作为优先考古的区域。矩形的表示格式为(x1,y1,x2,y2)，代表矩形的两个对角点坐标。为了醒目，总部要求对所有机器人选中的矩形区域涂黄色油漆。小明并不需要当油漆
  • 蓝桥杯——BASIC-02——序列求和（java）基础练习 小羊卷儿. 蓝桥杯—基础练习蓝桥杯java算法职场和发展eclipse
    资源限制时间限制：1.0s内存限制：256.0MB问题描述求1+2+3+...+n的值。输入格式输入包括一个整数n。输出格式输出一行，包括一个整数，表示1+2+3+...+n的值。样例输入4样例输出10样例输入100说明：有一些试题会给出多组样例输入输出以帮助你更好的做题。一般在提交之前所有这些样例都需要测试通过才行，但这不代表这几组样例数据都正确了你的程序就是完全正确的，潜在的错误可能仍然导致你
  • Electron技术架构 沿着路走到底 Electron桌面应用electron架构前端
    1Chromium：支持最新特性的浏览器Node.js：javascript运行时，可实现文件读写等NativeAPIs：提供统一的原生界面能力1
  • 3CDaemon中文版：高效便捷的文件传输利器 郝真漪Melanie
    3CDaemon中文版：高效便捷的文件传输利器【下载地址】3CDaemon中文版下载3CDaemon是一款专为Windows系统设计的FTP和TFTP服务器软件。它为用户提供了一个简单易用的界面，方便用户在本地网络中进行文件传输。无论是个人用户还是企业用户，3CDaemon都能满足您对文件传输的需求项目地址:https://gitcode.com/open-source-toolkit/d3b1c
  • 手机Python爬虫教程：利用手机学习Python爬虫的终极指南 一只会写程序的猫 Python智能手机python爬虫
    【引言】在数字化时代，手机已经成为人们生活中不可或缺的一部分。而Python爬虫作为一种强大的数据获取工具，也受到越来越多人的关注。但是，是否可以利用手机进行Python爬虫学习呢？本文将介绍如何通过手机学习Python爬虫，为你打开一扇全新的学习之门。【一、手机学习资源】1.《Python爬虫入门教程》（手机应用）这款手机应用程序提供了Python爬虫的基础知识和实例讲解，适合初学者使用。你可以
  • 推荐开源神器：百灵快传 - 实现超快速的局域网文件传输 宣昀芊
    推荐开源神器：百灵快传-实现超快速的局域网文件传输项目地址:https://gitcode.com/gh_mirrors/b0/b0pass在日常的工作与生活中，我们经常需要在不同的设备之间传输文件，而传统的方式如邮件附件、云盘分享等可能存在速度慢、隐私保护不足的问题。今天，我要向大家推荐一款开源利器——百灵快传（B0Pass），它是一款基于Go语言的局域网大型文件传输工具，无论是在办公环境中还是
  • 推荐：LAN Share —— 跨平台局域网文件传输利器！ 班歆韦Divine
    推荐：LANShare——跨平台局域网文件传输利器！项目地址:https://gitcode.com/gh_mirrors/la/LAN-Share在数字化的工作和生活中，快速、便捷地分享文件是必不可少的需求。而LANShare，作为一个跨平台的本地局域网文件传输应用，恰好提供了这样一个简单高效的解决方案。1、项目介绍LANShare利用QtGUI框架构建，允许你在同一局域网内的设备间无配置地即时
  • Vue前端 向 后端Flask 传文件数据并保存 battlestar Python学习vue.jsflask文件上传
    简介采用vue编写前端，上传图像文件，发送到后端flask，由后端保存前端代码exportdefault{methods:
  • electron-vue实现与硬件进行串口通信 闲人孙大壮 electronnpmnode.jsvue.jselectron
    背景：项目需求，在electron桌面应用中，实现与硬件进行串口通信，一番调研，选择了契合度高的serialport插件地址：NodeSerialport插件选择好了，接下来就是集成实现功能，它这个集成是有坑的因为版本的问题，导致在集成完后报错在网上查了各种错误，最终总结为以下步骤：前置条件1.确保你的电脑中装有python环境，并且环境为2.7（很重要）2.安装npminstall--globa
  • 让Pluto SDR完全脱机执行任务——实现开机运行特定脚本/程序 Kloz matlab开发语言经验分享linux笔记
    在我之前的关于交叉编译的文章中，讨论了如何使用Linaro工具链在Ubuntu主机上编译能在PlutoSDR的arm核上运行的可执行程序，但仅仅这样还不足，因为想要让PlutoSDR执行某个特定任务，首先需要在主机交叉编译，然后通过scp命令传送到PlutoSDR上，然后通过ssh进入到PlutoSDR的Linux系统中手动执行，才完成了一次（半）脱机运行，这并不优雅。本文讲解一种可以让Pluto
  • 数据库如何应对保障大促活动 2401_86087710 数据库oracle
    当前，随着电商节日的增多（6.18、双十一、双十二）、平台拉新趋于频繁，大促活动也越来越普遍。作为一个电商平台，每年都会有一次，甚至几次的流量“大考”。数据库作为系统的重要节点，其稳定性和性能格外重要，数据库的全力保障是一个大的挑战。电商大促，这场没有硝烟的战争很多人已有体会，在此不再赘述。现在，我们直接切入主题–数据库如何积极应对，全力保障大促活动。这个题目分解为三个部分进行讲解：第一部分，准备
  • There is insufficient memory for the Java Runtime Environment to continue 2401_86087710 java开发语言
    这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML图表FLowchart流程图导出与导入导出导入欢迎使用Mark
  • 20240619－James-快速鸟瞰并发编程, 呕心沥血整理的架构技术(第3篇)(1) 2401_84123213 程序员架构java开发语言
    |newCachedThreadPool|返回ExecutorService对象，该对象持有不同大小的线程池。||newSingleThreadScheduledExecutor|返回ScheduledExecutorService对象，只返回1个线程。||newScheduledThreadPool|返回一个ScheduledExecutorService核心线程集。||newWorkSteal
  • 缩位求和——蓝桥杯 走啦小孩 算法c++蓝桥杯数据结构
    1.题目描述在电子计算机普及以前，人们经常用一个粗略的方法来验算四则运算是否正确。比如：248×15=3720248×15=3720把乘数和被乘数分别逐位求和，如果是多位数再逐位求和，直到是1位数，得2+4+8=14==>1+4=51+5=65×6而结果逐位求和为3。5×6的结果逐位求和与3符合，说明正确的可能性很大！！（不能排除错误）请你写一个计算机程序，对给定的字符串逐位求和。输入描述输入描述
  • Python爬虫从入门到精通（三）简单爬虫的实现_爬虫tl 字节全栈_bgK python爬虫开发语言
    print(requests.get(‘http://example.webscraping.com’).text)**如果没有requests****库，则需要使用命令pipinstallrequests****安装一下；****说明：本讲义目前大部分代码以Python3.6****的代码位蓝本，讲义的附录A****中会将Python2****和Python3****在爬虫这块最主要几个库的对照
  • 手机Python爬虫教程：利用手机学习Python爬虫的终极指南_python可以在手机上写爬虫吗 字节全栈_bgK 智能手机python爬虫
    利用手机进行学习，你可以充分利用碎片化的时间段进行学习。无论是在公交车上还是等待朋友的时候，你都可以打开手机学习Python爬虫知识，提高学习效率。1.1灵活安排学习任务在利用碎片化时间学习时，你可以根据自己的学习进度和时间段的长度，灵活安排学习任务。可以选择浏览一些简单的知识点，阅读一篇相关文章，或者做一些小练习。通过合理安排学习任务，你可以在有限的时间内完成一些小的学习目标，逐渐累积学习成果。
  • JS混合加密,JS混淆加密,js混合加密工具-站长工具网 zhaoxiaoming4444 javascript网络开发语言phphtml5c语言
    JS混合加密、JS混淆加密和JS混合加密工具随着互联网技术的发展，网页安全问题越来越受到关注。为了提高网页的安全性，一些加密技术被广泛应用。其中，JS混合加密、JS混淆加密和JS混合加密工具是三种常用的技术。本文将介绍这些技术的概念、应用和工具，帮助站长更好地保护网站的安全。一、JS混合加密JS混合加密是一种将加密算法与JavaScript代码相结合的技术。它通过将敏感信息加密后存储在JavaSc
  • Diffusion--人工智能领域的革命性技术 油泼辣子多加 专业名词解释人工智能
    在人工智能领域，“diffusion”一词通常指的是“扩散模型”（DiffusionModels），其全称为“DenoisingDiffusionProbabilisticModels”（DDPMs）。扩散模型是一类生成式模型，它通过逐步去噪的方式，从随机噪声中生成高质量的数据，近年来在图像、音频、视频等多个领域取得了显著进展。1.发展历史扩散模型的概念源于物理学中的扩散过程，即粒子在介质中的随机
  • 互联网公司组织架构 yimenglin 资讯组织架构
    通常情况下，各公司会根据自己的情况，采用不同的组织架构。有些公司会选择使用扁平式的组织架构，就是各职能单位各自独立，彼此之间通过管理人员与部门员工的频繁沟通、呼应，来解决各种问题；有些公司则选择项目组式的组织架构，以项目为中心，将项目所需的人员集中在一个Team中；还有些公司会采用混合式的组织架构，一部分采用项目组式管理，而另一部分则采用扁平化管理。但无论组织架构如何调整，事儿还是那些事儿，都得有
  • Apache Tomcat 漏洞CVE-2024-50379条件竞争文件上传漏洞 servlet readonly spring boot 修复方式 李三醒 apachetomcatspringboot
    1，关于漏洞ApacheTomcat是一个流行的开源Web服务器和JavaServlet容器。二、漏洞描述ApacheTomcat中修复了个TOCTOU竞争条件远程代码执行漏洞(CVE-2024-50379)，该漏洞的CVSS评分为9.8。ApacheTomcat中JSP编译期间存在检查时间使用时间(TOCTOU)竞争条件漏洞，当ApacheTomcat的默认servlet被配置为允许写入（即re
  • Spring4.1新特性——Spring MVC增强 jinnianshilongnian spring 4.1
    目录 Spring4.1新特性——综述 Spring4.1新特性——Spring核心部分及其他 Spring4.1新特性——Spring缓存框架增强 Spring4.1新特性——异步调用和事件机制的异常处理 Spring4.1新特性——数据库集成测试脚本初始化 Spring4.1新特性——Spring MVC增强 Spring4.1新特性——页面自动化测试框架Spring MVC T
  • mysql 性能查询优化 annan211 javasql优化mysql应用服务器
    1 时间到底花在哪了？ mysql在执行查询的时候需要执行一系列的子任务，这些子任务包含了整个查询周期最重要的阶段，这其中包含了大量为了 检索数据列到存储引擎的调用以及调用后的数据处理，包括排序、分组等。在完成这些任务的时候，查询需要在不同的地方 花费时间，包括网络、cpu计算、生成统计信息和执行计划、锁等待等。尤其是向底层存储引擎检索数据的调用操作。这些调用需要在内存操
  • windows系统配置 cherishLC windows
    删除Hiberfil.sys ：使用命令powercfg -h off 关闭休眠功能即可： http://jingyan.baidu.com/article/f3ad7d0fc0992e09c2345b51.html 类似的还有pagefile.sys msconfig 配置启动项 shutdown 定时关机 ipconfig 查看网络配置 ipconfig /flushdns
  • 人体的排毒时间 Array_06 工作
    ======================== ||  人体的排毒时间是什么时候？|| ======================== 转载于： http://zhidao.baidu.com/link?url=ibaGlicVslAQhVdWWVevU4TMjhiKaNBWCpZ1NS6igCQ78EkNJZFsEjCjl3T5EdXU9SaPg04bh8MbY1bR
  • ZooKeeper cugfy zookeeper
    Zookeeper是一个高性能，分布式的，开源分布式应用协调服务。它提供了简单原始的功能，分布式应用可以基于它实现更高级的服务，比如同步， 配置管理，集群管理，名空间。它被设计为易于编程，使用文件系统目录树作为数据模型。服务端跑在java上，提供java和C的客户端API。 Zookeeper是Google的Chubby一个开源的实现，是高有效和可靠的协同工作系统，Zookeeper能够用来lea
  • 网络爬虫的乱码处理 随意而生 爬虫网络
    下边简单总结下关于网络爬虫的乱码处理。注意，这里不仅是中文乱码，还包括一些如日文、韩文 、俄文、藏文之类的乱码处理，因为他们的解决方式 是一致的，故在此统一说明。     网络爬虫，有两种选择，一是选择nutch、hetriex，二是自写爬虫，两者在处理乱码时，原理是一致的，但前者处理乱码时，要看懂源码后进行修改才可以，所以要废劲一些；而后者更自由方便，可以在编码处理
  • Xcode常用快捷键 张亚雄 xcode
    一、总结的常用命令：     隐藏xcode command+h     退出xcode command+q     关闭窗口 command+w     关闭所有窗口 command+option+w     关闭当前
  • mongoDB索引操作 adminjun mongodb索引
    一、索引基础：    MongoDB的索引几乎与传统的关系型数据库一模一样，这其中也包括一些基本的优化技巧。下面是创建索引的命令：    > db.test.ensureIndex({"username":1})    可以通过下面的名称查看索引是否已经成功建立： &nbs
  • 成都软件园实习那些话 aijuans 成都 软件园 实习
    无聊之中，翻了一下日志，发现上一篇经历是很久以前的事了，悔过~~ 　　断断续续离开了学校快一年了，习惯了那里一天天的幼稚、成长的环境，到这里有点与世隔绝的感觉。不过还好，那是刚到这里时的想法，现在感觉在这挺好，不管怎么样，最要感谢的还是老师能给这么好的一次催化成长的机会，在这里确实看到了好多好多能想到或想不到的东西。 　　都说在外面和学校相比最明显的差距就是与人相处比较困难，因为在外面每个人都
  • Linux下FTP服务器安装及配置 ayaoxinchao linuxFTP服务器vsftp
    检测是否安装了FTP [root@localhost ~]# rpm -q vsftpd 如果未安装：package vsftpd is not installed  安装了则显示：vsftpd-2.0.5-28.el5累死的版本信息   安装FTP 运行yum install vsftpd命令，如[root@localhost ~]# yum install vsf
  • 使用mongo-java-driver获取文档id和查找文档 BigBird2012 driver
    注：本文所有代码都使用的mongo-java-driver实现。   在MongoDB中，一个集合（collection）在概念上就类似我们SQL数据库中的表（Table），这个集合包含了一系列文档（document）。一个DBObject对象表示我们想添加到集合（collection）中的一个文档（document），MongoDB会自动为我们创建的每个文档添加一个id，这个id在
  • JSONObject以及json串 bijian1013 jsonJSONObject
    一.JAR包简介     要使程序可以运行必须引入JSON-lib包，JSON-lib包同时依赖于以下的JAR包：     1.commons-lang-2.0.jar     2.commons-beanutils-1.7.0.jar     3.commons-collections-3.1.jar &n
  • [Zookeeper学习笔记之三]Zookeeper实例创建和会话建立的异步特性 bit1129 zookeeper
    为了说明问题，看个简单的代码，   import org.apache.zookeeper.*; import java.io.IOException; import java.util.concurrent.CountDownLatch; import java.util.concurrent.ThreadLocal
  • 【Scala十二】Scala核心六：Trait bit1129 scala
    Traits are a fundamental unit of code reuse in Scala. A trait encapsulates method and field definitions, which can then be reused by mixing them into classes. Unlike class inheritance, in which each c
  • weblogic version 10.3破解 ronin47 weblogic
    版本：WebLogic Server 10.3 说明：%DOMAIN_HOME%：指WebLogic Server 域(Domain）目录 例如我的做测试的域的根目录 DOMAIN_HOME=D:/Weblogic/Middleware/user_projects/domains/base_domain 1.为了保证操作安全，备份%DOMAIN_HOME%/security/Defa
  • 求第n个斐波那契数 BrokenDreams
            今天看到群友发的一个问题：写一个小程序打印第n个斐波那契数。         自己试了下，搞了好久。。。基础要加强了。           &nbs
  • 读《研磨设计模式》-代码笔记-访问者模式-Visitor bylijinnan java设计模式
    声明： 本文只为方便我个人查阅和理解，详细的分析以及源代码请移步 原作者的博客http://chjavach.iteye.com/ import java.util.ArrayList; import java.util.List; interface IVisitor { //第二次分派，Visitor调用Element void visitConcret
  • MatConvNet的excise 3改为网络配置文件形式 cherishLC matlab
    MatConvNet为vlFeat作者写的matlab下的卷积神经网络工具包，可以使用GPU。 主页： http://www.vlfeat.org/matconvnet/ 教程： http://www.robots.ox.ac.uk/~vgg/practicals/cnn/index.html 注意：需要下载新版的MatConvNet替换掉教程中工具包中的matconvnet： http
  • ZK Timeout再讨论 chenchao051 zookeepertimeouthbase
    http://crazyjvm.iteye.com/blog/1693757 文中提到相关超时问题，但是又出现了一个问题，我把min和max都设置成了180000，但是仍然出现了以下的异常信息： Client session timed out, have not heard from server in 154339ms for sessionid 0x13a3f7732340003
  • CASE WHEN 用法介绍 daizj sqlgroup bycase when
    CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数  CASE sex  WHEN '1' THEN '男'  WHEN '2' THEN '女'  ELSE '其他' END  --Case搜索函数  CASE WHEN sex = '1' THEN
  • PHP技巧汇总:提高PHP性能的53个技巧 dcj3sjt126com PHP
    PHP技巧汇总:提高PHP性能的53个技巧　　用单引号代替双引号来包含字符串，这样做会更快一些。因为PHP会在双引号包围的字符串中搜寻变量，　　单引号则不会，注意：只有echo能这么做，它是一种可以把多个字符串当作参数的函数译注：　　PHP手册中说echo是语言结构，不是真正的函数，故把函数加上了双引号)。　　1、如果能将类的方法定义成static，就尽量定义成static，它的速度会提升将近4倍
  • Yii框架中CGridView的使用方法以及详细示例 dcj3sjt126com yii
    CGridView显示一个数据项的列表中的一个表。 表中的每一行代表一个数据项的数据,和一个列通常代表一个属性的物品(一些列可能对应于复杂的表达式的属性或静态文本)。　　CGridView既支持排序和分页的数据项。排序和分页可以在AJAX模式或正常的页面请求。使用CGridView的一个好处是,当用户浏览器禁用JavaScript,排序和分页自动退化普通页面请求和仍然正常运行。 实例代码如下：
  • Maven项目打包成可执行Jar文件 dyy_gusi assembly
    Maven项目打包成可执行Jar文件 在使用Maven完成项目以后，如果是需要打包成可执行的Jar文件，我们通过eclipse的导出很麻烦，还得指定入口文件的位置，还得说明依赖的jar包，既然都使用Maven了，很重要的一个目的就是让这些繁琐的操作简单。我们可以通过插件完成这项工作，使用assembly插件。具体使用方式如下： 1、在项目中加入插件的依赖： <plugin>
  • php常见错误 geeksun PHP
    1.  kevent() reported that connect() failed (61: Connection refused) while connecting to upstream, client: 127.0.0.1, server: localhost, request: "GET / HTTP/1.1", upstream: "fastc
  • 修改linux的用户名 hongtoushizi linuxchange password
    Change Linux Username 更改Linux用户名，需要修改4个系统的文件： /etc/passwd /etc/shadow /etc/group /etc/gshadow 古老/传统的方法是使用vi去直接修改，但是这有安全隐患（具体可自己搜一下），所以后来改成使用这些命令去代替： vipw vipw -s vigr vigr -s   具体的操作顺
  • 第五章 常用Lua开发库1-redis、mysql、http客户端 jinnianshilongnian nginxlua
    对于开发来说需要有好的生态开发库来辅助我们快速开发，而Lua中也有大多数我们需要的第三方开发库如Redis、Memcached、Mysql、Http客户端、JSON、模板引擎等。 一些常见的Lua库可以在github上搜索，https://github.com/search?utf8=%E2%9C%93&q=lua+resty。   Redis客户端 lua-resty-r
  • zkClient 监控机制实现 liyonghui160com zkClient 监控机制实现
             直接使用zk的api实现业务功能比较繁琐。因为要处理session loss，session expire等异常，在发生这些异常后进行重连。又因为ZK的watcher是一次性的，如果要基于wather实现发布/订阅模式，还要自己包装一下，将一次性订阅包装成持久订阅。另外如果要使用抽象级别更高的功能，比如分布式锁，leader选举
  • 在Mysql 众多表中查找一个表名或者字段名的 SQL 语句 pda158 mysql
    在Mysql 众多表中查找一个表名或者字段名的 SQL 语句： 　　方法一：SELECT table_name, column_name from information_schema.columns WHERE column_name LIKE 'Name'; 　　方法二：SELECT column_name from information_schema.colum
  • 程序员对英语的依赖 Smile.zeng 英语程序猿
    1、程序员最基本的技能，至少要能写得出代码，当我们还在为建立类的时候思考用什么单词发牢骚的时候，英语与别人的差距就直接表现出来咯。 2、程序员最起码能认识开发工具里的英语单词，不然怎么知道使用这些开发工具。 3、进阶一点，就是能读懂别人的代码，有利于我们学习人家的思路和技术。 4、写的程序至少能有一定的可读性，至少要人别人能懂吧... 以上一些问题，充分说明了英语对程序猿的重要性。骚年
  • Oracle学习笔记(8) 使用PLSQL编写触发器 vipbooks oraclesql编程活动Access
        时间过得真快啊，转眼就到了Oracle学习笔记的最后个章节了，通过前面七章的学习大家应该对Oracle编程有了一定了了解了吧，这东东如果一段时间不用很快就会忘记了，所以我会把自己学习过的东西做好详细的笔记，用到的时候可以随时查找，马上上手！希望这些笔记能对大家有些帮助！     这是第八章的学习笔记，学习完第七章的子程序和包之后
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他