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

  • 金鼎量化助手中的板块与成份股如何实时联动以及股票代码与股软联动 wxqq_541182238 金鼎量化助手经验分享笔记其他人工智能
    在专栏之前的文章中有介绍板块强度的作用，使用了哪些参考指标等，下面介绍金鼎量化助手板块强度页面中的板块与成份个股的联动以及如何实现个股与股软：如同花顺、通达信之间的联动。通过股票代码直接联动到股软快速查看。一、板块强度与成份股的关联在金鼎量化助手的板块强度页面中分了两列，第一列是板块，第二列是板块对应的成份股，每天打开软件后会实时获取到板块的最新强度排名情况（需保证勾选上实时刷新选项框），板块列表
  • py之某website之music搜索接口 我不是程序员~~~~ 爬虫项目实战开发语言
    fromlxmlimportetreeimportrequestsheaders={"accept":"text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.7","accept-lan
  • 如何进行PHP性能优化？ 破碎的天堂鸟 PHP学习php性能优化开发语言
    PHP性能优化是一个复杂且多方面的过程，涉及从代码层面到服务器配置的多个方面。以下是一些关键的优化技巧和最佳实践：选择合适的数据结构（如数组、对象等）可以显著提高程序的运行效率。缓存是提升PHP性能的有效手段之一。可以通过页面缓存、数据缓存、内存缓存等方式来减少重复计算。例如，使用APC、Memcached或Redis进行内存缓存，或者利用文件系统进行数据缓存。使用索引、优化SQL查询语句以及使用
  • 前端性能优化-知识点 甲亿 前端性能优化
    Web性能优化意义1.减少整体加载时间：减小文件体积、减少HTTP请求、使用预加载。2.使网站尽快可用：仅加载首屏内容，其他内容根据需要进行懒加载。3.平滑和交互性：使用CSS替代JS动画、减少UI重绘。4.加载表现形式：使用加载动画、进度条、骨架屏等过渡信息，让用户感觉到页面加载更快。5.性能监测：性能指标、性能测试、性能监控持续优化等Web性能指标RAIL性能模型Response(响应)：快速
  • 【网络安全 | 漏洞挖掘】通过控制台调试实现登录 秋说 web安全漏洞挖掘
    未经许可，不得转载。文章目录正文在安全测试过程中，我留意到一个特殊现象：当登录出现错误时，相关请求包并不经过BurpSuite。那么此时账号密码是储存在前端的，我通过调试即可实现登录管理员账户。正文由于系统设定，输入错误的账号和密码会弹出“账号密码错误”的提示。基于此，我在代码中“账号密码错误”提示的相关位置设置了断点，截图如下：随后，我刷新浏览器页面，输入错误的账号和密码，然后点击登录按钮，操作
  • 性能优化中如何“避免链接关键请求” 混血哲谈 性能优化
    在性能优化中，“避免链接关键请求”是指通过优化资源加载顺序和依赖关系，减少关键渲染路径中的链式请求（CriticalRequestChains），从而加速页面加载。以下是具体策略及实施步骤：一、什么是“关键请求链”？定义：关键请求链是浏览器在渲染首屏内容时必须按顺序加载的资源序列。例如：HTMLCSSFont浏览器需先下载HTML，解析后请求CSS，CSS解析后发现需要字体文件，再请求字体。问题：
  • 网络空间安全专业培养方案及学习建议 菜根Sec 学习网络安全网络空间安全信息安全大学专业
    一、网络空间安全专业培养方案（示例）本文以武汉大学网络空间安全专业培养方案为例，列举本科期间学习的课程。详情参见：https://cse.whu.edu.cn/rcpy/lxspy/zyjs/wlkjaqzypyfa.htm1、培养目标网络空间安全学科是综台计算机、通信、电子、数学、物理、生物、管理、法律和教育等学科，并发展演绎而形成的交叉学科。培养的本科生要求掌握网络空间安全学科的基本理论、基本
  • 开发指南109-工作流节点功能 大道不孤,众行致远 平台开发指南java
    平台上工作流由一个个节点编排而来，每个节点对应的功能分成两种:1固定功能固定功能是开发人员开发的，在sys_functions定义的功能，简单说就是菜单上显示的功能。这种功能页面是真实存在系统中的，通过功能权限可以控制。2流程驱动功能流程驱动功能是实施人员配置出的，没有在sys_functions定义，也不出现在菜单上。他只出现在待办列表或我的任务里。这种功能一般是这样生成的：a、实施人员定义一个
  • vant官网-vant ui 首页-移动端Vue组件库 embelfe_segge 面试学习路线阿里巴巴android前端后端
    Vant是有赞前端团队开源的移动端vue组件库，适用于手机端h5页面。鉴于百度搜索不到vant官方网址，分享一下vant组件库官网地址，方便新手使用vant官网地址https://vant-contrib.gitee.io/vant/#/zh-CN/通过npm安装在现有项目中使用Vant时，可以通过npm或yarn进行安装：#Vue2项目，安装Vant2：npmivant-S#Vue3项目，安装V
  • HTML--表格 MK-mm html前端
    HTML表格一，语法表格的标签为,行的标签为,表项的标签为，可以用表示列或行的第一个单元格。格式为：标题表头1表头2...表头n表头表项1......表项n-1...快捷键：table>tr*个数>td*个数二，属性补充：设置表格背景图像，可用bgcolor或background属性，在标签内设置。三，不规则表格使用colspan和rowspan属性建立-跨行：单元格垂直方向合并，语法为单元格内容
  • Python 常用内建模块-HTMLParser 赔罪 Python系统学习python开发语言
    目录HTMLParser小结练习HTMLParser如果我们要编写一个搜索引擎，第一步是用爬虫把目标网站的页面抓下来，第二步就是解析该HTML页面，看看里面的内容到底是新闻、图片还是视频。假设第一步已经完成了，第二步应该如何解析HTML呢？HTML本质上是XML的子集，但是HTML的语法没有XML那么严格，所以不能用标准的DOM或SAX来解析HTML。好在Python提供了HTMLParser来非
  • nvm管理多版本node,nvm 配置国内镜像，npm配置国内镜像 奇纳尼 npm前端node.js
    目录前言nvm是什么？安装nvm配置nvm国内镜像nvm常用命令npm配置国内镜像：淘宝镜像nrm源管理命令：可以不用实际项目中会遇到的问题前言公司多个项目需要配置不同版本的node,按照传统方式一直切换下载安装不同版本的node太麻烦了，发现nvm可以管理多版本nodenvm是什么？nvm（node.jsversionmanagement），是一个nodejs的版本管理工具。nvm和n都是nod
  • autojs之乐旅商城自动报名自动约 恶猫 javascript前端开发语言autojs安卓脚本
    之前用的。现在能不能用不知道了啊。自己测试吧。//一键亮屏device.wakeUp();device.wakeUpIfNeeded();sleep(1000);//滑开swipe(device.width/2,device.height*0.8,device.width/2,device.height*0.1,2000);sleep(2000);//一键开微信launchApp("微信");sl
  • pyspark学习rdd处理数据方法——学习记录 亭午 学习
    python黑马程序员"""文件，按JSON字符串存储1.城市按销售额排名2.全部城市有哪些商品类别在售卖3.上海市有哪些商品类别在售卖"""frompysparkimportSparkConf,SparkContextimportosimportjsonos.environ['PYSPARK_PYTHON']=r"D:\anaconda\envs\py10\python.exe"#创建Spark
  • Node.js 包管理配置文件详解：package.json、npmrc、package-lock.json 全面解析 还是鼠鼠 node.jsnode.jsjsonjavascript前端vscode
    目录Node.js包管理配置文件详解1.package.json：Node.js项目的核心配置文件示例：完整的package.json配置关键字段解析2.package-lock.json：锁定依赖版本示例：部分package-lock.json作用如果package-lock.json出现问题3..npmrc：npm的自定义配置文件示例：修改npm源应用.npmrc配置4..nvmrc：Node
  • 国内 npm 镜像源推荐 PyAIGCMaster 我的学习笔记npm前端node.js
    国内npm镜像源推荐除了常用的淘宝镜像（https://registry.npmmirror.com），还有以下国内npm镜像源可供选择：1.CNPM（阿里云）地址：https://r.cnpmjs.org/特点：由cnpm提供，支持同步npm官方仓库。提供更快的下载速度和稳定性。使用方法：npmconfigsetregistryhttps://r.cnpmjs.org/2.京东镜像（JFrogA
  • .net 4.0 webServices 的使用，从前端到后端，代码超全。 静静香甜 .net前端后端c#
    1、创建webServices：创建之后会生成两个文件，分别是：SecurityWebService.asmx，SecurityWebService.asmx.csSecurityWebService.asmx代码：SecurityWebService.asmx.cs代码：usingNewtonsoft.Json;usingNewtonsoft.Json.Linq;usingSystem;usin
  • 鸿蒙5开发：Ark-TS UI 动效设计指南：让你的应用界面 “活” 起来 harmonyos-next
    在鸿蒙5应用开发中，Ark-TSUI不仅能让你快速构建漂亮的界面，还提供了丰富的动效功能，让界面交互更加流畅和有趣。今天咱们聊聊Ark-TSUI的动效设计，看看如何用几行代码实现按钮点击动画、页面过渡效果等，让你的应用“眼前一亮”。一、Ark-TSUI动效的核心玩法：简单又强大Ark-TSUI的动效设计基于Animator类和内置的过渡效果，无需复杂的第三方库，就能实现多种动画效果。比如：按钮点击
  • 如何设计一个 RPC 框架？需要考虑哪些点？ 蒂法就是我 rpc网络协议网络
    设计一个完整的RPC框架需要覆盖以下核心模块及关键技术点：一、核心架构模块模块功能与实现要点服务注册与发现使用Zookeeper/Nacos等实现服务地址动态注册与订阅，支持心跳检测和节点变更通知网络通信层基于Netty或gRPC的HTTP/2实现异步非阻塞传输，优化连接池复用与零拷贝技术序列化协议支持Protobuf（高性能）、JSON（可读性）、Hessian（跨语言）等，需平衡性能与扩展性动
  • HTML+CSS案例展示(CSS3D效果旋转相册) hacalili htmlcss前端css3
    参考来源：黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程_哔哩哔哩_bilibili效果展示：总结：transform：translate(x,y)rotate(180deg)scale()...顺序对最后的效果有影响，需要根据需求安排位移和其他属性的顺序；实现暂停动画效果：animation-play-state:paused;经常和鼠标经过等其
  • html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册 岑依惜 html5相册翻转效果
    这篇博客的目的是因为上篇HTML5CSS3专题诱人的实例CSS3打造百度贴吧的3D翻牌效果中有个关于CSS3D效果的比较重要的知识点没讲到，就是perspective和tranlateY效果图：嘿嘿，我把大学毕业时的一些照片，做成旋转木马，绕着我大文理旋转，不忘母校的培育之恩~1、perspectiveperspective属性包括两个属性：none和具有单位的长度值。其中perspective属
  • HTML5+CSS实现图片3D旋转效果，附音乐 宁醉小白 html5前端html
    利用程序呈现图片，可以俘获一众女生的心，增加音乐可以实现图片变化的同时也带上了想要得到效果，如此一程序实乃众人之喜。先看看程序呈现的效果，还是特别吸引人的。先在网上爬取想要呈现的美女照片，存放在文件夹img-one，与程序路径一致。图片像素需进行调整，同一面图片可以使用同一个图片，保持图片像素一致的同时也增加了立体感。第二张02.jpg和2.jpg可以倒着放，这样在程序实现的时候，可以和其他方向的
  • 炫酷的HTML5粒子动画特效实现详解 木木黄木木 html5前端html
    炫酷的HTML5粒子动画特效实现详解这里写目录标题炫酷的HTML5粒子动画特效实现详解项目介绍技术栈项目架构1.HTML结构2.样式设计核心实现1.粒子类设计2.动画效果实现星空效果烟花效果雨滴效果3.鼠标交互性能优化效果展示总结项目介绍本文将详细介绍如何使用HTML5Canvas技术实现一个炫酷的粒子动画特效系统。该系统包含三种不同的动画效果：星空、烟花和雨滴，并支持鼠标交互功能，能够为网页增添
  • conda篇----在已有conda环境的基础上升级python包 心惠天意 condapythonjvm
    conda篇----在已有conda环境的基础上升级python包原先的python版本第一步：condaupdate--all(py11)[xxx@aivrs01xxx]$condaupdate--allCollectingpackagemetadata(current_repodata.json):doneSolvingenvironment:done==>WARNING:Anewervers
  • systemd-networkd 的 *.network 配置文件详解 笔记250323 kfepiza 网络通讯传输协议物联#控制台命令行Shell脚本shcmd等#LinuxCentOSUbuntu等笔记tcp/ip网络linux
    systemd-networkd的*.network配置文件详解笔记250323查看官方文档可以用mansystemd.network命令,或访问:https://www.freedesktop.org/software/systemd/man/latest/systemd.network.html名称systemd.network—网络配置概要network.network描述一个纯INI风格的
  • systemd-networkd 的 /etc/systemd/network/*.network 的配置属性名称是不是严格区分大小写?是 kfepiza #LinuxCentOSUbuntu等网络通讯传输协议物联网络运维tcp/iplinux
    systemd-networkd的/etc/systemd/network/*.network的配置属性名称是不是严格区分大小写?是查看官方文档可以用mansystemd.network命令,或访问:https://www.freedesktop.org/software/systemd/man/latest/systemd.network.html亲测在Debian10.12-standard中
  • HTML实现酷炫3D相册 算法与编程之美 编程之美csshtmljscss3javascript
    欢迎点击「算法与编程之美」↑关注我们！本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。欢迎加入团队圈子！与作者面对面！直接点击！目录1、创建文件目录2、调背景色3、制作3D相册4、将图片散开，围成一圈。5、绘制透明底盘6、最终效果1、创建文件目录在Hbuilder在新建一个目录，创建css和js文件。图12、调背景色在style块里面给整个页面渲染成黑色调。*{padd
  • echart绘制海南地图时增加南海诸岛显示（现成geojson数据） 火火PM打怪中 工作中的问题
    使用场景：产品经理要求展示海南地图时，需要显示南海诸岛；问题：南海诸岛在中国地图上的显示，是echart在mapName=‘china’时，默认fix进去。但是海南省不会默认fix进去解决方案：将南海诸岛的geojson数据想办法弄到，将其直接放在海南省地图数据里面（将三沙市删除）处理结果：{"type":"FeatureCollection","features":[{"id":"460100"
  • CSS动画：逐帧动画与steps()函数 双囍菜菜 前端随记css前端
    逐帧动画与steps()函数：精准掌控动画节奏关键词：steps()函数、雪碧图、精灵动画、帧动画优化文章目录逐帧动画与steps()函数：精准掌控动画节奏一、逐帧动画的本质：时间函数的维度突破1.1线性动画的局限性1.2steps()函数数学解析二、视觉化解析：steps()工作原理2.1时间轴切片演示2.2与线性动画对比三、商业级案例：RPG游戏角色行走动画3.1雪碧图制作规范3.2完整实现代
  • 【Html+CSS】3D旋转相册 小木荣 web前端csshtml3d
    3D旋转木马相册&3D盒子相册因为代码大部分相同，就放一起了注释一下就是另一个相册3D旋转木马相册body{background-color:#000;/*视距，使子元素获得视距效果*/perspective:900px;}section{margin:20vhauto;position:relative;width:200px;height:200px;/*开启3D空间*/transform-s
  • 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其他