格式化小拓
格式化小拓

day41-Verify Account Ui（短信验证码小格子输入效果）

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

day41-Verify Account Ui（短信验证码小格子输入效果）

效果

day41-Verify Account Ui（短信验证码小格子输入效果）_第1张图片

index.html

DOCTYPE html>
<html lang="en">

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

<body>
    <div class="container">
        <h2>验证您的帐户h2>
        <p>我们给你发了六位数的验证码到[email protected]<br /> 输入下面的验证码来确认您的电子邮件地址。p>
        
        <div class="code-container">
            <input type="number" class="code" placeholder="0" min="0" max="9" required value="">
            <input type="number" class="code" placeholder="0" min="0" max="9" required value="">
            <input type="number" class="code" placeholder="0" min="0" max="9" required value="">
            <input type="number" class="code" placeholder="0" min="0" max="9" required value="">
            <input type="number" class="code" placeholder="0" min="0" max="9" required value="">
            <input type="number" class="code" placeholder="0" min="0" max="9" required value="">
        div>
        <small class="info">
            这只是设计。我们没有给你发邮件，因为我们没有你的邮箱，对吧?
        small>
    div>
    <script src="script.js">script>
body>

html>

style.css

/* 引入字体 */
@import url('https://fonts.googleapis.com/css?family=Muli:300,700&display=swap');

* {
    box-sizing: border-box;
}

body {
    background-color: #fbfcfe;
    font-family: 'Muli', sans-serif;
    /* 子元素居中 */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
}

/* 大盒子容器 */
.container {
    background-color: #fff;
    border: 3px #000 solid;
    border-radius: 10px;
    padding: 30px;
    max-width: 1000px;
    text-align: center;
}

/* 验证码容器 */
.code-container {
    /* 居中向两边排列 */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0;
}

/* input type="number" */
.code {
    border-radius: 5px;
    font-size: 75px;
    height: 120px;
    width: 100px;
    border: 1px solid #eee;
    /* 其所在容器宽度的 1%  6px*/
    margin: 1%;
    text-align: center;
    font-weight: 300;
    /* 该表单元素显示成类似于普通文本输入框的样式 */
    /* appearance: textfield; */
}

/* 隐藏输入框中的旋转箭头 */
/* 适用于 Chrome 和 Safari */
.code::-webkit-outer-spin-button,
.code::-webkit-inner-spin-button {
    appearance: none;
    margin: 0;
}

/* 设置表单元素（类名为".code" ）在合法状态（valid）时的样式 */
.code:valid {
    border-color: #3498db;
    box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.25);
}

/* 提示信息 */
.info {
    background-color: #eaeaea;
    display: inline-block;
    padding: 10px;
    line-height: 20px;
    max-width: 400px;
    color: #777;
    border-radius: 5px;
}

/* <=600px时，的效果 */
@media (max-width: 600px) {
    .code-container {
        flex-wrap: wrap;
    }

    .code {
        font-size: 60px;
        height: 80px;
        max-width: 70px;
    }
}

script.js


// 重点 flex .code:valid
// 1.获取元素节点
const codes = document.querySelectorAll('.code'); // 所有的验证码数字
const collectedCodes = []; // 用于收集code的值的数组

// 自动聚焦于验证码第一个数字
codes[0].focus();

// 遍历 绑定键盘按下事件，判断输入的长度和值是否合法
codes.forEach((code, idx) => {
    code.addEventListener('keydown', (e) => {
        console.log(e.key);
        // 输入为0-9内的数字
        if (e.key >= 0 && e.key <= 9) {
            codes[idx].value = ''; // 更新输入框的值为空 目的是消除一个code填入多的数字
            // 光标聚焦于后一个数字 使用trycatch消除浏览器控制台报错
            setTimeout(() => {
                try {
                    codes[idx + 1].focus()
                } catch (error) {
                    console.log('已经位于最后一个数字');
                }
            }, 10);
            collectedCodes[idx] = e.key; // 收集code的值
        } else if (e.key === 'Backspace') { // 按下为删除键
            // 光标聚焦于前一个数字
            setTimeout(() => {
                try {
                    codes[idx - 1].focus()
                } catch (error) {
                    console.log('已经位于第一个数字');
                }
            }, 10);
            collectedCodes[idx] = ''; // 删除的时候移除对应位置的code的值
        }
        // 在任何需要的时候可以使用 collectedCodes 数组获取收集到的 code 的值
        console.log(collectedCodes);
    });
});

你可能感兴趣的:(50天50个小demo前端,ui,html5,css3,javascript,前端,验证码,code动态)

  • 在VMware下安装Ubuntu12后出现的问题解决方法 shanzhizi Linuxvmwareubuntu
    今天再VMware9.0下安装了Ubuntu12.04的桌面版，结果安装成功，重启后输入用户密码，图形界面卡住没有反应了，但是可以进入字符界面。网上搜索找到了一个解决方法，尝试了一下果然可以，记录下来供大家参考吧：l另外还有一个问题，开机老是提示piix4_smbus0000:00:007.3:HostSMBuscontrollernotenabled，虽然说不会影响系统的正常运行，但是很影响开机
  • 《伴时匣》app开发技术分享--表单提交准备（4） 鸿蒙小林 鸿蒙端云一体化harmonyos
    技术栈Appgalleryconnect开发准备上一节我们实现了用户登录功能，现在我们进入首页，可以开始准备着手发布我们的日期计划了，在这之前我们先实现信息表的创建。在首页实现一个标题栏，一个悬浮的按钮。功能分析我们的信息表要展示的内容很多，首先是我们的事件名称，目标日期选择，公历农历，正数倒数，倒数类目的选择，是否实现置顶效果，是否显示精确时间，事件颜色，事件图标，事件心情，事件天气，跟用户绑定
  • yum 报错解决记录 孤高飘云影 linuxcentos运维
    创建一个虚拟机，在安装yum源的时候，执行到yummakecahce的时候，报如下的错误：解决方式：1、执行如下命令修改fastestmirror.conf的配置参数sed-i"s|enabled=1|enabled=0|g"/etc/yum/pluginconf.d/fastestmirror.conf2、备份一下原yum源文件mv/etc/yum.repos.d/CentOS-Base.rep
  • LGTM？Github中那些迷之缩写 SunTecTec github
    PR:PullRequest.拉取请求，给其他项目提交代码LGTM:LooksGoodToMe.朕知道了代码已经过review，可以合并SGTM:SoundsGoodToMe.和上面那句意思差不多，也是已经通过了review的意思WIP:WorkInProgress.传说中提PR的最佳实践是，如果你有个改动很大的PR，可以在写了一部分的情况下先提交，但是在标题里写上WIP，以告诉项目维护者这个功能
  • Dify实现图文混排的智能问答实践 一望无际的大草原 Dify高级应用工作总结Agent数据分析agent智能客服
    最近在做类似于各大平台中广泛应用的智能客服，相当于基于各平台的用户操作手册，业务流程场景等文档资料，开发一个类似于智能客服的自动化问答应用。主要基于dify进行开发，但对数据有些特殊要求，之前大家做的都是基于文本的，结合大模型返回的结果主要也是文本信息，这种方式不够直观全面，也有信息丢失，同时，一般这些资料中都包含了大量的图文结合内容，很多问题的答复需要结合图像进行答复更加直观，因此对其进行简单的
  • 苍穹外面Day10 guslegend python数据库java
    SpringTaskSpringTask是Spring框架提供的任务调度工具，可以按照约定的时间自动执行某个代码逻辑。定位：定时任务框架作用：定时自动执行某段Java代码cron表达式cron表达式其实就是一个字符串，通过cron表达式可以定义任务触发的时间构成规则：分为6或7个域，由空格分隔开，每个域代表一个含义每个域的含义分别为：秒、分钟、小时、日、月、周、年(可选)举例：2022年10月12
  • 用万用表测量（TO-220）NMOS管的好坏 MingYue_SSS 元器件好坏测量嵌入式硬件经验分享笔记学习
    第一步：用镊子或表笔短接MOS管的三个引脚，进行放电。第二步：万用表选择二极管档位。短接表笔，发出蜂鸣声说明万用表没问题。第三步：测量MOS管体二极管的好坏。用万用表测量2脚和3脚，正向导通，反向截至表示MOS管为好的。反之则是坏的。红表笔(+)测3脚源极S，黑表笔(-)测2脚漏极D，正常有一个导通压降，万用表数值在0.4V—0.9V左右。红表笔(+)测2脚漏极D，黑表笔(-)测3脚源极S，正常为
  • 关于JAVA中LIST元素修改的一个问题记录
    在工作中有遇到一个问题，需要从既有获取数据库中的LIST数据，做一下对其中部分数据做处理存入另外一个LIST集合之中，但是，有些现象还是比较出乎我的意料的，模拟了一下相关场景，具体的代码如下：packagecom.interview.demo;importjava.util.ArrayList;importjava.util.List;classStudent{privateStringname;
  • 服务器、树莓派/香橙派部署HomeAssistant与小爱音箱联动 不对法 物联网物联网
    HomeAssistant功能介绍与多平台部署实战：CentOS服务器、树莓派、香橙派部署及小爱音箱联动控制一、HomeAssistant简介HomeAssistant是一款基于Python开发的开源智能家居自动化平台，它最大的特点是高度集成和自定义。通过HomeAssistant，用户可以将不同品牌、不同协议的智能家居设备（如空调、电灯、传感器等）整合到一个统一的平台进行管理和控制，同时还支持通
  • EnterpriseDB/Barman 地理冗余配置指南：构建级联备份架构 管翔渊Lacey
    EnterpriseDB/Barman地理冗余配置指南：构建级联备份架构barmanBarman-BackupandRecoveryManagerforPostgreSQL项目地址:https://gitcode.com/gh_mirrors/ba/barman地理冗余概述在现代数据库运维中，确保数据的高可用性和灾难恢复能力至关重要。EnterpriseDB/Barman提供的地理冗余功能允许管理
  • 建议是先把base完全搞懂 weixin_47868976 Web云存储项目网络
    并发编程日志系统啥的我只了解了一点点直接从网络层入手这个项目可行么？底层base模块没搞懂从web开始合理么？你的担心很有道理！让我来分析一下学习路径的可行性，并给你一个合理的学习建议。一、项目依赖关系分析1.模块依赖层次application/(应用层)↓强依赖net/(网络层)↓强依赖base/(基础层)↓强依赖系统调用(LinuxAPI)2.具体依赖关系Rantool从依赖分析可以看出，网络
  • Redisson 的 “看门狗 dj_master Redis服务器数据库java
    Redisson的“看门狗（WatchDog）”机制是其针对Redis分布式锁实现的一个重要优化，用于解决分布式锁因业务执行时间过长，锁自动过期释放，导致锁失效的问题。下面从原理、作用、工作机制等方面详细介绍：一、背景：分布式锁的过期问题在使用Redis实现分布式锁时，通常会给锁设置一个过期时间（比如setIfAbsent加过期时间），防止持有锁的客户端因故障（如程序崩溃、网络阻塞）无法释放锁，导
  • 机器学习算法——神经网络1（神经元模型）
    神经网络是由具有适应性的简单单元组成的广泛并行互连的网络，它的组织能够模拟生物神经系统对真实世界物体所作出的交互反应。神经网络中最基本的成分是神经元（neuron）模型。即上述定义中的“简单单元”。在生物神经网络中，每个神经元与其他申请元相连，当它“兴奋”时，就会向相连的神经元发送化学物质，从而改变这些神经元内的电位；如果某神经元的电位超过一个“阈值”，那么它就会被激活，即“兴奋”起来，向其他神经
  • SpringBoot+WebSocket实现直播连麦 雨轩智能 java及Linux相关教程springbootwebsocket后端
    一、引言随着互联网技术的发展，直播已成为一种主流的内容传播形式。其中，连麦功能作为直播互动的重要手段，能够有效提升用户参与感和观看体验。本文将介绍如何使用SpringBoot和WebSocket技术构建一个直播连麦系统，实现主播与观众之间的实时音视频交流和文字聊天功能。为了方便DEMO的运行，本系统基于纯内存操作实现核心业务逻辑，不依赖外部数据库或者缓存组件。二、技术设计2.1技术栈后端：Spri
  • R语言入门课| 05 一文掌握R语言常见数据类型 Biomamba生信基地 r语言信息可视化开发语言生信医药
    视频教程大家可以先做一做R语言基础小测验，看看自己是否需要跟我们5.5h入门R语言的课程。先上教程视频，B站同步播出：https://www.bilibili.com/video/BV1miNVeWEkw完整视频回放和答疑服务可见：5.5h入门R语言本节课程视频：（点击此处查看）"R语言入门课"是我们认为生信小白入门不得不听的一个课程，我们也为这个课程准备了许多干货。R语言的精髓便是数据处理，在本
  • Linux下使用C语言实现线程池---代码及分析 唐·柯里昂798 linuxlinuxc语言javaubuntucentosunix笔记
    线程池相关文章协议Socket编程高并发服务器实现线程池如果一个客户端建立连接使用创建一个线程用于处理这一个线程,处理结束的时候把这一个线程删除,这个时候会导致线程的创建以及销毁会消耗大量的时间这时候可以一次性创建多个线程,这几个线程统称线程池,如果客户端建立一个连接,线程池分配一个线程处理客户发过来的数据,不处理的时候这几个线程阻塞可以使用条件变量进行阻塞线程的数量可以随着连接的个数,时间等条件
  • 数据库-事务 ruleslol springspringjdbc
    一、什么是事务？在执行SQL语句的时候，某些业务要求，一系列操作必须全部执行，而不能仅执行一部分。例如，一个转账操作：--从id=1的账户给id=2的账户转账100元--第一步：将id=1的A账户余额减去100UPDATEaccountsSETbalance=balance-100WHEREid=1;--第二步：将id=2的B账户余额加上100UPDATEaccountsSETbalance=ba
  • Mac 快捷键 快乐的一只小喵喵 macmacos
    总结一下Mac快捷键的图形符号：Mac中主要有四个修饰键，分别是Command，Control，Option和Shift。转存失败重新上传取消END基本的快捷键Command是Mac里最重要的修饰键，在大多数情况下相当于Windows下的Ctrl。所以以下最基本操作很好理解：Command-Z撤销Command-X剪切Command-C拷贝（Copy）Command-V粘贴Command-A全选（
  • MySQL(107)如何进行分片查询？ 辞暮尔尔-烟火年年 MySQLmysql数据库
    进行分片查询时，需要根据分片键确定查询应在哪些分片上执行。分片查询的复杂性在于需要处理跨分片查询的情况。以下是一个更为详细的示例，展示如何在分片数据库中进行查询，并结合Java代码进行实现。1.环境准备假设我们继续使用SpringBoot和MySQL，且需要查询的表是orders表。我们已经有了分片的数据库环境和数据源配置。2.项目依赖在pom.xml中添加必要的依赖：org.springfram
  • Linux【7】------Linux系统编程（进程间通信IPC） Invinciblenuonuo linux多进程进程间通信
    文章目录1信号1.1信号类型1.2信号含义1.3信号产生按键硬件异常调用接口发送指令内核检测1.4信号处理默认捕捉忽略1.5信号阻塞1.6信号挂起2消息队列2.1概念2.2创建消息队列2.3访问消息队列2.4控制消息队列3共享内存3.1申请共享内存3.2共享内存映射3.3控制共享内存3.4信号量3.5操作信号量1信号信号是一种异步通信方式同步通信同步指的是当进程发起一个请求，但是该请求并未马上响应
  • 人脸识别常用数据集和Loss JL_Jessie 人脸识别深度学习
    人脸识别数据集数据集的noise对训练效果的影响很大！很长一段时间MegaFace的效果都上不去，就是因为数据集噪声的原因。而且自己在训练人脸的时候，如果不对数据集的噪声和属性有一点了解，对训练结果可能会有误判，甚至越训练越差…在选择数据集的时候不要一味求大，有的时候选择一个noise比例极高的大数据集，效果还不如选择一个clean的小数据集呢，可以参见这篇论文TheDevilofFaceReco
  • 【分治算法】【Python实现】Strassen矩阵乘法 「已注销」 #分治算法分治算法Python
    文章目录@[toc]问题描述基础算法时间复杂性Strassen算法时间复杂性问题时间复杂性Python实现个人主页：丷从心·系列专栏：分治算法学习指南：算法学习指南问题描述设AAA和BBB是两个n×nn\timesnn×n矩阵，AAA和BBB的乘积矩阵CCC中元素cij=∑k=1naikbkjc_{ij}=\displaystyle\sum\limits_{k=1}^{n}{a_{ik}b_{kj
  • 半导体器件仿真：光电器件仿真_（6）.光电二极管仿真 kkchenkx 信号仿真2信号处理信息可视化
    光电二极管仿真1.引言光电二极管是一种能够将光能转换为电能的半导体器件。在光通信、图像传感器、光检测器和太阳能电池等领域有广泛的应用。光电二极管的仿真可以帮助设计者了解器件的工作原理、性能参数以及优化设计。本节将详细介绍光电二极管的仿真原理和步骤，包括器件结构、物理模型、仿真软件的使用方法以及具体的仿真案例。2.光电二极管的基本结构和工作原理2.1器件结构光电二极管通常由一个PN结或PIN结组成。
  • Vue项目 npm i 报错npm ERR! code 1 小沛9 node.jspythonnode.js
    Vue项目npmi报错npmERR!code1记录一下npmi的时候报错，报错信息如下记录一下npmi的时候报错，报错信息如下npmERR!code1npmERR!pathD:\workspace\exchange\exchange-web\exchange-web-ui\node_modules\node-sassnpmERR!commandfailednpmERR!commandC:\Wind
  • 4-AI-业务与MCP协议结合-MCPServer实战 小沛9 人工智能javaAI编程
    一、介绍本章节会开发一个简单的MCP的服务。目前的步骤是先开发一个简单的MCP的SSE模式的server集成到大模型中。后面会演示stdio模式。注册到Nacos中（重点探索模式）、将HTTP接口配置成MCP的server。大概会从这几个方面进行演示。二、Server代码展示1、POM文件org.springframework.bootspring-boot-starter-actuatororg
  • N-P准则下的多传感器融合(python) 不会打架的锤子 机器学习自动化算法算法pythonvscode
    本文设计了一个主程序：main_sensor_fusion，和一个函数程序：cal_fuse。主程序里面包含主干部分和绘图部分，函数程序包含数据生成函数gen，检测概率计算函数cal，非0逻辑矩阵函数No_zero_value，单传感器判决函数fus_seq，多传感融合函数fusion。需要的点赞私聊if__name__=="__main__":begin_time=time()#Measurep
  • NeRF-Pytorch：NeRF神经辐射场复现——Pytorch版全流程分析与测试【Ubuntu20.04】【2025最新版！！！】 那就举个栗子！ 三维重建计算机视觉人工智能
    一、引言在计算机视觉和计算机图形学的交叉领域中，视图合成（ViewSynthesis）一直是一个充满挑战的研究方向。传统的三维重建方法往往需要复杂的几何建模和纹理映射过程，而且在处理复杂光照和材质时效果有限。2020年，来自UCBerkeley的研究团队提出了NeuralRadianceFields（NeRF），这一革命性的方法彻底改变了我们对三维场景表示和渲染的理解。NeRF的核心思想是将三维场
  • Python+Vue计算机毕业设计智慧养老院管理系统egn81（源码+程序+LW+部署） 心心毕设程序源码 pythonvue.js课程设计
    该项目含有源码、文档、程序、数据库、配套开发软件、软件安装教程项目运行环境配置：Python3.7.7+Django+Mysql5.7+piplist+HBuilderX（Vscode也行）+Vue+Pychram社区版。项目技术：Django+Vue+Python+Mysql等等组成，B/S模式等等。环境需要1.运行环境：最好是安装Python3.7.7，我们在这个平台上运行的。其他版本理论上也
  • 字节跳动Java开发面试题及参考答案（综合篇） 大模型大数据攻城狮 java后端面试大厂面试大厂校招加密算法nacos线程池
    HTTP与HTTPS的区别？HTTP（超文本传输协议）和HTTPS（超文本传输安全协议）主要有以下区别。从安全性角度看，HTTP是明文传输协议，数据在网络中传输时是以原始文本的形式发送的。这就好比在信件传递过程中没有进行密封，任何中间节点（如路由器、代理服务器等）都可以查看信件内容。例如，用户登录一个网站时发送的用户名和密码信息，如果是通过HTTP协议传输，很容易被窃取。而HTTPS是加密的安全协
  • 道可云人工智能每日资讯｜江苏首个机器人训练中心在苏州吴江启动 道可云 道可云人工智能人工智能机器人arDeepSeekxr百度
    道可云人工智能&元宇宙每日简报（2025年6月26日）讯，今日人工智能&元宇宙新鲜事有：江苏首个机器人训练中心在苏州吴江启动近日，长三角一体化示范区智能机器人训练中心在东太湖度假区（太湖新城）正式启用，成为江苏省首个机器人智能训练中心。该中心占地1500平方米，设有8个训练场景和30个生产工位，涵盖智能制造、商业服务、特种应用三大领域，年产数据可超200万条，旨在加速机器人从实验室走向真实产业场景
  • Java开发中，spring mvc 的线程怎么调用？ 小麦麦子 springmvc
    今天逛知乎，看到最近很多人都在问spring mvc 的线程http://www.maiziedu.com/course/java/ 的启动问题，觉得挺有意思的，那哥们儿问的也听仔细，下面的回答也很详尽，分享出来，希望遇对遇到类似问题的Java开发程序猿有所帮助。 问题：     在用spring mvc架构的网站上，设一线程在虚拟机启动时运行，线程里有一全局
  • maven依赖范围 bitcarter maven
    1.test 测试的时候才会依赖，编译和打包不依赖，如junit不被打包 2.compile 只有编译和打包时才会依赖 3.provided 编译和测试的时候依赖，打包不依赖，如：tomcat的一些公用jar包 4.runtime 运行时依赖，编译不依赖 5.默认compile 依赖范围compile是支持传递的，test不支持传递 1.传递的意思是项目A，引用
  • Jaxb org.xml.sax.saxparseexception : premature end of file darrenzhu xmlprematureJAXB
    如果在使用JAXB把xml文件unmarshal成vo(XSD自动生成的vo)时碰到如下错误： org.xml.sax.saxparseexception : premature end of file 很有可能时你直接读取文件为inputstream，然后将inputstream作为构建unmarshal需要的source参数。InputSource inputSource = new In
  • CSS Specificity 周凡杨 html权重Specificitycss
      有时候对于页面元素设置了样式，可为什么页面的显示没有匹配上呢？ because specificity CSS 的选择符是有权重的，当不同的选择符的样式设置有冲突时，浏览器会采用权重高的选择符设置的样式。     规则：   HTML标签的权重是1 Class 的权重是10 Id 的权重是100
  • java与servlet g21121 servlet
    servlet 搞java web开发的人一定不会陌生，而且大家还会时常用到它。 下面是java官方网站上对servlet的介绍： java官网对于servlet的解释 写道 Java Servlet Technology Overview Servlets are the Java platform technology of choice for extending and enha
  • eclipse中安装maven插件 510888780 eclipsemaven
    1.首先去官网下载 Maven： http://www.apache.org/dyn/closer.cgi/maven/binaries/apache-maven-3.2.3-bin.tar.gz 下载完成之后将其解压， 我将解压后的文件夹：apache-maven-3.2.3， 并将它放在 D:\tools目录下， 即 maven 最终的路径是：D:\tools\apache-mave
  • jpa@OneToOne关联关系 布衣凌宇 jpa
    Nruser里的pruserid关联到Pruser的主键id，实现对一个表的增删改，另一个表的数据随之增删改。 Nruser实体类 //***************************************************************** @Entity @Table(name="nruser") @DynamicInsert @Dynam
  • 我的spring学习笔记11-Spring中关于声明式事务的配置 aijuans spring事务配置
    这两天学到事务管理这一块，结合到之前的terasoluna框架，觉得书本上讲的还是简单阿。我就把我从书本上学到的再结合实际的项目以及网上看到的一些内容，对声明式事务管理做个整理吧。我看得Spring in Action第二版中只提到了用TransactionProxyFactoryBean和<tx:advice/>,定义注释驱动这三种，我承认后两种的内容很好，很强大。但是实际的项目当中
  • java 动态代理简单实现 antlove javahandlerproxydynamicservice
    dynamicproxy.service.HelloService package dynamicproxy.service; public interface HelloService { public void sayHello(); }   dynamicproxy.service.impl.HelloServiceImpl package dynamicp
  • JDBC连接数据库 百合不是茶 JDBC编程JAVA操作oracle数据库
             如果我们要想连接oracle公司的数据库，就要首先下载oralce公司的驱动程序，将这个驱动程序的jar包导入到我们工程中;   JDBC链接数据库的代码和固定写法;     1,加载oracle数据库的驱动;     &nb
  • 单例模式中的多线程分析 bijian1013 javathread多线程java多线程
    谈到单例模式，我们立马会想到饿汉式和懒汉式加载，所谓饿汉式就是在创建类时就创建好了实例，懒汉式在获取实例时才去创建实例，即延迟加载。 饿汉式： package com.bijian.study; public class Singleton { private Singleton() { } // 注意这是private 只供内部调用 private static
  • javascript读取和修改原型特别需要注意原型的读写不具有对等性 bijian1013 JavaScriptprototype
            对于从原型对象继承而来的成员，其读和写具有内在的不对等性。比如有一个对象A，假设它的原型对象是B，B的原型对象是null。如果我们需要读取A对象的name属性值，那么JS会优先在A中查找，如果找到了name属性那么就返回；如果A中没有name属性，那么就到原型B中查找name，如果找到了就返回；如果原型B中也没有
  • 【持久化框架MyBatis3六】MyBatis3集成第三方DataSource bit1129 dataSource
    MyBatis内置了数据源的支持，如：   <environments default="development"> <environment id="development"> <transactionManager type="JDBC" /> <data
  • 我程序中用到的urldecode和base64decode,MD5 bitcarter cMD5base64decodeurldecode
    这里是base64decode和urldecode，Md5在附件中。因为我是在后台所以需要解码： string Base64Decode(const char* Data,int DataByte,int& OutByte) { //解码表 const char DecodeTable[] = { 0, 0, 0, 0, 0, 0
  • 腾讯资深运维专家周小军：QQ与微信架构的惊天秘密 ronin47
    社交领域一直是互联网创业的大热门，从PC到移动端，从OICQ、MSN到QQ。到了移动互联网时代，社交领域应用开始彻底爆发，直奔黄金期。腾讯在过去几年里，社交平台更是火到爆，QQ和微信坐拥几亿的粉丝，QQ空间和朋友圈各种刷屏，写心得，晒照片，秀视频，那么谁来为企鹅保驾护航呢？支撑QQ和微信海量数据背后的架构又有哪些惊天内幕呢？本期大讲堂的内容来自今年2月份ChinaUnix对腾讯社交网络运营服务中心
  • java-69-旋转数组的最小元素。把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素 bylijinnan java
    public class MinOfShiftedArray { /** * Q69 旋转数组的最小元素 * 把一个数组最开始的若干个元素搬到数组的末尾，我们称之为数组的旋转。输入一个排好序的数组的一个旋转，输出旋转数组的最小元素。 * 例如数组{3, 4, 5, 1, 2}为{1, 2, 3, 4, 5}的一个旋转，该数组的最小值为1。 */ publ
  • 看博客，应该是有方向的 Cb123456 反省看博客
    看博客，应该是有方向的:  我现在就复习以前的，在补补以前不会的，现在还不会的，同时完善完善项目，也看看别人的博客.  我刚突然想到的:  1.应该看计算机组成原理，数据结构，一些算法，还有关于android,java的。  2.对于我，也快大四了，看一些职业规划的，以及一些学习的经验，看看别人的工作总结的.    为什么要写
  • [开源与商业]做开源项目的人生活上一定要朴素,尽量减少对官方和商业体系的依赖 comsci 开源项目
         为什么这样说呢？  因为科学和技术的发展有时候需要一个平缓和长期的积累过程，但是行政和商业体系本身充满各种不稳定性和不确定性，如果你希望长期从事某个科研项目，但是却又必须依赖于某种行政和商业体系，那其中的过程必定充满各种风险。。。       所以，为避免这种不确定性风险，我
  • 一个 sql优化 （[精华] 一个查询优化的分析调整全过程！很值得一看 ） cwqcwqmax9 sql
    见   http://www.itpub.net/forum.php?mod=viewthread&tid=239011 Web翻页优化实例 提交时间: 2004-6-18 15:37:49      回复    发消息  环境： Linux ve
  • Hibernat and Ibatis dashuaifu Hibernateibatis
    Hibernate  VS  iBATIS 简介 Hibernate 是当前最流行的O/R mapping框架，当前版本是3.05。它出身于sf.net，现在已经成为Jboss的一部分了 iBATIS 是另外一种优秀的O/R mapping框架，当前版本是2.0。目前属于apache的一个子项目了。 相对Hibernate“O/R”而言，iBATIS 是一种“Sql Mappi
  • 备份MYSQL脚本 dcj3sjt126com mysql
    #!/bin/sh # this shell to backup mysql #[email protected] (QQ:1413161683 DuChengJiu) _dbDir=/var/lib/mysql/ _today=`date +%w` _bakDir=/usr/backup/$_today [ ! -d $_bakDir ] && mkdir -p
  • iOS第三方开源库的吐槽和备忘 dcj3sjt126com ios
    转自 ibireme的博客   做iOS开发总会接触到一些第三方库，这里整理一下，做一些吐槽。   目前比较活跃的社区仍旧是Github，除此以外也有一些不错的库散落在Google Code、SourceForge等地方。由于Github社区太过主流，这里主要介绍一下Github里面流行的iOS库。   首先整理了一份 Github上排名靠
  • html wlwmanifest.xml eoems htmlxml
    所谓优化wp_head()就是把从wp_head中移除不需要元素，同时也可以加快速度。 步骤： 加入到function.php remove_action('wp_head', 'wp_generator'); //wp-generator移除wordpress的版本号，本身blog的版本号没什么意义，但是如果让恶意玩家看到，可能会用官网公布的漏洞攻击blog remov
  • 浅谈Java定时器发展 hacksin java并发timer定时器
    java在jdk1.3中推出了定时器类Timer,而后在jdk1.5后由Dou Lea从新开发出了支持多线程的ScheduleThreadPoolExecutor，从后者的表现来看，可以考虑完全替代Timer了。 Timer与ScheduleThreadPoolExecutor对比： 1.    Timer始于jdk1.3,其原理是利用一个TimerTask数组当作队列
  • 移动端页面侧边导航滑入效果 ini jqueryWebhtml5cssjavascirpt
    效果体验：http://hovertree.com/texiao/mobile/2.htm可以使用移动设备浏览器查看效果。效果使用到jquery-2.1.4.min.js，该版本的jQuery库是用于支持HTML5的浏览器上，不再兼容IE8以前的浏览器，现在移动端浏览器一般都支持HTML5，所以使用该jQuery没问题。HTML文件代码： <!DOCTYPE html> <h
  • AspectJ+Javasist记录日志 kane_xie aspectjjavasist
    在项目中碰到这样一个需求，对一个服务类的每一个方法，在方法开始和结束的时候分别记录一条日志，内容包括方法名，参数名+参数值以及方法执行的时间。   @Override public String get(String key) { // long start = System.currentTimeMillis(); // System.out.println("Be
  • redis学习笔记 MJC410621 redisNoSQL
    1)nosql数据库主要由以下特点：非关系型的、分布式的、开源的、水平可扩展的。 1，处理超大量的数据 2，运行在便宜的PC服务器集群上， 3，击碎了性能瓶颈。 1)对数据高并发读写。 2)对海量数据的高效率存储和访问。 3)对数据的高扩展性和高可用性。 redis支持的类型： Sring 类型 set name lijie get name lijie set na
  • 使用redis实现分布式锁 qifeifei
    在多节点的系统中，如何实现分布式锁机制，其中用redis来实现是很好的方法之一，我们先来看一下jedis包中，有个类名BinaryJedis,它有个方法如下：   public Long setnx(final byte[] key, final byte[] value) { checkIsInMulti(); client.setnx(key, value); ret
  • BI并非万能，中层业务管理报表要另辟蹊径 张老师的菜 大数据BI商业智能信息化
           BI是商业智能的缩写，是可以帮助企业做出明智的业务经营决策的工具，其数据来源于各个业务系统，如ERP、CRM、SCM、进销存、HER、OA等。        BI系统不同于传统的管理信息系统，他号称是一个整体应用的解决方案，是融入管理思想的强大系统：有着系统整体的设计思想，支持对所有
  • 安装rvm后出现rvm not a function 或者ruby -v后提示没安装ruby的问题 wudixiaotie function
    1.在~/.bashrc最后加入 [[ -s "$HOME/.rvm/scripts/rvm" ]] && source "$HOME/.rvm/scripts/rvm"  2.重新启动terminal输入：   rvm use ruby-2.2.1 --default  把当前安装的ruby版本设为默
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他