一个简单的HTML5后台登陆界面及登录实现_html5登录界面完整代码-程序员宅基地

技术标签: html5  后端  javascript  

一个简单的HTML5后台登陆界面及登录实现

可以实现固定管理员账号登陆的html登陆界面

1.实现效果图

登陆界面

2.代码实现

(包括HTML,css,js)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            form
            {
                width:100%;
                height:700px;
                 margin-top: 0px;
                background:#008B8B;
            }
            div
            {
                display:inline-block;
                padding-top: 80px;
                padding-right: 20px;
                
            }
            h2
            {
                font-family: "微软雅黑";
            font-size: 40px;
                color:black;
            }
            #log
            {
                color:blue;
            }
        </style>
    </head>
    <body>
        <form name="login">
            <center>
            <div>
            <h2>
                    合作岛后天管理系统
            </h2>
            <p>
                用户名:<input type="text" name="" id="0" value="" />
            </p>
            <p>
                密&emsp;码:<input type="password" name="" id="1" value="" />    
            </p>
            <p>
                <input type="button" name="" id="btn" value="登陆" />
            </p>
			<p>
				请输入管理员账号
			</p>
				
            
            </div>
            </center>
        </form>
    </body>
	
	<script type="text/javascript">
		var btn = 	document.getElementById("btn");
		var aInputs = document.getElementsByTagName('input')
		btn.onclick = function(){
			
        ;
        if (aInputs[0].value == "admin" && aInputs[1].value == "010615") {
                alert('登陆成功!');
				window.location.href='zjm.html';			         
            } else {
                alert('请填写正确的账号密码!');
            }
		}
		
    </script>
</html>

其中的 图1 代码是登陆功能的实现

图1:
<script type="text/javascript">
		var btn = 	document.getElementById("btn");
		var aInputs = document.getElementsByTagName('input')
		btn.onclick = function(){
			
        ;
        if (aInputs[0].value == "admin" && aInputs[1].value == "010615") {
                alert('登陆成功!');
				window.location.href='zjm.html';			         
            } else {
                alert('请填写正确的账号密码!');
            }
		}
		
    </script>

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/xiaoyuouu/article/details/120317758

智能推荐

Spring Cloud与Dubbo的完美融合之手「Spring Cloud Alibaba」_spring-cloud-starter-dubbo-程序员宅基地

文章浏览阅读7.4k次,点赞16次,收藏4次。很早以前,在刚开始搞SpringCloud基础教程的时候,写过这样一篇文章:《微服务架构的基础框架选择:SpringCloud还是Dubbo?》,可能不少读者也都看过。之后也就一直有关于这两个框架怎么选的问题出来,其实文中我有明确的提过,SpringCloud与Dubbo的比较本身是不公平的,主要前者是一套较为完整的架构方案,而Dubbo只是服务治理与RPC实现方案。由于Dubbo在国内有着非常..._spring-cloud-starter-dubbo

C++面向对象三大特性之一------继承_c++类的继承性-程序员宅基地

文章浏览阅读439次。C++这门作为面向对象的语言,继承这个特性可少不了,本篇博客内容丰富,介绍了很多部分,内容可能稍微有点难度和抽象,我给大家花了图,方便大家理解。接下来进入正片!!!正文开始继承(inheritance)机制是面向对象程序设计使代码可以复用的最重要的手段,它允许程序员在保持原有类特性的基础上进行扩展,增加功能,这样产生新的类,称派生类。继承呈现了面向对象程序设计的层次结构,体现了由简单到复杂的认知过程。以前我们接触的复用都是函数复用,继承是类设计层次的复用。_c++类的继承性

【定位】纯激光导航定位丢失/漂移问题的优化方案及思考_agv 激光定位算法 csdn-程序员宅基地

文章浏览阅读1.1w次,点赞25次,收藏162次。优化方案及后续思考_agv 激光定位算法 csdn

mysql执行提交与回滚-程序员宅基地

文章浏览阅读110次。try: cursor.execute(sql) conn.commit()except: conn.rollback()

2013秋浙大远程教育计算机应用基础-9计算机多媒体技术,2015秋浙大远程教育计算机应用基础-9.计算机多媒体技术...-程序员宅基地

文章浏览阅读70次。第9章 计算机多媒体技术(单选题)完成下列题目,这些题目与期末考试题或将来的统考题类似,请同学们认真做一遍。注意:上传你所做的答案后就可以下载我的参考答案。一. 多媒体技术的概念、多媒体计算机系统的基本构成1、 以下关于多媒体技术的描述中,正确的是__C__。A.多媒体技术中的"媒体"概念特指音频和视频B.多媒体技术就是能用来观看的数字电影技术C.多媒体技术是指将多种媒体进行有机组合而成的一种新的...

计算机辅助设计学什么,计算机辅助设计课程教学大纲-程序员宅基地

文章浏览阅读1.3k次。计算机辅助设计课程教学大纲课程名称:计算机辅助设计Computer-aided design课程编码:1313128214总学时数:72 课内实践时数:36学分:3开课单位:生命科学学院园林教研室适用专业:园林适用对象:本科(四年)一、课程的性质、类型、目的和任务计算机辅助设计课程是园林专业的专业必修课,主要使学生掌握AUTO CAD、PHOTOSHOP、3D MAX等绘图软件的使用方法与技巧。通..._计算机辅助设计是学什么

随便推点

从零开始学USB(二十六、usb鼠标驱动驱动实例分析[1]简介)_usb_mouse_as_key-程序员宅基地

文章浏览阅读3.3k次,点赞3次,收藏19次。这个驱动是在上一节的最简单的usb驱动基础上增加了输入子系统和usb包的获取和请求。首先先给出一个稍微简化了一下的usb的鼠标驱动,这里只做了鼠标的三个按键。为了方便验证,这里用鼠标的左键,右键和中间分别作为标准按键的l s enter 键。#include <linux/kernel.h>#include <linux/slab.h>#includ..._usb_mouse_as_key

从零开始之驱动发开、linux驱动(六十三、内核调试篇--基础知识1[earlyprintk建立过程])_static bool __init obsolete_checksetup(char *line)-程序员宅基地

文章浏览阅读782次。我们知道,内核中使用__section设置了很多的段属性,使用段属性可以很方便的对函数调用时间分层。比如我们之前常见的subsys_initcall,就要比module_init更早的执行,因为subsys_initcall在驱动中通常是bus和class,驱动程序调用执行需要class和bus已经创建才能执行驱动函数。关于这点我之前的博文已经有过分析。https://blog...._static bool __init obsolete_checksetup(char *line)

数据库之关系模型介绍_数据库关系模型-程序员宅基地

文章浏览阅读2.9k次。本篇文章是数据库系列的第一篇文章,本系列文章是笔者在学习《数据库系统概念》这本书总结的内容,使用的数据库是mysql。关系数据库的结构关系数据库由表(table)的集合构成,每个表由唯一的名字。表中的一行代表了一组值之间的联系,而表就是这种联系的一个集合,表这个概念和数学上的关系概念是密切相关的,这也是关系数据模型名称的由来。在关系模型的术语中,关系(relation)用来指代表,元组..._数据库关系模型

从Hadoop到Spark、Flink,大数据处理框架十年激荡发展史!-程序员宅基地

文章浏览阅读780次,点赞4次,收藏8次。当前这个数据时代,各领域各业务场景时时刻刻都有大量的数据产生,如何理解大数据,对这些数据进行有效的处理成为很多企业和研究机构所面临的问题。本文将从大数据的基础特性开始,进而解释分而治之的处理思想,最后介绍一些流行的大数据技术和组件,读者能够通过本文了解大数据的概念、处理方法和流行技术。什么是大数据?大数据,顾名思义,就是拥有庞大体量的数据。关于什么是大数据,如何定义大数据,如何使用大数据等一...

5G(9)---5G基本概念及其发展概况_5g9jcon-程序员宅基地

文章浏览阅读1w次。5G基本概念及其发展概况      一、5G基本概念   第五代移动电话行动通信标准,也称第五代移动通信技术,外语缩写:5G。也是4G之后的延伸,正在研究中,5G网络的理论下行速度为10Gb/s(相当于下载速度1.25GB/s)[4]。   诺基亚与加拿大运营商BellCanada合作,完成加拿大首次5G网络技术的测试。测试中使用了73GHz范围内频谱,数据传输速率为加拿大现有4G..._5g9jcon

数据库系统原理实验一——数据库定义实验_数据库实验一数据定义实验-程序员宅基地

文章浏览阅读4.7k次,点赞6次,收藏44次。数据库定义实验一.实验目的二.实验要求三.实验内容和结果1.定义数据库2.定义模式3.定义基本表一.实验目的  理解和掌握数据库DDL语言,能够熟练地使用SQL DDL语句创建、修改和删除数据库、模式和基本表。二.实验要求  理解和掌握SQL DDL语句的语法,特别是各种参数的具体含义和使用方法;使用SQL语句创建、修改和删除数据库、模式和基本表。掌握SQL语句常见语法错误的调试方法。  本实验建立TPC-H数据库模式。TPC-H 数据库模式由零件表(Part)、供应商表(Supplier)、零件_数据库实验一数据定义实验

推荐文章

热门文章

相关标签