代号[K]
代号[K]

自制登陆页面（前端HTML,CSS,JS练习）

自制静态登陆页面,在同一页面中，实现点击注册按钮，变换到注册的盒子，并且实现两次输入密码不一致的提示操作，登陆密码错误提示，并且3次失败后拒绝登陆

源代码获取：

https://github.com/akh5/web/tree/master/login

实现效果：
自制登陆页面（前端HTML,CSS,JS练习）_第1张图片
登陆，注册按钮有一个延时填充颜色的效果
自制登陆页面（前端HTML,CSS,JS练习）_第2张图片
点击注册后会切换盒子到注册
自制登陆页面（前端HTML,CSS,JS练习）_第3张图片
密码不一致时提示
自制登陆页面（前端HTML,CSS,JS练习）_第4张图片
密码错误提示
自制登陆页面（前端HTML,CSS,JS练习）_第5张图片
三次失败后，移除登陆按钮，禁止登陆


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登陆界面title>
    <link type="text/css" href="regin.css" rel="stylesheet">
head>
<body>
<div class="shadow">
    <div class="front">
        <h2>—————登录————-h2>
        <div class="account"><input placeholder="请输入用户名" id="racc">div>
        <div class="password"><input type="password" placeholder="请输入密码" id="rpass">div>
        <div class="style regin">登陆div>
        <div class="style signup">注册div>
       div>
    <div class="back">
        <h2>-————注册————h2>
        <div class="signaccount"><p>请输入用户名:p><input class="frame" id="acc1">div>
        <div class="signpassword"><p>请输入密码:p><input class="frame" id="pass1">div>
        <div class="signpassword"><p>请再次输入密码:p><input class="frame" id="pass2">
        <p class="error">两次输入不 一 致p>div>
        <div class="signselect"><p>请选择性别:p><label><input type="radio" name="gender" checked> 男label><label><input type="radio" name="gender"> 女label>div>
        <div class="confirm">确认div>
    div>
    <div id="alert">div>
div>
<script src="regin.js">script>
body>
html>

这里分为三层，一个shadow的灰色透明蒙层，为了遮盖背景鲜艳的颜色，不会被背景图吸引注意力，登陆的

容器，以及注册的
容器

CSS代码

body{
    background-image: url("./img/1.jpg");

}
.shadow{
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
}
.front{
    width: 300px;
    height: 300px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    border-radius: 8px;
    background-color: rgba(255,255,255,.6);
    transition: all 1.5s ease-out;
}
h2{
    position: relative;
    margin-top: 0;
    top: 1px;
}

.front input{
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: 20px;
    height: 30px;
    width: 250px;
    border-radius: 5px;
    border-color: #00bcbc;
    background-color: rgba(0,150,150,0.3);
}
.style{
    width: 90px;
    height:40px;
    padding: 0;
    position: absolute;
    border: black solid 1px;
    border-radius: 5px;
    text-align: center;
    line-height: 35px;
    cursor: pointer;
    overflow: hidden;
    transition: 1s all ease;
}
.style::before{
    background-color: rgba(50,0,255,1);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: -1;
    transition: all 0.6s ease;
}
.regin{
    left: 22px;
    top: 230px;
}
.regin::before{
    width: 0;
    height: 100%;
}
.regin:hover::before{
    width: 100%;
}
.signup{
    left: 181px;
    top: 230px;
}
.signup::before{
    width: 0;
    height: 100%;
}
.signup:hover::before{
    width: 100%;
}
.back{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 350px;
    height: 550px;
    background-color: rgba(255,255,255,0.6);
    border-radius: 8px;
    display: none;
    transition: all 1.5s ease-in;
}
.back .frame{
    position: relative;
    left: 10px;
    width: 300px;
    height: 25px;
    margin-top: 5px;
    margin-bottom: 5px;
    border-radius: 6px;
    border-color: #443f8b;
}
.back .confirm{
    left: 11px;
    top: 50px;
    font-weight: bold;
    text-align: center;
    position: relative;
    width: 300px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    border: black solid 1px;
    transition: background-color 1s ease;
}
.back .confirm:hover{
    background-color: greenyellow;
}
.back .error{
    position: relative;
    left: 15px;
    color: red;
    margin: 0;
    display: none;
}

#alert{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    text-align: center;
    width: 650px;
    height: 40px;
    border-radius: 8px;
    background-color: rgba(0,0,255,0.8);
    color: white;
    line-height: 38px;
    display: none;
}

核心JS代码

var front = document.getElementsByClassName("front");
var sign = document.getElementsByClassName("signup");
var back = document.getElementsByClassName("back");
var regin = document.getElementsByClassName("regin");
var racc = document.getElementById("racc");
var rpass = document.getElementById("rpass");
var alert = document.getElementById("alert");

var signacc = document.getElementsByClassName("signaccount");
var signpass = document.getElementsByClassName("signpassword");
var acc = document.getElementById("acc1")
var pass1 = document.getElementById("pass1");
var pass2 = document.getElementById("pass2");
var error = document.getElementsByClassName("error");
var confirm = document.getElementsByClassName("confirm");

sign[0].onclick = function regin() {
    front[0].style.display = 'none';
    back[0].style.display = 'block';
    error[0].style.display='none';
};
function signup() {
    error[0].style.display='none';
        confirm[0].onclick = function () {
            if(pass1.value!=pass2.value){
                error[0].style.display='block';
                pass1.value="";
                pass2.value="";
            }
            if (acc.value!=""&&pass1.value!=""&&pass1.value==pass2.value){
                front[0].style.display = 'block';
                back[0].style.display = 'none';
                acc.value="";
                pass1.value="";
                pass2.value="";
            }
        }
}
function reginin(){
    var count = 3;
    regin[0].onclick = function () {
        if(count<=0){
            regin[0].style.display="none";
        }
        if (racc.value!="abc"&&rpass.value!="123456"){
            racc.value="";
            rpass.value="";
            alert.style.display="block";
            alert.innerText=`用户名或密码错误，登陆失败，还剩${count--}次机会`
            setTimeout (function () {
               alert.style.display = 'none';
            },1500)
        }
    }
}
signup();
reginin();

这里实现登陆与注册切换的方法是，通过点击事件，来将一个

的display属性设为none，就可以实现隐藏一个容器，显示一个容器。
因为这里是静态页面，所以我在JS里设了一个账号密码的固定值，来测试检验密码正确与否的方法，所以只要用户名输入的不是“abc”和123456 就会显示用户名密码错误。

你可能感兴趣的:(HTML,CSS,JS,登陆页面)

  • 34.HarmonyOS NEXT Layout布局组件系统详解（一）：基础概念与栅格系统原理 harmonyos-next
    HarmonyOSNEXTLayout布局组件系统详解（一）：基础概念与栅格系统原理1.引言HarmonyOS的布局系统是应用界面开发的基础，良好的布局结构可以提高开发效率，并确保应用在不同设备上的一致性和适配性。本文将详细介绍HarmonyOS中的Layout布局组件系统，特别是基于栅格的布局实现原理。2.栅格系统概述2.1什么是栅格系统栅格系统是一种用于页面布局的二维网格结构，它将页面水平方向
  • CSS Position(定位) wjs2024 开发语言
    CSSPosition(定位)概述CSS定位是网页布局中非常重要的一环，它决定了页面元素的位置和层叠顺序。在CSS中，定位可以分为几种类型，包括静态定位、相对定位、绝对定位和固定定位。每种定位方式都有其独特的应用场景和优势。静态定位静态定位是CSS定位的默认值，它会使元素根据其在文档流中的位置进行定位。静态定位的元素不会影响其他元素的位置。代码示例.static{position:static;}
  • pyqt5 开发文档 查看地址 wowocpp pyqt
    查看PyQt5在线说明文档http://pyqt.sourceforge.net/Docs/PyQt5/class_reference.htmlhttps://www.riverbankcomputing.com/static/Docs/PyQt5/https://doc.qt.io/https://doc.qt.io/qt-5/qwidget.htmlhttps://www.riverbankc
  • tauri如何实现窗口拖动，自定义标题栏 爱音乐的程序猿 rust语言前端taurirust前端桌面软件exe
    文章目录一、tauri是什么？二、封装好的标题栏，引用修改即可使用三相关配置实现细节实现窗口拖动一、tauri是什么？Tauri是一个开源框架，用于创建跨平台的桌面应用程序。它使用Rust编程语言，并结合了现有的Web技术，如HTML、CSS和JavaScript。Tauri旨在提供一个快速、可靠和安全的方式来构建本地应用程序，同时保持Web开发的灵活性和易用性。它支持多个操作系统和架构，包括Wi
  • Python爬虫学习（一）——爬取新浪新闻 WayBling pythonpython爬虫
    参照网易云课堂的课程实践的结果：准备工作：安装requests和BeautifulSoup4。打开cmd，输入如下命令pipinstallrequestspipinstallBeautifulSoup4打开我们要爬取的页面，这里以新浪新闻为例，地址为：http://news.sina.com.cn/china/大概的思路就是通过浏览器的开发者工具检测到要获取数据所需要的request是什么，然后使
  • 修改 Docker 网桥的 IP 范围 消码哥 运维dockerdocker
    目录前言修改步骤前言有时候docker网桥ip与外部的ip相冲突时，外部ip是无法访问的，这时就需要我们修改Docker网桥的IP范围了，修改方法也很简单。修改步骤停止Docker服务sudosystemctlstopdocker编辑Docker的网络配置文件通常是/etc/docker/daemon.json，加入以下内容即可{"bip":"172.18.0.1/16",//Dockerdaem
  • 网站总报SSL错误？常见原因及解决方案 WoTrusSSL sslhttps网络协议
    作为企业网站运营者，SSL证书就像“网络身份证”，它能加密数据、保护用户隐私，让客户放心下单。但一旦出现SSL错误，浏览器直接亮红警告，用户秒关页面，订单流失、品牌形象受损都可能发生！别慌！我们整理了企业最常见的几种SSL错误原因及解决方案，教你如何快速排查修复，让网站安全又稳定！1.证书装错了？检查配置细节！问题：SSL证书安装时，路径填错、私钥不匹配、参数设置漏了……一个小失误就能让证书“罢工
  • 跨域JS传值时，postMessage 页面之间发送消息 油盐不进的吗 资料
    postMessage方法使用方法：监控JS：window.addEventListener("message",function(e){},false);--------------------------------------------------------------------------------------------------------------------------
  • HTML基础标签 雪兔♛ html前端经验分享
    基础标签＜！--id属性，唯一的确定一个标签，id名字具有唯一性-->回到这里飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺飞流直下三千尺百度一下，你就知道登录点击回到顶部
  • 正则表达式（1） 林深的林 正则表达式
    正则表达式概述正则表达式，又称正规表示法、常规表示法（英语：RegularExpression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。正则表达式类似于JSON,是一种通用的标准,被各种开发语言所支持,包括但不限于:Java,JavaScript,C,C++,C#,Python,SQL等等;因为在J
  • Nest.js全栈开发终极实践：TypeORM+微服务+Docker构建高可用企业级应用 lifire_H javascript微服务docker
    文章目录**第一部分：认识Nest.js与基础环境搭建****1.1什么是Nest.js？****1.2环境准备****1.3创建第一个项目****1.4启动开发服务器****1.5核心文件解读****第二部分：基础控制器与路由****2.1控制器的作用****2.2创建自定义控制器****2.3路由参数处理****2.4状态码处理****2.5完整示例****2.6测试你的API****关键概念
  • 使用 Particles.js 和 GSAP 实现炫酷的网页粒子动画效果 木木黄木木 javascript开发语言ecmascript
    使用Particles.js和GSAP实现炫酷的网页粒子动画效果前言在现代网页设计中，交互动效对于提升用户体验起着重要作用。本文将介绍如何结合Particles.js和GSAP动画库，创建一个引人注目的粒子动画效果网页。效果展示这里写目录标题使用Particles.js和GSAP实现炫酷的网页粒子动画效果前言效果展示技术栈实现步骤1.基础结构搭建2.样式设计4.GSAP动画实现5.自定义鼠标指针效
  • HTML5 Canvas制作雪花飘落动画 坚持坚持那些年
    本文还有配套的精品资源，点击获取简介：HTML5引入了Canvas元素，它赋予网页设计师丰富的绘图能力，允许通过JavaScript实现复杂的动画效果。本文将介绍如何结合HTML5的Canvas元素和JavaScript创建一个全屏的雪花飘落背景动画。通过定义雪花对象、创建雪花数组、编写主循环并利用requestAnimationFrame来绘制和更新雪花位置，我们能够实现一个逼真的雪花飘落动画效
  • Poe AI推出Previews预览功能！对标Claude Artifacts！ AI信息Gap 人工智能aigptOpenAIchatgpt
    Anthropic在发布最新模型Claude3.5Sonnet时，同时官宣了一个针对ClaudeAI重要的更新，那就是Artifacts。新功能Artifacts允许Claude用户在与聊天机器人的对话之外，通过一个专门的窗口分享、编辑和构建重要的独立内容。这些内容通常是超过15行的文本、代码片段、HTML网页、SVG图像、图表和交互式React组件等。用户可以在专用窗口中查看、复制和编辑这些内容
  • Html5学习教程，从入门到精通， HTML5超链接应用的详细语法知识点和案例代码（18） 知识分享小能手 网页开发前端开发编程语言如门html5学习前端htmljava后端css3
    HTML5超链接应用的详细语法知识点和案例代码超链接（Hyperlink），也称为跃点链接，是互联网和文档编辑中的一种重要概念。超链接的定义超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片、动画、程序、电子邮件地址、文件，甚至是一个音视频文件。如果点击了这个链接，当前页面的位置就会跳转到被链接的目标位置。在文档编辑中，超链接可以链
  • Django框架的全面指南：从入门到高级 步入烟尘 Python超入门指南全册djangosqlite数据库
    本文已收录于《Python超入门指南全册》本专栏专门针对零基础和需要进阶提升的同学所准备的一套完整教学，从基础到精通不断进阶深入，后续还有实战项目，轻松应对面试，专栏订阅地址：https://blog.csdn.net/mrdeam/category_12647587.html优点：订阅限时19.9付费专栏，私信博主还可进入全栈VIP答疑群，作者优先解答机会（代码指导、远程服务），群里大佬众多可以
  • Web前端发展史 王珍岩 笔记
    1、静态页面阶段那是1990年的12月25日，恰是西方的圣诞节，TimBerners-Lee在他的NeXT电脑上部署了第一套“主机-网站-浏览器”构成的Web系统，这标志BS架构的网站应用软件的开端，也是前端工程的开端。1993年4月Mosaic浏览器作为第一款正式的浏览器发布。1994年11月，鼎鼎大名的Navigator浏览器发布发布了，到年底W3C在Berners-Lee的主持下成立，标志着
  • 实现页面加载鸿蒙示例代码
    本文原创发布在华为开发者社区。介绍本示例主要简单构建页面加载loading布局。实现页面加载源码链接效果预览使用说明加载页面之前显示弹窗图标，经过固定时间后图标消失。实现思路使用@CustomDialog实现自定义弹窗。核心代码如下：@CustomDialogstructCustomDialogExample{controller:CustomDialogController=newCustomD
  • Canvas资源宝典：全面探索HTML5 Canvas技术 支然苹
    Canvas资源宝典：全面探索HTML5Canvas技术awesome-canvasAcuratedlistofawesomeHTML5Canvaswithexamples,relatedarticlesandposts.项目地址:https://gitcode.com/gh_mirrors/aw/awesome-canvas一、项目介绍项目概述awesome-canvas是由RaphaëlMor
  • 探索创新：CanvasParticles - 点燃你的网页动态效果 柏赢安Simona
    探索创新：CanvasParticles-点燃你的网页动态效果去发现同类优质开源项目:https://gitcode.com/是一个开源的JavaScript库，专注于在HTML5Canvas上创建引人入胜的粒子动画效果。如果你是Web开发者，正在寻找一种方法为你的网站增添独特的视觉吸引力，那么这个项目绝对值得你深入了解。项目简介CanvasParticles提供了一套简洁而强大的API，让你能够
  • 探索Coco-Web：一款强大的H5创作工具 岑晔含Dora
    探索Coco-Web：一款强大的H5创作工具去发现同类优质开源项目:https://gitcode.com/是一个开源的、基于Web的H5（HTML5）创作平台，旨在让开发者和设计师能够轻松地创建互动式的内容和应用。通过其直观的界面和丰富的功能，无论你是编程高手还是初学者，都能够利用Coco-Web制作出富有吸引力的数字内容。技术分析Coco-Web基于现代Web技术构建，包括：React.js:
  • 探索CoreHTML5Canvas：创作动态Web图形的新工具 郁英忆
    探索CoreHTML5Canvas：创作动态Web图形的新工具去发现同类优质开源项目:https://gitcode.com/是一个强大的JavaScript库，专为开发者设计，旨在简化和增强在Web上创建交互式和动画图形的能力。这个项目利用HTML5Canvas元素，提供了一个简洁且高效的API，让开发人员可以轻松地构建出丰富的2D渲染效果。技术分析HTML5Canvas是HTML5的一个重要特
  • JavaEE 项目常见错误解决方案 一弦一柱 JavaEE常见错误中文乱码JSP404
    JavaEE项目常见错误解决方案数据库连接JavaBean获取不到数据库字段值或出现意料之外的值业务中出现null或""404NOTFOUNDGET请求中文乱码form表单提交中文乱码最近的实训中，练了一个比较基础的项目，JSP+Servlet+JavaBean，完成两张表的CRUD操作，前端使用Bootstrap和JQuery，交互使用AJAX，IDE选用Eclipse,在时间比较仓促的情况下完
  • OpenHarmony子系统开发 - 部件配置规则 __Benco 子系统开发openharmonyharmonyos人工智能
    OpenHarmony子系统开发-部件配置规则部件的bundle.json放在部件源码的根目录下。以泛sensor子系统的sensor服务部件为例，部件属性定义描述文件字段说明如下：{"name":"@ohos/sensor_lite",#HPM部件英文名称，格式"@组织/部件名称""description":"Sensorservices",#部件功能一句话描述"version":"3.1",#
  • 实现openAI流式打印效果 (包含markdown代码高亮及复制功能) Todo_MrWu javascriptvue.js前端
    准备工作//插件npminstallmarkdown-ithighlight.js//引入文件importMarkdownItfrom'markdown-it'importhljsfrom'highlight.js'import'highlight.js/styles/atom-one-dark.css'初始化数据data(){return{vHtml:'',//最终填充展示的htmlstring
  • 前端框架的发展史 Qpeterqiufengyi 专有名词解释前端框架
    1、htmlcss+div从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。1994
  • 用flask做个简单llm-api 格瑞Lxf flaskpython后端
    详细文档见：flask中文文档快速上手—Flask中文文档(2.3.x)(dormousehole.readthedocs.io)也可以看英文文档。接收端：开放本机5000端口apifromflaskimportFlask,jsonify,requestapp=Flask(__name__)fromutils.llmimportload_llmllms=load_llm()defllm(quest
  • Flask框架中局部刷新页面 oliver.chau Python前端开发flaskpython后端
    在Flask中使用AJAX仅刷新leftMenue.html你的项目使用Flask，想要在添加网站后，仅刷新leftMenue.html而不刷新整个页面，可以使用AJAX（推荐）。✅1.在app.py里创建一个返回leftMenue.html的路由在Flask里，我们需要一个专门的API来返回最新的leftMenue.html。fromflaskimportFlask,render_templat
  • Webpack 打包详细教程 oliver.chau 前端开发webpack前端node.js
    Webpack是一个现代JavaScript应用的静态模块打包工具，它可以处理JavaScript、CSS、图片等资源，并优化它们以提高性能。以下是Webpack从基础到进阶的详细教程。1.Webpack基础概念Webpack的核心概念包括：Entry（入口）：Webpack开始打包的起点。Output（输出）：打包后的文件存放路径。Loaders（加载器）：转换非JavaScript资源（如CS
  • js触发onclick事件获取文本框中的值value 吾与谁归in Web前端jsjavascripthtml5
    1.首先我们创建一到两个文本框，使用标签用户名：密码：2.接着我们创建script代码，创建函数获取文本框中的值，获取值是通过文本框的id获取的，使用到了标签/**创建函数*/functiononclickFun(){/*通过id获取元素*/varuser=document.getElementById("name")/*警示窗口*/alert("你好【"+user.value+"】，欢迎进入系统
  • mongodb3.03开启认证 21jhf mongodb
    下载了最新mongodb3.03版本，当使用--auth 参数命令行开启mongodb用户认证时遇到很多问题，现总结如下： （百度上搜到的基本都是老版本的，看到db.addUser的就是，请忽略） Windows下我做了一个bat文件，用来启动mongodb，命令行如下： mongod --dbpath db\data --port 27017 --directoryperdb --logp
  • 【Spark103】Task not serializable bit1129 Serializable
    Task not serializable是Spark开发过程最令人头疼的问题之一，这里记录下出现这个问题的两个实例，一个是自己遇到的，另一个是stackoverflow上看到。等有时间了再仔细探究出现Task not serialiazable的各种原因以及出现问题后如何快速定位问题的所在，至少目前阶段碰到此类问题，没有什么章法 1.   package spark.exampl
  • 你所熟知的 LRU(最近最少使用) dalan_123 java
    关于LRU这个名词在很多地方或听说，或使用，接下来看下lru缓存回收的实现 1、大体的想法     a、查询出最近最晚使用的项     b、给最近的使用的项做标记 通过使用链表就可以完成这两个操作，关于最近最少使用的项只需要返回链表的尾部；标记最近使用的项，只需要将该项移除并放置到头部，那么难点就出现 你如何能够快速在链表定位对应的该项？ 这时候多
  • Javascript 跨域 周凡杨 JavaScriptjsonp跨域cross-domain
                                       
  • linux下安装apache服务器 g21121 apache
    安装apache 下载windows版本apache，下载地址：http://httpd.apache.org/download.cgi   1.windows下安装apache Windows下安装apache比较简单，注意选择路径和端口即可，这里就不再赘述了。 2.linux下安装apache： 下载之后上传到linux的相关目录，这里指定为/home/apach
  • FineReport的JS编辑框和URL地址栏语法简介 老A不折腾 finereportweb报表报表软件语法总结
      JS编辑框： 1.FineReport的js。 作为一款BS产品，browser端的JavaScript是必不可少的。 FineReport中的js是已经调用了finereport.js的。 大家知道，预览报表时，报表servlet会将cpt模板转为html，在这个html的head头部中会引入FineReport的js，这个finereport.js中包含了许多内置的fun
  • 根据STATUS信息对MySQL进行优化 墙头上一根草 status
    mysql  查看当前正在执行的操作，即正在执行的sql语句的方法为:      show processlist 命令   mysql> show global status;可以列出MySQL服务器运行各种状态值，我个人较喜欢的用法是show status like '查询值%';一、慢查询mysql> show variab
  • 我的spring学习笔记7-Spring的Bean配置文件给Bean定义别名 aijuans Spring 3
    本文介绍如何给Spring的Bean配置文件的Bean定义别名？ 原始的 <bean id="business" class="onlyfun.caterpillar.device.Business"> <property name="writer"> <ref b
  • 高性能mysql 之 性能剖析 annan211 性能mysqlmysql 性能剖析剖析
    1 定义性能优化 mysql服务器性能，此处定义为 响应时间。 在解释性能优化之前，先来消除一个误解，很多人认为，性能优化就是降低cpu的利用率或者减少对资源的使用。 这是一个陷阱。 资源时用来消耗并用来工作的，所以有时候消耗更多的资源能够加快查询速度，保持cpu忙绿，这是必要的。很多时候发现 编译进了新版本的InnoDB之后，cpu利用率上升的很厉害，这并不
  • 主外键和索引唯一性约束 百合不是茶 索引唯一性约束主外键约束联机删除
    目标;第一步;创建两张表 用户表和文章表         第二步;发表文章       1,建表; ---用户表 BlogUsers --userID唯一的 --userName --pwd --sex create
  • 线程的调度 bijian1013 java多线程thread线程的调度java多线程
    1.       Java提供一个线程调度程序来监控程序中启动后进入可运行状态的所有线程。线程调度程序按照线程的优先级决定应调度哪些线程来执行。   2.       多数线程的调度是抢占式的（即我想中断程序运行就中断，不需要和将被中断的程序协商） a) 
  • 查看日志常用命令 bijian1013 linux命令unix
    一.日志查找方法，可以用通配符查某台主机上的所有服务器grep "关键字" /wls/applogs/custom-*/error.log   二.查看日志常用命令1.grep '关键字' error.log：在error.log中搜索'关键字'2.grep -C10 '关键字' error.log：显示关键字前后10行记录3.grep '关键字' error.l
  • 【持久化框架MyBatis3一】MyBatis版HelloWorld bit1129 helloworld
    MyBatis这个系列的文章，主要参考《Java Persistence with MyBatis 3》。   样例数据 本文以MySQL数据库为例，建立一个STUDENTS表，插入两条数据，然后进行单表的增删改查     CREATE TABLE STUDENTS ( stud_id int(11) NOT NULL AUTO_INCREMENT,
  • 【Hadoop十五】Hadoop Counter bit1129 hadoop
       1. 只有Map任务的Map Reduce Job File System Counters FILE: Number of bytes read=3629530 FILE: Number of bytes written=98312 FILE: Number of read operations=0 FILE: Number of lar
  • 解决Tomcat数据连接池无法释放 ronin47 tomcat 连接池　优化
    近段时间，公司的检测中心报表系统(SMC)的开发人员时不时找到我，说用户老是出现无法登录的情况。前些日子因为手头上 有Jboss集群的测试工作，发现用户不能登录时，都是在Tomcat中将这个项目Reload一下就好了，不过只是治标而已，因为大概几个小时之后又会 再次出现无法登录的情况。 今天上午，开发人员小毛又找到我，要我协助将这个问题根治一下，拖太久用户难保不投诉。 简单分析了一
  • java-75-二叉树两结点的最低共同父结点 bylijinnan java
    import java.util.LinkedList; import java.util.List; import ljn.help.*; public class BTreeLowestParentOfTwoNodes { public static void main(String[] args) { /* * node data is stored in
  • 行业垂直搜索引擎网页抓取项目 carlwu LuceneNutchHeritrixSolr
    公司有一个搜索引擎项目，希望各路高人有空来帮忙指导，谢谢！ 这是详细需求： （1） 通过提供的网站地址(大概100-200个网站)，网页抓取程序能不断抓取网页和其它类型的文件（如Excel、PDF、Word、ppt及zip类型），并且程序能够根据事先提供的规则，过滤掉不相干的下载内容。 （2） 程序能够搜索这些抓取的内容，并能对这些抓取文件按照油田名进行分类，然后放到服务器不同的目录中。
  • [通讯与服务]在总带宽资源没有大幅增加之前,不适宜大幅度降低资费 comsci 资源
          降低通讯服务资费，就意味着有更多的用户进入，就意味着通讯服务提供商要接待和服务更多的用户，在总体运维成本没有由于技术升级而大幅下降的情况下，这种降低资费的行为将导致每个用户的平均带宽不断下降，而享受到的服务质量也在下降，这对用户和服务商都是不利的。。。。。。。。     &nbs
  • Java时区转换及时间格式 Cwind java
    本文介绍Java API 中 Date, Calendar, TimeZone和DateFormat的使用，以及不同时区时间相互转化的方法和原理。   问题描述： 向处于不同时区的服务器发请求时需要考虑时区转换的问题。譬如，服务器位于东八区（北京时间，GMT+8:00），而身处东四区的用户想要查询当天的销售记录。则需把东四区的“今天”这个时间范围转换为服务器所在时区的时间范围。
  • readonly,只读，不可用 dashuaifu jsjspdisablereadOnlyreadOnly
    readOnly 和 readonly 不同，在做js开发时一定要注意函数大小写和jsp黄线的警告！！！我就经历过这么一件事： 使用readOnly在某些浏览器或同一浏览器不同版本有的可以实现“只读”功能，有的就不行，而且函数readOnly有黄线警告！！！就这样被折磨了不短时间！！！（期间使用过disable函数，但是发现disable函数之后后台接收不到前台的的数据！！！）  
  • LABjs、RequireJS、SeaJS 介绍 dcj3sjt126com jsWeb
    LABjs 的核心是 LAB（Loading and Blocking）：Loading 指异步并行加载，Blocking 是指同步等待执行。LABjs 通过优雅的语法（script 和 wait）实现了这两大特性，核心价值是性能优化。LABjs 是一个文件加载器。RequireJS 和 SeaJS 则是模块加载器，倡导的是一种模块化开发理念，核心价值是让 JavaScript 的模块化开发变得更
  • [应用结构]入口脚本 dcj3sjt126com PHPyii2
    入口脚本 入口脚本是应用启动流程中的第一环，一个应用（不管是网页应用还是控制台应用）只有一个入口脚本。终端用户的请求通过入口脚本实例化应用并将将请求转发到应用。 Web 应用的入口脚本必须放在终端用户能够访问的目录下，通常命名为 index.php，也可以使用 Web 服务器能定位到的其他名称。 控制台应用的入口脚本一般在应用根目录下命名为 yii（后缀为.php），该文
  • haoop shell命令 eksliang hadoophadoop shell
    cat chgrp chmod chown copyFromLocal copyToLocal cp du dus expunge get getmerge ls lsr mkdir movefromLocal mv put rm rmr setrep stat tail test text
  • MultiStateView不同的状态下显示不同的界面 gundumw100 android
    只要将指定的view放在该控件里面，可以该view在不同的状态下显示不同的界面，这对ListView很有用，比如加载界面，空白界面，错误界面。而且这些见面由你指定布局，非常灵活。 PS：ListView虽然可以设置一个EmptyView，但使用起来不方便，不灵活，有点累赘。 <com.kennyc.view.MultiStateView xmlns:android=&qu
  • jQuery实现页面内锚点平滑跳转 ini JavaScripthtmljqueryhtml5css
    平时我们做导航滚动到内容都是通过锚点来做，刷的一下就直接跳到内容了，没有一丝的滚动效果，而且 url 链接最后会有“小尾巴”，就像#keleyi，今天我就介绍一款 jquery 做的滚动的特效，既可以设置滚动速度，又可以在 url 链接上没有“小尾巴”。   效果体验：http://keleyi.com/keleyi/phtml/jqtexiao/37.htmHTML文件代码： &
  • kafka offset迁移 kane_xie kafka
    在早前的kafka版本中（0.8.0），offset是被存储在zookeeper中的。   到当前版本（0.8.2）为止，kafka同时支持offset存储在zookeeper和offset manager（broker）中。   从官方的说明来看，未来offset的zookeeper存储将会被弃用。因此现有的基于kafka的项目如果今后计划保持更新的话，可以考虑在合适
  • android > 搭建 cordova 环境 mft8899 android
      1 , 安装 node.js        http://nodejs.org      node -v   查看版本   2, 安装 npm   可以先从  https://github.com/isaacs/npm/tags  下载 源码 解压到
  • java封装的比较器，比较是否全相同，获取不同字段名字 qifeifei
     非常实用的java比较器，贴上代码： import java.util.HashSet; import java.util.List; import java.util.Set; import net.sf.json.JSONArray; import net.sf.json.JSONObject; import net.sf.json.JsonConfig; i
  • 记录一些函数用法 .Aky. 位运算PHP数据库函数IP
    高手们照旧忽略。 想弄个全天朝IP段数据库，找了个今天最新更新的国内所有运营商IP段，copy到文件，用文件函数，字符串函数把玩下。分割出startIp和endIp这样格式写入.txt文件，直接用phpmyadmin导入.csv文件的形式导入。（生命在于折腾，也许你们觉得我傻X，直接下载人家弄好的导入不就可以，做自己的菜鸟，让别人去说吧） 当然用到了ip2long()函数把字符串转为整型数
  • sublime text 3 rust wudixiaotie Sublime Text
    1.sublime text 3 => install package => Rust 2.cd ~/.config/sublime-text-3/Packages 3.mkdir rust 4.git clone https://github.com/sp0/rust-style 5.cd rust-style 6.cargo build --release 7.ctrl
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他