代号[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,登陆页面)

  • 清晰易懂的Python安装与配置教程 Tee xm python开发语言
    初学者也能看懂的Python安装与配置教程本教程将手把手教你安装Python，并配置国内镜像源和自定义依赖包缓存位置，即使你是零基础小白，也能轻松完成！一、准备工作操作系统：Windows10/11、macOS或Linux。下载工具：浏览器（推荐Chrome或Edge）。存储空间：至少预留500MB可用空间。二、安装Python1.下载Python访问Python官网下载页面：https://ww
  • 在Ubuntu上安装MEAN Stack的4个步骤 ubuntu
    在Ubuntu上安装MEANStack的4个步骤为：1.安装MEAN；2.安装MongoDB；3.安装NodeJS，Git和NPM；4.安装剩余的依赖项。什么是MEANStack？平均堆栈一直在很大程度上升高为基于稳健的基于JavaScript的开发堆栈。名称的意思是指其组件;MongoDB，ExpressJS，Angularjs和NodeJS。第1步：安装MEAN对于此安装，我们将在本指南中使用
  • React 相关插件之 Redux 基本使用入门 前端reactredux
    引入和定义首先，你需要创建Store实例并暴露出来：//stores/login.store.jsconstloginInstance=(preState,action)=>{switch(action.type){//修改状态case"changeLoginState":preState.isLogin=action.loginFlag=='YES'?true:falsereturnpreSta
  • 初探 Threejs 物理引擎CANNON，解锁 3D 动态魅力 伶俜Monster Threejswebgl前端3dthreejscannon.js
    简介Cannon.js是一个基于JavaScript的物理引擎，它可以在浏览器中模拟物理效果。它支持碰撞检测、刚体动力学、约束等物理效果，可以用于创建逼真的物理场景和交互。参考文档官方示例原理Cannon.js使用了欧拉角来表示物体的旋转，而不是四元数。这使得它在处理旋转时更加直观和易于理解。Cannon.js还支持多种碰撞检测算法，包括离散碰撞检测和连续碰撞检测。Cannon.js还支持多种约束
  • 用 Vue 3.5 TypeScript 重新开发3年前甘特图的核心组件 云烟，不再年轻 Vuetypescriptvue.js甘特图
    回顾3年前曾经用Vue2.0开发了一个甘特图组件，如今3年过去了，计划使用Vue3.5TypeScript把组件重新开发，有机会的话再开发一个React版本。关于之前的组件以前文章Vue2.0甘特图组件下面录屏是是用Vue3.5TypeScript开发的目前进展，不再使用Vue2里用过的snapsvg-cjs库，主要是对TypeScript支持的不太好，使用SVG.js库代替snapsvg-cjs
  • Java 处理 json 格式数据解析为 csv 格式 李昊哲小课 数据分析Java大数据javajson开发语言大数据数据分析
    Java处理json格式数据解析为csv格式如果不使用JSON工具库，你可以手动解析JSON格式字符串并将其转换为CSV格式字符串。以下是一个简单示例，展示如何实现这一功能。示例代码下面的示例代码手动处理JSON字符串，将其转换为CSV格式字符串：/***接收JSON字符串，去掉开头和结尾的方括号，按对象划分。*通过extractKeys方法提取字段名，添加到CSV的第一行。*逐项解析JSON对象
  • 设备树学习（二十三、番外篇-中断子系统之softirq） 奔跑的小刺猬 设备树设备树原理和实现
    既然开始学了，那么还是一次把中断的所有知识都系统的学一下。刚好有蜗窝大神的博客做指引。http://www.wowotech.net/irq_subsystem/soft-irq.html一、前言对于中断处理而言，linux将其分成了两个部分，一个叫做中断handler（tophalf），是全程关闭中断的，另外一部分是deferabletask（bottomhalf），属于不那么紧急需要处理的事情
  • 【Apache Storm】 茉菇 apachestorm大数据
    一、Storm简介1、概述官网地址：https://storm.apache.org/index.htmlApacheStorm是一个开源的、分布式的实时计算系统，专为处理流式数据而设计。它能够处理大量数据流并在极低的延迟下提供实时的结果。相比于传统的批处理系统，Storm具有处理无限数据流的能力，支持非常高的可扩展性和容错机制。Storm可以适用于多种编程语言，具有高度的灵活性。2、核心功能分布
  • 【前端】面试八股文——输入URL到页面展示的过程 帅比九日 面试八股文前端面试javascript
    【前端】面试八股文——输入URL到页面展示的过程1.DNS解析当用户在浏览器中输入URL并按下回车时，首先需要将域名转换为IP地址，这个过程称为DNS（域名系统）解析。具体步骤如下：浏览器缓存：浏览器首先检查自身缓存中是否有该域名的IP地址。操作系统缓存：如果浏览器缓存中没有找到，浏览器会向操作系统请求DNS信息。路由器缓存：如果操作系统缓存也没有找到，操作系统会向本地网络中的路由器请求DNS信息
  • vue3+springboot电影院售票选座管理系统 qq_3166678367 springboot后端java
    目录本系统(已开发完成)->成品实现截图开发技术本系统支持的技术栈源码获取详细视频演示：文章底部获取博主联系方式！！！！本课题重点核心代码部分展示论文提纲来自指导老师帅的肯定视频演示/源码获取本系统(已开发完成)->成品实现截图开发技术关键技术实现：在Java的开发过程中，可以使用HTML、CSS、JavaScript等前端技术来实现系统的用户界面设计和交互功能。后端可以使用Java语言编写业务逻
  • Node.js系列（4）--微服务架构实践 一进制ᅟᅠ        ‌‍‎‏  Node.js架构node.js微服务
    Node.js微服务架构实践引言微服务架构已成为构建大规模Node.js应用的主流选择。本文将深入探讨Node.js微服务架构的设计与实现，包括服务拆分、服务治理、通信机制等方面，帮助开发者构建可扩展的微服务系统。微服务架构概述Node.js微服务架构主要包括以下方面：服务拆分：业务领域划分与服务边界服务治理：服务注册、发现与负载均衡通信机制：同步与异步通信方案数据管理：分布式事务与数据一致性可观
  • vue3当中使用Pinia的store的组件化开发模式 堕落年代 vuevue.js
    一、安装与初始化安装Pinianpminstallpinia#或yarnaddpinia目的：引入Pinia核心库，为状态管理提供基础支持。挂载Pinia实例在main.js中初始化并注入Vue应用：import{createApp}from'vue'import{createPinia}from'pinia'importAppfrom'./App.vue'constapp=createApp(A
  • vue3使用swiper7 我承认都是月亮惹的祸 使用第三方库vue.js前端javascript
    vue3中使用swiper7基本使用swiper导入Swiper导入组件import{Swiper,SwiperSlide}from'swiper/vue/swiper-vue.js';导入需要使用到swiper的组件模块importSwiperCore,{Navigation,A11y}from'swiper';这里导入了Navigation模块,也就是使用左右箭头来导航.与A11y是一个无障碍
  • 使用 Redis 实现手机号验证码登陆功能，实际开发中使用 Token 实现登录校验又是如何做的？ 程序猿ZhangSir JavaSpring全家桶微服务javabootstrap开发语言
    目录一.使用Redis实现短信登陆功能1.1前言1.2简要分析短信登陆的业务流程1.3代码书写1.4页面展示效果1.5代码优化1.6优化之后的代码二.登录Token2.1JWT简介2.2JWT的使用方式2.3返回token2.4JWT的校验方式一.使用Redis实现短信登陆功能1.1前言对于我们用户来讲，我们在登陆一个APP的时候，有很多种登陆方式，比如"微信扫码"、"手机号登陆"、"支付宝扫码"
  • 微信小程序面试内容整理-图片优化 不务正业的猿 面试微信小程序前端微信小程序notepad++小程序面试职场和发展
    在微信小程序中，图片优化是提升加载速度、节省网络带宽和提高用户体验的重要步骤。图片通常是小程序页面中的主要资源，合理的图片优化能显著提高小程序的性能，尤其是在用户网络状况较差的情况下。1.选择合适的图片格式不同的图片格式有不同的特点，选择合适的格式能够有效减小图片的大小，同时保证图片质量。
  • AIGC时代品牌突围战：10招玩转DeepSeek内容推荐（深度扩展版） 白雪讲堂 人工智能大数据机器学习
    一、认知革命：从SEO到GEO的生死迭代案例对比：传统SEO困境：某家电品牌2023年投入200万SEO优化，关键词排名TOP3但流量下降42%（SEMrush数据）GEO突破案例：某母婴品牌通过结构化数据改造，AI推荐量从日均300次飙升至1.2万次（来源：DeepSeek官方案例库）实战要点：内容形态改造：将产品参数表升级为JSON-LD格式（某手机品牌实现参数类问题100%引用）流量分配逻辑
  • HTML音频、视频--课后作业实践 Heetun html5
    浅学了web一段时间，用浅显的知识做了一个小小的实践，各位大佬们多多包涵，指正。主要知识重现：标记语法：src:设置媒体文件的路径width、height:设置媒体文件的宽度、高度autostart:逻辑值，true为自动播放；false为不自动播放loop:逻辑值，true自动循环播放；false不循环播放2.CSS的内部样式表选择器1{属性1：属性值1；属性2：属性值2；......}选择器2
  • H3C Network命令详解 weixin_30471561
    转载于:https://www.cnblogs.com/fanweisheng/p/11156926.html
  • CSS中的伪类与伪元素：让样式更加灵活优雅 程序员
    CSS中的伪类与伪元素：让样式更加灵活优雅在CSS的世界里，伪类和伪元素是两个强大而优雅的特性，它们能让我们的样式代码更加简洁，同时提供更丰富的样式控制能力。今天，让我们深入了解这两个概念。一、伪类（Pseudo-classes）1.1什么是伪类？伪类用于定义元素的特殊状态。它们以单个冒号（:）开头，就像给元素添加了一个虚拟的类，但无需修改HTML结构。1.2常用伪类/*鼠标悬停状态*/butto
  • 如何创建HTML自定义元素：使用 Web Component 的最佳实践 乐闻x WebComponent学习记录前端htmlwebcomponent
    什么是WebComponent？WebComponent是一组允许开发者创建可复用、自定义HTML元素的技术。它们使得我们可以像原生HTML标签一样使用这些自定义元素，从而提升代码的模块化和复用性。WebComponent的核心技术有以下三部分：CustomElements（自定义元素）：允许开发者定义自己的HTML标签。ShadowDOM（影子DOM）：为元素提供封装的DOM和样式，让组件内部的
  • 程序员不用写代码？DeepSeek这个隐藏功能让我惊掉下巴 后端
    凌晨三点半，显示器蓝光映着我的黑眼圈。就在我第18次修改接口文档时，同事老王突然在微信甩来个神秘链接："用这个，今晚能睡个好觉"。我点开那个叫DeepSeek的页面，没想到接下来的三个小时，我经历了职业生涯最魔幻的加班夜。你见过会自己写测试用例的AI吗？那天晚上，我把项目需求文档往DeepSeek的对话框一扔，它竟然像资深架构师似的，先把需求拆解成模块，接着自动生成了带注释的接口文档。最绝的是，在
  • 创建在线工具来测量 PDF图纸 程序员
    在线处理PDF文件时，能够直接在浏览器中测量尺寸和内容可以显著提高工作效率。本指南将引导您完成使用ComPDFKit的WebSDK构建在线PDF测量工具的简单过程。先决条件首先，您需要访问我们的“WebSDK指南”页面来检查您是否满足这些要求：Node.js的最新稳定版本。与npm兼容的包管理器。应用许可证密钥如何获取30天免费许可证ComPDFKit为每个人提供30天免费许可证密钥，以测试他们的
  • css知识点总结 吃橘子的Crow csshtml前端
    1.css概述css是CascadingStyleSheets(级联样式表)css是一种样式表语言,用于为HTML文档控制外观,定义布局.可将页面的内容与表现形式分离,页面内容存放在HTML文档中,而用于定义白线形式的css在一个.css文件中或HTML文档的某一部分HTML如同网页的骨架,css如同修饰骨架的装饰品(样式)2.基本语法1.行内样式表行内样式表,又称内联样式、行间样式、内嵌样式。是
  • 【css酷炫效果】纯CSS实现动态云雾效果 冰夏之夜影 css前端
    【css酷炫效果】纯CSS实现动态云雾效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式body{margin:0;min-height:100vh;}.cloud-bg{position:relative;height:100vh;background:ra
  • 【css酷炫效果】纯CSS实现流动岩浆纹理效果 冰夏之夜影 css前端
    【css酷炫效果】纯CSS实现流动岩浆纹理效果缘创作背景html结构css样式完整代码效果图想直接拿走的老板，链接放在这里：上传后更新缘创作随缘，不定时更新。创作背景刚看到csdn出活动了，赶时间，直接上代码。html结构css样式.lava-texture{position:relative;width:400px;height:300px;overflow:hidden;border-radi
  • 【css酷炫效果】实现鱼群游动动态效果 冰夏之夜影 web前端css前端
    【css酷炫效果】实现小鱼游动动态效果缘创作背景css代码创建div容器引入jquery引入鱼群js完整代码效果图成品资源下载链接：点击下载缘在开发系统功能的时候，无意间看到了小鱼游动特效，感觉很有意思，就在网上找了相关教程，分享给大家。创作背景刚看到csdn出活动了，赶时间，直接上代码。css代码.container{background-color:transparent;position:f
  • 每日实战：python爬虫之网页跳转-以某博为例 代码CC python爬虫python爬虫pandas开发语言
    一、项目背景与核心需求通过逆向分析微博热榜接口，实现实时热搜数据抓取，重点解决：话题跳转链接参数缺失问题页面数据清洗规范化处理多维度数据采集存储二、网页跳转爬虫实现原理2.1跳转链接生成逻辑原始热搜词→"雷军刚知道柯洁定了SU7Ultra"处理流程：1.添加话题标识→#雷军刚知道柯洁定了SU7Ultra#2.URL编码→%23雷军刚知道柯洁定了SU7Ultra%233.添加搜索参数→&t=31生成
  • 数据库 + Spring Boot + Vue 全栈交互逻辑详解 代码CC Java项目-开发springbootvue.jsmysql数据库开发语言
    目录整体架构概述技术栈说明数据库设计规范SpringBoot后端架构Vue前端架构完整交互流程关键技术实现细节安全与性能优化异常处理机制整体架构概述graphTDA[Vue前端]-->|HTTP请求|B(SpringBoot后端)B-->|JDBC/ORM|C[(数据库)]C-->|返回数据|BB-->|JSON响应|AA-->|状态管理|D[VuexStore]B-->|缓存|E[Redis]B
  • 使用 Vue 2.x + Element UI 搭建后台管理系统详解 不知名靓仔 vue.jsui前端
    引言Vue.js是一个非常流行的前端框架，而ElementUI是基于Vue2.x的一套完整的UI组件库，非常适合用来构建企业级的后台管理系统。本文将详细介绍如何使用Vue2.x和ElementUI来搭建一个后台管理系统，包括项目初始化、路由配置、状态管理、权限验证等关键步骤。vue2后台管理项目源码合集下载地址见最下方1.环境准备确保你的开发环境中已安装Node.js和npm。接下来，我们将使用V
  • Vue.js + Element UI 实战：手把手教你实现评论关键词过滤功能，新手必学！》 《前端开发必备技能：Vue 2 + Element UI 实现评论敏感词过滤，完整代码分享》 《新手友 南北极之间 vue.jsui前端敏感词关键词敏感词过滤
    效果图【定制化开发服务，让您的项目领先一步】如有需求，直接私信留下您的联系方式。谢谢。我的邮箱：[email protected]以下是基于Vue2和ElementUI的评论关键词过滤功能实现，使用CDN引入Vue和ElementUI，方便在浏览器中直接预览。在线预览：Vue2+ElementUI实现评论关键词过滤功能目录需求场景技术选型实现步骤引入Vue2和ElementUI创建评论界面实现关键
  • 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其他