呆呆papa
呆呆papa

JavaScript实现一个手机验证码输入框

1、使用 span + input 标签实现

设计思路：

  • 使用一个透明的 input 组件来接收验证码
  • 利用 onkeyup 事件，将 input 中的数字写入到 span 中（span的个数和验证码的数量一致）

事件处理：

  • 屏蔽input输入框的所有事件（这里是将input的高度置0），让用户点不到这个input
  • 动态给span标签添加click事件，并且保证一组span中只能有一个持有click事件

效果如下：
JavaScript实现一个手机验证码输入框_第1张图片

代码实现：


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>title>
	<style type="text/css">
		body{
			height: 100vh;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		div{
			position: relative;
		}
		div span{
			display: block;
			float: left;
			margin: 0 0.3125rem;
			width: 2.1875rem;
			height: 2.1875rem;
			line-height: 2.1875rem;
			border: 2px solid black;
			text-align: center;
			border-radius: 0.3125rem;
		}
		div>span:nth-child(1){
			border-color: orange;
		}
		/* 将input隐藏起来 */
		div input{
			width: 0.0625rem;
			height: 0;
			line-height: 1.875rem;
			font-size: 0.5rem;
			position: absolute;
			left: 0.3125rem;
			opacity: 0;
			/* 给他一个层级保证无法点到input */
			z-index: -5;
		}
	style>
head>
<body>
	<div>
		<span>span>
		<span>span>
		<span>span>
		<span>span>
		<span>span>
		<span>span>
		<input type="number" oninput="if(value.length>6)value=value.slice(0,6)" checked="checked" onkeyup="showText(this.value)" autofocus="autofocus"/>
	div>
	<script type="text/javascript">
		window.onload=function(){
			document.getElementsByTagName("span")[0].addEventListener("click",gotFocus)
		}
		function showText(value){
			var cur = document.getElementsByTagName("span")[value.length];
			var pre = document.getElementsByTagName("span")[value.length-1];
			var next = document.getElementsByTagName("span")[value.length+1];
			if(cur){
				cur.innerHTML = "";
				cur.style.borderColor = "orange";
				cur.addEventListener("click",gotFocus);
			}
			if(pre){
				pre.innerHTML = value.charAt(value.length-1);
				pre.style.borderColor = "black";
				pre.removeEventListener("click",gotFocus);
			}
			if(next){
				next.innerHTML = "";
				next.style.borderColor = "black";
				next.removeEventListener("click",gotFocus);
			}
		}
		function gotFocus(e){
			e.stopPropagation();
			document.getElementsByTagName("input")[0].focus();
		}
	script>
body>
html>

注：不可以直接复制验证码粘贴，可以通过修改showText的逻辑来实现复制粘贴验证码

2、使用多个 input 标签实现

设计思路：

  • 根据需要选择多个input标签存放验证码的每一位数字，需要获取多个输入框的数字拼接为最终验证码。

事件处理：

  • 一组input保证只有0个或1个input能够获得焦点
  • 获得焦点的input的value一定为空
  • 根据是否点击删除（keyCode为8）按钮，来确定光标移动方向

效果演示：
JavaScript实现一个手机验证码输入框_第2张图片

代码实现：


<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>title>
	<style type="text/css">	
		body{
				height: 100vh;
				display: flex;
				justify-content: center;
				align-items: center;
		}
		/* 每一个input输入框的样式 */
		div input{
			width: 2.375rem;
			height: 2.375rem;
			line-height: 2.375rem;
			text-align: center;
			background-color: #eeeeee;
			margin: 0 0.3125rem;
			border-radius: 0.625rem;
			border: none;
		}
		div input:focus{
			/* 去掉input框获得焦点时的外边框 */
			outline: none;
		}
	style>
head>
<body>
	<div>
		
		
		
		<input type="number" oninput="value=value.replace(/[^\d]/g,'')" onkeyup="moveCursor()" autofocus="autofocus"/>
		<input type="number" oninput="value=value.replace(/[^\d]/g,'')" onkeyup="moveCursor()">
		<input type="number" oninput="value=value.replace(/[^\d]/g,'')" onkeyup="moveCursor()">
		<input type="number" oninput="value=value.replace(/[^\d]/g,'')" onkeyup="moveCursor()">
		<input type="number" oninput="value=value.replace(/[^\d]/g,'')" onkeyup="moveCursor()">
		<input type="number" oninput="value=value.replace(/[^\d]/g,'')" onkeyup="moveCursor()">
	div>
	<script type="text/javascript">
		
		var index = 0;	//标识哪一个input框获得焦点（光标），获得焦点的input框value值为空
		var key;
		// 获取用户每一次点击键盘的按键值 => 按键值为8时为删除键
		document.onkeydown=function(event){
		  key = event.keyCode;
		}; 
		window.onload=function(){
			// 除了第一个input，其他input无法获取焦点
			var arr = document.getElementsByTagName("input");
			for(var i = 1; i < arr.length; i++){
				arr[i].addEventListener("focus",forbidFoucs);
			}
		};
		function moveCursor(){
			var pre = document.getElementsByTagName("input")[index];
			if(key != 8 && pre.value.length != 0){
				// 若用户点击的是删除键，或者其他非数字按键（非数字按键不会改变input输入框中的value）=> input的焦点需要后移，同时让前一个input无法获取焦点
				pre.addEventListener("focus",forbidFoucs)
				if(index < 5) {
					// 光标最远只能移动到最后一个input，也就是 index 为 5 指向的input
					var obj = document.getElementsByTagName("input")[++index];
					obj.removeEventListener("focus",forbidFoucs);
					obj.focus();
				}else{
					// 当 index 走到 6 时，就需要让最后一个input失去焦点
					pre.blur();
					/**
					 * 此处写业务逻辑代码………………………………
					 */
				}
			}else{
				pre.addEventListener("focus",forbidFoucs);
				if(index > 0){
					// 当用户点击删除按钮的时候，需要删除前一个input中的内容，并将光标前移（限制光标不可跑飞）
					var obj = document.getElementsByTagName("input")[--index];
					obj.removeEventListener("focus",forbidFoucs);
					obj.value = "";
					obj.focus();
				}
			}
		}
		// 禁止用户通过点击获取input的焦点
		function forbidFoucs(){
			console.log(this)
			this.blur();
		}
	script>
body>
html>

注：所有代码在Android手机上已完成测试。

你可能感兴趣的:(JavaScript编程,javascript,html,H5,验证码)

  • 使用Python将PDF转换成word、PPT wh3933 pythonpdfword
    在现代企业环境中，文档格式的转换是一项普遍且关键的需求。PDF（PortableDocumentFormat）作为一种最终的、通常不可编辑的“打印”状态格式，被广泛用于分发和归档。然而，内容的创建、协作和修改主要在MicrosoftOffice套件中进行，特别是Word（DOCX）和PowerPoint（PPTX）。因此，以编程方式弥合这两种格式之间的鸿沟，已成为数据提取、内容迁移和工作流自动化领
  • Python设置国内镜像教程 wh3933 python开发语言
    ####引言Python是一种广泛使用的高级编程语言，用于各种编程任务，从简单的脚本到复杂的机器学习算法。在安装Python包时，通常需要从Python包索引（PyPI）下载。由于网络原因，直接从PyPI下载可能速度较慢，因此，使用国内的镜像源可以显著提高下载速度。本文将详细介绍如何在Python中设置国内镜像。####文章目的本篇文章旨在指导用户如何将Python的包管理工具`pip`的默认源切
  • 通俗易懂，一看就懂的React与Vue的区别 More more react.jsvue.js
    React和Vue是当前最主流的前端框架，对开发者而言，日常开发中它们的区别可以总结为以下几点（用实际场景举例说明）：一、写模板的方式不同React：用JSX（JavaScript+HTML混合写法），所有UI逻辑都在JavaScript中完成。Vue：用类似HTML的模板语法，逻辑和模板分离，但也可以通过JSX扩展。//React组件（JSX）functionButton(){const[cou
  • uni-app中view和text组件和动画的使用
    uni-app修炼之路（七）viewtext参考官方文档：https://uniapp.dcloud.io/component/viewview视图容器。它类似于传统html中的div，用于包裹各种元素内容。如果使用nvue，则需注意，包裹文字应该使用组件。属性说明属性名类型默认值说明hover-classStringnone指定按下去的样式类。当hover-class=“none”时，没有点击态
  • 【TypeScript教程】 - 小白也能秒懂的TypeScript入门指南 一个水瓶座程序猿. TypeScriptJavaScript系列文章typescriptjavascript前端
    一、TS是什么？TypeScript（简称TS）是JavaScript的一个超集，由微软开发。简单来说，它就是在JavaScript的基础上增加了静态类型检查。那静态类型检查有啥好处呢？举个例子，在JavaScript里，我们写代码时可能会不小心把一个变量的类型用错，像这样：//JavaScript代码letnum=10;num="hello";//这里把数字类型的变量赋值为字符串，运行时可能会出
  • vue在ios手机上的一些问题（这次写的h5公众号）和后面补充的小程序问题 摆烂兔 小程序uniappvue营地html5vue.js小程序uni-app
    坑一：使用定位fixed，底部导航不显示，代码我就不写，总结就是定位套定位，心累代码太多不想贴；坑二：禁止页面放大缩小，解决：Vue移动端禁止页面放大缩小_fuf_xyxnxss的博客-CSDN博客_移动端禁止放大缩小坑三：移动端h5页面禁止长按选择复制，解决：移动端h5页面禁止长按选择复制_艾欢欢的博客-CSDN博客坑四：苹果手机IOS点击输入框弹出键盘后，所有按钮点击位置上移，解决：苹果手机I
  • 解读国密非对称加密算法SM2 云水木石 详解国密算法数据安全
    本文先介绍非对称加密算法，然后聊一聊椭圆曲线密码算法（EllipticCurveCryptography，ECC），最后才是本文的主题国密非对称加密算法SM2。因为我的数学知识有限，对于算法涉及的一些复杂的理论知识，也是不懂，所以本文不会涉及理论，仅仅从编程的角度解读一下SM2。在进行国密算法开发的这段时间，我主要参考的书籍是《深入浅出HTTPS：从原理到实战》，微信读书上也有电子版，如果你也是进
  • css3:css的3种引入方式 ksw000 csscss3html
    css基本知识你好！这是你第一次使用css所需要了解的知识点。如果你想学习如何使用css,可以仔细阅读这篇文章，了解一下css的基本语法知识。CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。一、行内样式使用style属性引入CSS样式。示例：style属性的应用直接在HTML标签中设置的样式实际在写页面时不提倡使用，在测试的时候可以使用。行内样式LeapingAboveTheWater
  • 简述：link与@import区别
    区别：link属于html标签。@import在css中使用表示导入外部样式表；页面被加载的时，link会同时被加载，而@import引用的CSS会等到页面被加载完再加载;import只在IE5以上才能识别，而link是HTML标签，无兼容问题;link方式的样式的权重高于@import的权重；link支持使用javascript改变样式（document.styleSheets），后者不可使用场
  • CSS02：四种CSS导入方式 莓 有烦恼 css前端
    CSS的4种导入方式Titleh1{color:green;}我是标题/*外部样式*/h1{color:yellow;}拓展：外部样式的两种写法链接式html导入式css2.1@importurl("css/style.css");基本区别从属关系：是HTML标签，不仅可以加载CSS文件，还可以定义RSS、rel连接属性等；而@import是CSS提供的语法规则，只能导入样式表1。加载顺序：在页面
  • NestJS 系列教程（一）：认识 NestJS 与项目初始化 onebyte8bits nestjs后端javascript前端框架node.js
    NestJS系列教程（一）：认识NestJS与项目初始化✨前言NestJS是一个用于构建高效、可扩展Node.js服务端应用程序的框架。它使用TypeScript构建，结合了面向对象编程（OOP）、函数式编程（FP）和函数响应式编程（FRP）等概念，非常适合用于构建微服务、RESTfulAPI等现代服务端应用。本系列教程将以NestJS官方中文文档为蓝本，逐章精讲配套代码，带你系统学习这一现代No
  • 嵌入式入门学习——5了解寄存器如何控制单片机 星火嵌入式 嵌入式入门学习单片机
    0系列文章入口嵌入式入门学习——0快速入门，Let‘sDoIt！1.内容简介武侠的内功和招式之间的关系类似于编程中的技术和计算原理之间的关系。招式是千变万化的，而内功心法则稳定而深厚。内功心法的深度决定了可以学习的招式变术的上限高度。单片机的控制最终是要落实到寄存器上的。使用库函数或者使用高级语言是招式，了解单片机的寄存器则是内功。2.引言练习武功讲究内外兼修，一味学习技巧，而忽略本质的结果就是一
  • 从小白到进阶：解锁linux与c语言高级编程知识点嵌入式开发的任督二脉（3） small_wh1te_coder c嵌入式linuxc语言汇编c++嵌入式硬件面试
    【硬核揭秘】Linux与C高级编程：从入门到精通，你的全栈之路！第五部分：C语言高级编程——结构体、共用体、枚举、内存管理、GDB调试、Makefile全解析嘿，各位C语言的“卷王”们！在前面的旅程中，我们深入探索了Linux的奥秘，从命令行操作到Shell脚本编程，再到网络文件服务，你的Linux技能已经突飞猛进。现在，是时候回到我们的“老本行”——C语言了！你可能已经能够编写各种简单的C程序，
  • Socket编程——TCP 兰雪簪轩 Linuxtcp/ip网络协议网络
    文章目录一、TCP编程基础TCPsocketAPIsocket二、EchoServer对于服务端对于客户端server.hppServer.ccClient.ccCommandExec.hpp一、TCP编程基础TCP协议和UDP协议都属于网络通信协议，TCP协议是面向字节流的，UDP协议是面向数据报，这个特点后面会详谈的。对于现在来说UDP和TCP的区别为：UDP协议不需要连接，即报文一来就立刻进
  • FeignClient客户端调用入门 超龄超能程序猿 javaspring
    在分布式微服务架构广泛应用的技术背景下，服务间通信机制的设计与实现已成为系统开发的核心环节。Feign作为一种基于声明式编程范式的HTTP客户端框架，通过标准化的接口定义与注解配置，显著降低了Web服务调用的开发复杂度，有效提升了微服务间的交互效率。在SpringCloud技术栈体系中，Feign客户端功能的实现主要依托于@FeignClient注解，该注解通过整合Spring框架的依赖注入与动态
  • App Trace功能实战：一键拉起、快速安装与免提写邀请码的应用实践 tongjiwenzhang 经验分享信息可视化大数据携带参数安装
    一、功能概述与业务价值作为移动端技术负责人，我们实现的AppTrace系统已成为公司用户增长的核心引擎。这套系统通过三大功能显著提升了关键指标：一键拉起：将H5/广告页用户转化率提升47%快速安装：应用商店跳转安装成功率提升至92%免提写邀请码：邀请注册转化率提高63%二、技术架构与实现细节1.一键拉起的技术实现Android端实现方案：//DeepLink路由分发器classTraceRoute
  • JavaScript与原生开发的较量：为何高性能可视化应用更适合选用SciChart？ 界面开发小八哥 javascript开发语言SciChart图表工具数据可视化
    SciChart是高性能数据可视化领域的优秀图表产品，深受数据密度和精度至关重要行业的信赖，包括航空航天、石油和天然气、科学研究和赛车运动等。作为F1中使用的解决方案，SciChart被NASA所依赖，并受到90%的顶级医疗技术公司青睐，它提供实时、跨平台的可视化，提供无与伦比的灵活性和定制性。立即获取SciChart正式版在为iOS和Android打造高性能数据可视化应用时，选择合适的开发方式至
  • R 语言安装使用教程 小奇JAVA面试 安装使用教程r语言开发语言
    一、R语言简介R是一种用于统计分析、数据挖掘和可视化的编程语言和环境。它在学术界和数据分析领域中广泛使用，拥有丰富的统计函数库和绘图功能。二、安装R语言2.1下载R安装包前往CRAN官网下载适合你操作系统的安装程序：官网地址：https://cran.r-project.org/2.2Windows安装下载.exe安装包；双击安装程序，按默认选项一路安装即可；安装完成后，可通过RGUI或命令行启动
  • JavaScript浅拷贝与深拷贝 旺代 JavaScript前端javascript开发语言
    目录浅拷贝（ShallowCopy）一、浅拷贝的定义二、直接赋值vs浅拷贝1.直接赋值2.浅拷贝三、数组的浅拷贝方法1.slice()2.concat()3.扩展运算符（...）四、对象的浅拷贝方法1.Object.assign()2.扩展运算符（...）五、浅拷贝的局限性六、总结深拷贝（DeepCopy）一、深拷贝的定义二、深拷贝的常见实现方式1.JSON.parse(JSON.stringif
  • 介绍electron 几道之旅 electronjavascript前端
    一、Electron是什么？Electron是一个基于Chromium和Node.js的框架，允许开发者使用前端技术（HTML/CSS/JavaScript）构建原生桌面应用。其核心优势在于：跨平台：一次开发，生成Windows、macOS、Linux三端应用；技术栈统一：前端开发者无需学习新语言，直接复用Web生态（如Vue/React）；混合架构：Chromium：负责渲染界面，支持现代CSS
  • LK32T102学习2-GPIO
    GPIO即可编程输入输出口，LK32T102有3组GPIO口，每组最多32条口线。GPIO口线可以实现很多的功能，可以说掌握了GPIO功能也就MCU编程也就基本实现了MCU的入门。GPIO功能使用要注意LTK320T的管脚是多功能的，可作为数字量管脚，也可以作为模拟量管脚。输入模式浮空输入模式输入完全由外部输入决定PU，PD都不导通上拉输入模式IO悬空时输入为高电平PU导通，PD不导通下拉输入模式
  • Flutter中Material的介绍 zhouzhengqian flutterflutter
    Flutter是一个由Google开发的开源UI工具包，用于在移动、Web和桌面平台上构建高性能、美观的本地用户界面。Flutter使用Dart编程语言，具有热重载（HotReload）功能，可以快速方便地进行开发、测试和构建应用。MaterialDesign是由Google提出的一种设计语言，用于创建现代、直观、一致的用户界面。Flutter提供了一个名为material的包，它实现了Mater
  • 介绍Flutter
    一、Flutter的核心优势：不止于跨平台高性能原生渲染自研引擎Skia：直接调用GPU绘制UI，绕过原生控件依赖，消除JavaScript桥接性能损耗，实现60fps流畅动画。三棵树渲染机制（Widget-Element-RenderObject）：通过差异化更新最小化重绘范围，效率远超传统WebView方案。极速开发体验热重载（HotReload）：代码修改后毫秒级生效，保留应用状态调试，开发
  • Vue-Vue 中 v-html 内容不换行？别忘了 white-space: pre-wrap
    目录引言问题复现原因解析HTML中不会自动识别\n如何让换行符生效？正确解决方案拓展知识点：white-space的几种常见取值安全性提示：小心XSS攻击总结引言在开发Vue项目的过程中，我们经常会遇到需要将服务端返回的HTML字符串渲染到页面上的需求，最常用的方式就是通过v-html指令。但你是否遇到过这样的情况：文本中明明有\n换行符，页面上却完全没有换行，所有文字都被渲染成一行？本文将详细剖
  • 力扣网编程122题：买卖股票的最佳时机II
    一.简介本文记录力扣网上涉及数组方面的编程题：买卖股票的最佳时机II。二.力扣网编程122题：买卖股票的最佳时机II给你一个整数数组prices，其中prices[i]表示某支股票第i天的价格。在每一天，你可以决定是否购买和/或出售股票。你在任何时候最多只能持有一股股票。你也可以先购买，然后在同一天出售。返回你能获得的最大利润。示例1：输入：prices=[7,1,5,3,6,4]输出：7解释：在
  • 力扣网编程55题：跳跃游戏之贪心算法 魏劭 逻辑编程题算法leetcode
    一.简介本文记录力扣网上涉及数组方面的编程题：跳跃游戏。二.力扣网编程55题：跳跃游戏给你一个非负整数数组nums，你最初位于数组的第一个下标。数组中的每个元素代表你在该位置可以跳跃的最大长度。判断你是否能够到达最后一个下标，如果可以，返回true；否则，返回false。示例1：输入：nums=[2,3,1,1,4]输出：true解释：可以先跳1步，从下标0到达下标1,然后再从下标1跳3步到达最后
  • 力扣网编程121题：买卖股票的最佳时机之动态规划（简单） 魏劭 逻辑编程题C语言leetcode动态规划算法
    一.简介前一篇文章使用贪心算法实现了力扣网上121题：买卖股票的最佳时机，文章如下：力扣网编程189题：买卖股票的最佳时机之贪心算法（简单）-CSDN博客本文使用动态规划实现该题目。二.力扣网编程189题：买卖股票的最佳时机之动态规划（简单）给定一个数组prices，它的第i个元素prices[i]表示一支给定股票第i天的价格。你只能选择某一天买入这只股票，并选择在未来的某一个不同的日子卖出该股票
  • 【性能优化与架构调优（一）】Java 应用性能优化
    Java应用性能优化：从JVM到并发编程的全方位解析一、JVM调优：打造高性能运行环境1.1JVM内存模型与核心参数配置JVM内存结构主要包含堆(Heap)、栈(Stack)、方法区(MethodArea)、本地方法栈(NativeMethodStack)和程序计数器(PCRegister)。其中，堆是GC的主要区域，可通过以下参数进行调优：#JVM启动参数示例（以生产环境常用配置为例）java-
  • 电商API性能优化：策略体系与实施要点 Joe13265449558 性能优化电商返回值淘宝API接口京东
    电商API性能优化策略介绍在电商领域，API（应用程序编程接口）作为连接电商平台与外部系统、服务或应用的关键桥梁，其性能直接关系到用户体验、业务效率以及系统的整体稳定性。随着电商业务的快速发展，API接口面临着高并发、大数据量处理等挑战，因此，对电商API进行性能优化显得尤为重要。本文将从多个维度探讨电商API性能优化的策略。一、数据库优化策略数据库是电商API接口的核心组件之一，其性能直接影响A
  • Kotlin 安装使用教程 小奇JAVA面试 安装使用教程kotlin开发语言android
    一、Kotlin简介Kotlin是JetBrains开发的一种现代、静态类型的编程语言，完全兼容Java，主要应用于Android开发、后端服务开发、前端Web开发（Kotlin/JS）和多平台开发（KotlinMultiplatform）。二、Kotlin安装方式2.1使用IntelliJIDEA（推荐）下载IntelliJIDEA（社区版即可）：https://www.jetbrains.co
  • 继之前的线程循环加到窗口中运行 3213213333332132 javathreadJFrameJPanel
    之前写了有关java线程的循环执行和结束，因为想制作成exe文件，想把执行的效果加到窗口上，所以就结合了JFrame和JPanel写了这个程序，这里直接贴出代码，在窗口上运行的效果下面有附图。 package thread; import java.awt.Graphics; import java.text.SimpleDateFormat; import java.util
  • linux 常用命令 BlueSkator linux命令
    1.grep 相信这个命令可以说是大家最常用的命令之一了。尤其是查询生产环境的日志，这个命令绝对是必不可少的。 但之前总是习惯于使用 （grep -n 关键字 文件名 ）查出关键字以及该关键字所在的行数，然后再用 （sed -n  '100,200p' 文件名），去查出该关键字之后的日志内容。 但其实还有更简便的办法，就是用（grep  -B n、-A n、-C n 关键
  • php heredoc原文档和nowdoc语法 dcj3sjt126com PHPheredocnowdoc
    <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Current To-Do List</title> </head> <body> <?
  • overflow的属性 周华华 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&q
  • 《我所了解的Java》——总体目录 g21121 java
            准备用一年左右时间写一个系列的文章《我所了解的Java》，目录及内容会不断完善及调整。         在编写相关内容时难免出现笔误、代码无法执行、名词理解错误等，请大家及时指出，我会第一时间更正。    &n
  • [简单]docx4j常用方法小结 53873039oycg docx
            本代码基于docx4j-3.2.0，在office word 2007上测试通过。代码如下:         import java.io.File; import java.io.FileInputStream; import ja
  • Spring配置学习 云端月影 spring配置
    首先来看一个标准的Spring配置文件 applicationContext.xml <?xml version="1.0" encoding="UTF-8"?> <beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi=&q
  • Java新手入门的30个基本概念三 aijuans java新手java 入门
    17.Java中的每一个类都是从Object类扩展而来的。　　18.object类中的equal和toString方法。　　equal用于测试一个对象是否同另一个对象相等。　　toString返回一个代表该对象的字符串,几乎每一个类都会重载该方法,以便返回当前状态的正确表示.(toString 方法是一个很重要的方法)　　 19.通用编程:任何类类型的所有值都可以同object类性的变量来代替。　
  • 《2008 IBM Rational 软件开发高峰论坛会议》小记 antonyup_2006 软件测试敏捷开发项目管理IBM活动
    我一直想写些总结,用于交流和备忘,然都没提笔,今以一篇参加活动的感受小记开个头,呵呵! 其实参加《2008 IBM Rational 软件开发高峰论坛会议》是9月4号,那天刚好调休.但接着项目颇为忙,所以今天在中秋佳节的假期里整理了下. 参加这次活动是一个朋友给的一个邀请书,才知道有这样的一个活动,虽然现在项目暂时没用到IBM的解决方案,但觉的参与这样一个活动可以拓宽下视野和相关知识.
  • PL/SQL的过程编程,异常,声明变量,PL/SQL块 百合不是茶 PL/SQL的过程编程异常PL/SQL块声明变量
    PL/SQL;    过程; 符号; 变量; PL/SQL块; 输出; 异常;     PL/SQL 是过程语言(Procedural Language)与结构化查询语言(SQL)结合而成的编程语言PL/SQL 是对 SQL 的扩展,sql的执行时每次都要写操作
  • Mockito(三)--完整功能介绍 bijian1013 持续集成mockito单元测试
            mockito官网：http://code.google.com/p/mockito/，打开documentation可以看到官方最新的文档资料。 一.使用mockito验证行为 //首先要import Mockito import static org.mockito.Mockito.*; //mo
  • 精通Oracle10编程SQL(8)使用复合数据类型 bijian1013 oracle数据库plsql
    /* *使用复合数据类型 */ --PL/SQL记录 --定义PL/SQL记录 --自定义PL/SQL记录 DECLARE TYPE emp_record_type IS RECORD( name emp.ename%TYPE, salary emp.sal%TYPE, dno emp.deptno%TYPE ); emp_
  • 【Linux常用命令一】grep命令 bit1129 Linux常用命令
    grep命令格式   grep [option] pattern [file-list]     grep命令用于在指定的文件(一个或者多个,file-list)中查找包含模式串(pattern)的行,[option]用于控制grep命令的查找方式。   pattern可以是普通字符串，也可以是正则表达式，当查找的字符串包含正则表达式字符或者特
  • mybatis3入门学习笔记 白糖_ sqlibatisqqjdbc配置管理
    MyBatis 的前身就是iBatis，是一个数据持久层(ORM)框架。  MyBatis 是支持普通 SQL 查询，存储过程和高级映射的优秀持久层框架。MyBatis对JDBC进行了一次很浅的封装。   以前也学过iBatis，因为MyBatis是iBatis的升级版本，最初以为改动应该不大，实际结果是MyBatis对配置文件进行了一些大的改动，使整个框架更加方便人性化。
  • Linux 命令神器：lsof 入门 ronin47 lsof
           lsof是系统管理/安全的尤伯工具。我大多数时候用它来从系统获得与网络连接相关的信息，但那只是这个强大而又鲜为人知的应用的第一步。将这个工具称之为lsof真实名副其实，因为它是指“列出打开文件（lists openfiles）”。而有一点要切记，在Unix中一切（包括网络套接口）都是文件。 有趣的是，lsof也是有着最多
  • java实现两个大数相加，可能存在溢出。 bylijinnan java实现
    import java.math.BigInteger; import java.util.regex.Matcher; import java.util.regex.Pattern; public class BigIntegerAddition { /** * 题目：java实现两个大数相加，可能存在溢出。 * 如123456789 + 987654321
  • Kettle学习资料分享，附大神用Kettle的一套流程完成对整个数据库迁移方法 Kai_Ge Kettle
    Kettle学习资料分享   Kettle 3.2 使用说明书 目录 概述..........................................................................................................................................7 1.Kettle 资源库管
  • [货币与金融]钢之炼金术士 comsci 金融
           自古以来,都有一些人在从事炼金术的工作.........但是很少有成功的        那么随着人类在理论物理和工程物理上面取得的一些突破性进展......        炼金术这个古老
  • Toast原来也可以多样化 dai_lm androidtoast
    Style 1： 默认 Toast def = Toast.makeText(this, "default", Toast.LENGTH_SHORT); def.show(); Style 2： 顶部显示 Toast top = Toast.makeText(this, "top", Toast.LENGTH_SHORT); t
  • java数据计算的几种解决方法3 datamachine javahadoopibatisr-languer
    4、iBatis     简单敏捷因此强大的数据计算层。和Hibernate不同，它鼓励写SQL，所以学习成本最低。同时它用最小的代价实现了计算脚本和JAVA代码的解耦，只用20%的代价就实现了hibernate 80%的功能,没实现的20%是计算脚本和数据库的解耦。     复杂计算环境是它的弱项，比如：分布式计算、复杂计算、非数据
  • 向网页中插入透明Flash的方法和技巧 dcj3sjt126com htmlWebFlash
    将 Flash 作品插入网页的时候，我们有时候会需要将它设为透明，有时候我们需要在Flash的背面插入一些漂亮的图片，搭配出漂亮的效果……下面我们介绍一些将Flash插入网页中的一些透明的设置技巧。 　　一、Swf透明、无坐标控制　　首先教大家最简单的插入Flash的代码，透明，无坐标控制： 　　注意wmode="transparent"是控制Flash是否透明
  • ios UICollectionView的使用 dcj3sjt126com
    UICollectionView的使用有两种方法，一种是继承UICollectionViewController，这个Controller会自带一个UICollectionView；另外一种是作为一个视图放在普通的UIViewController里面。 个人更喜欢第二种。下面采用第二种方式简单介绍一下UICollectionView的使用。 1.UIViewController实现委托，代码如
  • Eos平台java公共逻辑 蕃薯耀 Eos平台java公共逻辑Eos平台java公共逻辑
     Eos平台java公共逻辑 >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> 蕃薯耀 2015年6月1日 17:20:4
  • SpringMVC4零配置--Web上下文配置【MvcConfig】 hanqunfeng springmvc4
    与SpringSecurity的配置类似，spring同样为我们提供了一个实现类WebMvcConfigurationSupport和一个注解@EnableWebMvc以帮助我们减少bean的声明。   applicationContext-MvcConfig.xml <!-- 启用注解，并定义组件查找规则 ，mvc层只负责扫描@Controller --> <
  • 解决ie和其他浏览器poi下载excel文件名乱码 jackyrong Excel
       使用poi,做传统的excel导出，然后想在浏览器中，让用户选择另存为，保存用户下载的xls文件，这个时候，可能的是在ie下出现乱码（ie,9,10,11),但在firefox,chrome下没乱码， 因此必须综合判断，编写一个工具类：      /** * * @Title: pro
  • 挥洒泪水的青春 lampcy 编程生活程序员
    2015年2月28日，我辞职了，离开了相处一年的触控，转过身--挥洒掉泪水，毅然来到了兄弟连，背负着许多的不解、质疑——”你一个零基础、脑子又不聪明的人，还敢跨行业，选择Unity3D？“，”真是不自量力••••••“，”真是初生牛犊不怕虎•••••“，••••••我只是淡淡一笑，拎着行李----坐上了通向挥洒泪水的青春之地——兄弟连！ 这就是我青春的分割线，不后悔，只会去用泪水浇灌——已经来到
  • 稳增长之中国股市两点意见-----严控做空，建立涨跌停版停牌重组机制 nannan408
       对于股市，我们国家的监管还是有点拼的，但始终拼不过飞流直下的恐慌，为什么呢？    笔者首先支持股市的监管。对于股市越管越荡的现象，笔者认为首先是做空力量超过了股市自身的升力，并且对于跌停停牌重组的快速反应还没建立好，上市公司对于股价下跌没有很好的利好支撑。    我们来看美国和香港是怎么应对股灾的。美国是靠禁止重要股票做空，在
  • 动态设置iframe高度(iframe高度自适应) Rainbow702 JavaScriptiframecontentDocument高度自适应局部刷新
    如果需要对画面中的部分区域作局部刷新，大家可能都会想到使用ajax。 但有些情况下，须使用在页面中嵌入一个iframe来作局部刷新。 对于使用iframe的情况，发现有一个问题，就是iframe中的页面的高度可能会很高，但是外面页面并不会被iframe内部页面给撑开，如下面的结构： <div id="content"> <div id=&quo
  • 用Rapael做图表 tntxia rap
    function drawReport(paper,attr,data){          var width = attr.width;     var height = attr.height;          var max = 0;   &nbs
  • HTML5 bootstrap2网页兼容（支持IE10以下） xiaoluode html5bootstrap
    <!DOCTYPE html> <html> <head lang="zh-CN"> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他