格式化小拓
格式化小拓

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动态)

  • 在技术风暴中提升应急处理能力：以微软7·19蓝屏事件与网易云音乐故障为例 会飞的Anthony 信息系统人工智能云服务microsoft运维
    在数字化时代，软件服务的稳定性至关重要。然而，技术故障仍然是任何大型平台都可能面临的挑战。2024年7月19日，微软因CrowdStrike软件更新错误引发全球范围内的大规模蓝屏故障，影响了近千万台Windows设备。8月19日，网易云音乐因服务器故障导致502BadGateway错误，严重影响了用户体验。这些事件不仅带来了声誉和经济损失，还凸显了应急处理的重要性。本文将探讨如何在技术风暴中提升团
  • 晨间日记 暖心暖
    你给我一句话就打开我一扇窗你给我一个微笑我就浑身是力量你给我一个眼神我就找到了方向你放开双手让我遨游知识的海洋你给我一句话就打开我一扇窗你给我一个微笑我就浑身是力量你给我一个眼神我就找到了方向你放开双手让我翱游知识的海洋你给我的一切我永远不会忘
  • 李红霞沧州焦点解决第64期坚持分享第69天，2019年6月4日 蓝天下阳光很好
    当一小步的执行成功时，咨询师还会归功，并探讨当事人如何做到如何做到当事人的合理自我掌控，能够逐步增加，假若一小步的行动失败，则与当事人探讨从经验中学习到什么，帮助自己的有效原则，促进当事人接纳失败，并转化失败的意义与价值
  • 松浦弥太郎的人生信条DAY3 韩小渔儿
    图片发自App002舍弃自尊，凡事忍耐独立于世的37个年岁，仅以上八字便已很难做到。自尊是人隐藏在明暗外表之下的核心精神，是与肉身相关、甚至予以支撑能源的根本。再读下文：“自尊心，不是用来肆意宣扬的武器”，豁然开朗，唯有保持冷静，精神、思想才不会被身体、情绪左右，而只是客观存在的事实。恰巧今天听樊登读书会讲解《活好》一书，这是一本浓缩日本百岁老人，日野原重明先生105年人生感悟的专访纪实。他用久经
  • 今天是个好日子，红红火火！ 杨蓉
    今天是个好日子，喜事连连！首先，我的好姐妹四儿乔迁新居，开火大吉！兄弟姐妹们一起回家闹新房，从一早到半夜，迎来送往，做大餐话家常，喝小酒唠闲嗑，小朋友们喧叫打闹，好不红火！满汉全席一角一川秋景，一壶香茗，一席佳人。今朝逢吉日，万里吐清光。水墨青花伴知音，红烛台，影印成对。香浴家满园，更喜事无数。大厨超级辛苦，是腹有诗华的教授，当然也是我们最强有力的后盾。小吐槽一下，干净整洁温馨的窝，秒变成乱得一塌
  • Python | Leetcode Python题解之第385题迷你语法分析器 Mopes__ 分享PythonLeetcode题解
    题目：题解：classSolution:defdeserialize(self,s:str)->NestedInteger:index=0defdfs()->NestedInteger:nonlocalindexifs[index]=='[':index+=1ni=NestedInteger()whiles[index]!=']':ni.add(dfs())ifs[index]==',':inde
  • Python | Leetcode Python题解之第386题字典序排数 Mopes__ 分享PythonLeetcode题解
    题目：题解：classSolution:deflexicalOrder(self,n:int)->List[int]:ans=[0]*nnum=1foriinrange(n):ans[i]=numifnum*10n:num//=10num+=1returnans
  • 给史多多的第三百八十七封信 七千22
    你好，这里是七千每日文字输出的第470天。你好，史多多今天大年初六了，是爸爸的最后一天假期了。昨晚也是多多自己睡小床的一晚，妈妈担心多多掉下来，一晚上也是心惊胆战的没怎么睡好。昨晚的多多整体还是挺乖的，最长的一次是睡了有三个半小时。哈哈，但是我们多多大了，小床都有点睡不下了，多多现在还不会翻身，但是昨晚上自己来回蹭，还是蹭到了床边上。爸爸妈妈要给多多换一个小床了。今天妈妈抱着多多，怎么都觉得不够，
  • 一个难忘的清明节 柠萌有点甜
    今年的清明节让人们眼含泪水，令人痛心。凉山的一场大火让30名救火英雄失去了年轻的生命，其中最小的仅仅19岁，正是豆蔻年华。可是大火无情，带走了这些英雄。在视频中看到了英雄的追悼会，泪流满面，希望天堂没有大火，但有光明，一路走好。今天早上刷微博，看到了牺牲人员又多了1名，多少令人痛心的一件事情。愿悲剧再无发生，向人民英雄致敬！
  • 简单的PHP订单小程序 董. php小程序chrome
    HTML代码项目数量轮胎汽油火花塞收货地址PHP代码这是Bob的订单详情Bob的订单订单结果订单处理时间不知道";echo"订单处理结果如下：";$totalqty=0;#总数$totalamount=0.0;#总金额define('TIREPRICE',100);#轮胎单价define('OILPRICE',50);#油耗单价define('SPARKPRICE',20);#火花单价$docum
  • Java | Leetcode Java题解之第385题迷你语法分析器 m0_57195758 分享JavaLeetcode题解
    题目：题解：classSolution{intindex=0;publicNestedIntegerdeserialize(Strings){if(s.charAt(index)=='['){index++;NestedIntegerni=newNestedInteger();while(s.charAt(index)!=']'){ni.add(deserialize(s));if(s.charA
  • 基于Python的机器学习系列（16）：扩展 - AdaBoost 会飞的Anthony 信息系统机器学习人工智能python机器学习开发语言
    简介在本篇中，我们将扩展之前的AdaBoost算法实现，深入探索其细节并进行一些修改。我们将重点修复代码中的潜在问题，并对AdaBoost的实现进行一些调整，以提高其准确性和可用性。1.修复Alpha计算中的问题在AdaBoost中，如果分类器的错误率e为0，则计算出的权重α将是未定义的。为了解决这个问题，我们可以在计算过程中向分母中添加一个非常小的值，以避免除零错误。2.调整学习率sklearn
  • qnx /var/log/la_gvm.txt 系统日志 sun007700 android
    qnx/var/log/la_gvm.txt系统日志/var/log/la_gvm.txt是QNX操作系统中一个特定的日志文件，通常用于记录与LA(LoadableModule)或GVM(GlobalVirtualMemory)相关的信息。这个文件可以帮助系统管理员或开发者诊断与系统内存管理和模块加载相关的问题。关键点解释：QNX:QNX是一款实时操作系统（RTOS），主要用于嵌入式系统。它以其高
  • 每日一题2024年8月30日 Gin387 算法
    E-不知道叫什么名字_2023年广东工业大学腾讯杯新生程序设计竞赛(nowcoder.com)大致思路：题目要求选择连续的，男女人数相等的。题目给出男生为1，女生为0，这里猜测要把女生的0改成-1（猜测，不知道对不对）通过一些手段，前缀和+map，发现可以完美解决这个问题。#includeusingnamespacestd;typedeflonglongll;typedefdoubledb;typ
  • 众生百相 招财猫333333
    图片发自App老公村里拆迁了。众生百相。短短几个月的时间里，一个喝药的，三对离婚的，明里暗里闹矛盾的不在少数。喝药的是一个七十岁的老爷子，一子两女，论辈分叫他舅舅，一个个子高高的总是笑眯眯的老人。听说是拆迁款下来后全部被儿子提走了，老人要二十万儿子不给，怕老人给女儿，老人一气之下喝了药，还好被夺了瓶抢救又及时才没有酿成苦果，结果在重症监护室里待了二十多天。老公的一个发小（浩）离婚了。听到消息我们以
  • 摄影杂谈 漫天雪_15ac
    自去年底购入单反后一直没时间、也没机会学摄影，一度处于自学状态，凭感觉照些花花草草的照片，倒也漂亮自在。邻居杜大哥是个摄影爱好者，他热情介绍我加入省老年大学摄影协会，报了名，交了钱却没怎么去上课，一因路途遥远，二因有些内容不感兴趣，三因家中事情耽误，算起来总共也就上了三节课。图片发自App说起摄影，我更偏爱拍自然风景，看到漂亮的花也有想拍的欲望，对人像摄影我从心底里并没太大兴趣，碍于杜大哥的面子，
  • 岛国6天游回顾------(下)续 一击必杀z
    2016-06-11本来打算写3篇就够了，随着越写越发觉还要分开一篇来写，呵呵。话说原文再续，在中野购物完，拿着大包小包去返回地铁站，继续去下一站，第三站-----池袋。话说池袋我最想去的当然是Jumpworld博物馆，在一间商场的3楼，买票分两种，一种是全票，另一种是普通票，区别是全票包括入场费和里面的游乐设施全部费用，普通票只包括入场费和基本设施费用。其实主要是针对海贼王里面的设施要收费(收费
  • Golang | Leetcode Golang题解之第385题迷你语法分析器 __AtYou__ 经验分享GolangLeetcode题解
    题目：题解：funcdeserialize(sstring)*NestedInteger{index:=0vardfsfunc()*NestedIntegerdfs=func()*NestedInteger{ni:=&NestedInteger{}ifs[index]=='['{index++fors[index]!=']'{ni.Add(*dfs())ifs[index]==','{index+
  • 巧用“共情” 苏日娜_ab97
    在应用心理学上，共情是指：能设身处地从别人的角度去体会并理解别人的感觉、需要、情绪与想法的一种个人特质。生活、工作中用此法与人交流，非常引起共鸣，拉近距离。运动会在即，而运动会过后期中考试就来了。身为班主任的我，不看重成绩那是撒谎；不让孩子们玩得开心，还于心不忍。早会期间，主持人给我十分钟总结，简短的总结后，我说：我和大家的心情是一样的，谁不希望自己在高中阶段渡过一个有意义的运动会，到了老师这个年
  • 小鱼的每日分享7.4-自尊与自律 宝贝Vivian
    用文字记录生活，见证成长！读书-《即兴演讲》第七章-保持尊重听书-《光环效应》✏️“光环效应”是一种认识上的误区，指在印象形成过程中一种夸大化的感觉和看法，是一种极为盲目的心理倾向。光环效应”同时也是个好东西，前提是我们站在它之外，不陷进去。用批判性思维对所见进行思考。很多的商业故事，习惯性用“成功的例子”，佐证自己认为企业成功的原因，把相关关系变成因果关系，难免陷入了“幸存者偏差”，不能“只见树
  • Day25: 回溯算法 IV Vanilla TY 算法数据结构javascript前端
    491.递增子序列(需要回看)给定一个整型数组,你的任务是找到所有该数组的递增子序列，递增子序列的长度至少是2。示例:输入:[4,6,7,7]输出:[[4,6],[4,7],[4,6,7],[4,6,7,7],[6,7],[6,7,7],[7,7],[4,7,7]]说明:给定数组的长度不会超过15。数组中的整数范围是[-100,100]。给定数组中可能包含重复数字，相等的数字应该被视为递增的一种情
  • Day28: 贪心算法基础 || Vanilla TY 贪心算法算法
    122.买卖股票的最佳时机II给定一个数组，它的第i个元素是一支给定股票第i天的价格。设计一个算法来计算你所能获取的最大利润。你可以尽可能地完成更多的交易（多次买卖一支股票）。注意：你不能同时参与多笔交易（你必须在再次购买前出售掉之前的股票）。示例1:输入:[7,1,5,3,6,4]输出:7解释:在第2天（股票价格=1）的时候买入，在第3天（股票价格=5）的时候卖出,这笔交易所能获得利润=5-1=
  • 静观其变，是一种能力 我是个老实人
    一个流浪汉走进一座寺庙，看到菩萨坐在莲花台上受人膜拜，非常羡慕。他问：“我可以和你换一下吗？”菩萨说：“只要你不开口。”流浪汉坐上了莲花台。一日，富翁来了，求菩萨赐他美德。磕完头，起身，钱包掉了。流浪汉想提醒他，却不能开口。随后来了个穷人，求菩萨赐予金钱，救病重的孩子。一磕头，看到了一个钱包。穷人很开心地想：“菩萨显灵了。”流浪汉想说这不是显灵，却不能开口。渔民来了，求菩萨赐他安全，出海没有风浪。
  • 王琳｜能量感恩日记Day12 王琳linda
    感恩给力的琦哥，总是在我需要任何时候拿出十二分不错的成果。支持我学习，带着宝宝玩又给我做好吃的，还要安排隔离期间工厂产品的事。感恩宝宝特别乖巧的玩了一天，给我更多的时间和空间来充盈大脑。感恩自己几乎全情投入的充电了一天，并且根据所学的知识列出了可行性计划。明天结束后做到年度规划中。感恩萌姐今天干货满满又生动有趣的知识盛宴感恩私聊宝宝今天认真的打卡和反馈感恩老师温柔的教导和恰到好处的提醒感恩郑总的鼓
  • 梦想 小呆爱读诗词
    梦想就是睡觉的时候想一想，或许明天就实现了呢？现实就是你一觉醒来，发现一切都没有改变，而你还不得不为每天那点工资起早贪黑。图片发自App优秀的人还在努力，努力的人还有梦想，你却只会做着美梦。等到梦醒的那一天，你才会发现自己浪费了不止一个夜的时光，还有你的后半生。图片发自App
  • 生生互动的数学课堂更精彩 一缕阳光86
    最近，学校组织了优质课比赛，我也积极去学习，听了几节课，结合自己的数学课堂，发现我们的课堂有一个共同的特点，都是在教师的指引导下去学习，探究，总结，活动大部分也是师生之间的互动，师生之间的评价。课堂上很少有学生之间的互相评价、质疑。全班展示部分只是老师引导的让展示学生说说自己的想法，没有产生学生之间思维碰撞的火花。那么，我们怎样构建一个生生互动的数学课堂呢，让数学课堂更精彩。首先，教师为学生创造合
  • Python 中特殊函数说明 依旧阳光的老码农 Pythonpython
    在Python中，函数名前后各加两个下划线（例如__function_name__）通常表示这是一个特殊方法或者魔法方法。这样的函数在Python内部使用，或者作为某些特定操作（如属性访问、类型转换等）的钩子。例如，如果你定义了一个类并在这个类中有一个名为__init__的方法，那么这个方法会在创建类的新实例时自动被调用。特殊方法通常以双下划线开头和结尾，这是因为单下划线开头的名称是留给实现细节的
  • 千山江雪 V鹿慕溪
    近日，高中同学的他，时不时会在微信上与我聊上几句，内容很简单，不外乎是下班了吗，忙不忙，怎么还没睡之类的言语，寥寥几句，礼貌而疏离。直到刚刚，他说喝醉了，突然想起上学那会儿的事，竟然哭了。我淡淡的回了句：酒少喝点。人累了，醉了，都会想起从前。他回了句：没事，你早些睡吧。互道晚安。有人道晚安的今夜，如果不写点或者说点什么，我一定会失眠。他，是我高中后桌，也是我第一个喜欢的男孩子。其实，我们的相识可以
  • 莆田鞋十大良心微商推荐,推荐最新10个良心微商2023已更新 优鞋之家
    莆田鞋十大良心微商推荐,推荐最新10个良心微商莆田鞋十大拔群出萃的良心微商推荐，2023最新的十个信达莆田鞋商家当仁不让地介绍给你。莆田鞋十大良心微商秀出班行千万个，单特孑立数万家，名动神州声威大震，一骑绝尘脱颖而出。容靠谱为口碑楚楚不凡，化良心为声誉才调秀出，傍信义为导师卓冠群伦。如此才夸八斗，长才广度的莆田鞋十大良心微商优鞋之家觉得就要推荐给你，这才是对“鲜花配美人，宝剑配英雄”最好的诠释。微
  • 《高效能人士的七个习惯》分享2+3 青亦青
    高效能是人士的七个习惯读书笔记2第127页有效的个人管理方法的六个标准:一，一致要让个人的理想与使命，角色与目标，工作重点与计划，欲望和自制之间和谐一致。比如:我要做及格的妈妈，与孩子有和谐的关系。所以，在处理事情上，要有分寸。接纳孩子的好与坏，也让孩子知道，妈妈也有好坏，也要接纳。第二，要平衡。管理方法应该是有助于生活的平衡，避免因为某一方面扮演的角色，而忽略了其他的重要的人生层面!我们人生的角
  • 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其他