用HTML/JScript/CSS做一个简单的登录界面

上代码

<!DOCTYPE html>
<!--定义为HTML5文档-->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!--编码设置为UTF-8,防止中文出现乱码-->
<title>登录</title>
</head>
<body>
<!--定义CSS-->
<style>
body {background-color:#d0e4fe;/*背景颜色为浅蓝色*/
}
p{color:orange;text-align:center;/*文字居中，颜色为橙色*/
}
h2{color:orange;text-align:center;/*标题居中，颜色为橙色*/
}
input{color:green;text-align:center;/*输入的文字居中，颜色为绿色*/
}
button{color:red;text-align:center;/*按钮居中，颜色为红色*/
}
p input{width:300px;height:30px;/*输入框居中，宽300px，高20px*/
}
</style>
<div style="text-align: center;line-height: 500px;"></div>
<!--定义按钮居中-->
<h2>账号：</h2><p>
<input id="demo" type="text"></p>
<!--账号输入框-->
<h2>密码：</h2>
<p><input id="passwd" type="password"></p>
<!--密码输入框-->
<!--定义js-->
<script>
function myFunction()
//定义一个函数
{var x=document.getElementById("demo").value; //获取账号值var y=document.getElementById("passwd").value;  //获取密码值if(x!="username1"&&x!="username2")  //如果账号不存在{alert("没有此账号！");}else{  //否则if(x=="username1"){  //如果账号是第一名用户if(y!="userpasswd1"){ //如果密码不正确alert("密码错误");}else{  //否则window.open("userlink1");  }}if(x=="username2"){  //如果账号是第2名用户if(y!="userpasswd2"){  //如果密码不正确alert("密码错误");}else{  //否则window.open("userlink2");}}}
}
</script>
<br \="">
<br \="">
<p>
<button type="button" onclick="myFunction()" style="height:50px;width:100px;">登录</button>
<!--登录按钮-->
</p>
</body>
</html>

完成后，将后缀名改为*.html/*.htm（没有区别）

注意！！！

将刚才代码中所有username1改为第一个用户的账号名

将所有username2改为第2个用户的账号名

将所有userpasswd1改为第一个用户的密码

将所有userpasswd2改为第2个用户的密码

将所有userlink1改为第一个用户账号密码正确后跳转到的网页

将所有userlink2改为第2个用户账号密码正确后跳转到的网页

用HTML/JScript/CSS做一个简单的登录界面相关推荐

一对一直播源码，实现一个简单的登录界面
一对一直播源码,实现一个简单的登录界面 1.html <!DOCTYPE html> <html lang="en"> <head><me ...
PyQt5制作一个简单的登录界面
最近在学习GUI设计,分享做的一些小项目. 这篇文我们讲一下如何制作一个简单的登录界面. 目录一.效果图二.简述制作过程: 三.源码及材料: 1.源码: 2.图片素材: 一.效果图如下: 二.简 ...
第四章 .net core做一个简单的登录
项目目标部署环境:CentOS 7+ 项目技术点:.netcore2.0 + Autofac +webAPI + NHibernate5.1 + mysql5.6 + nginx 开源地址:https ...
HTML+CSS写一个简单的网页界面
学习了HTML和CSS入门的基本命令后,写出来一个简单的登录网页界面,可以跳转.登录. 主界面代码(log.html) <!DOCTYPE html> <html><he ...
使用css做一个简单的车轮滚滚效果
学了css之后发现很多效果只要几行代码就能实现,这个车轮滚滚的效果也不例外. 首先设置个大盒子,设置他的宽度(随意多少,但是肯定要比车轮的宽度大),高度与车轮保持一致即可.跟我一起来做个简单的车轮滚滚 ...
Windows10 手机应用程序开发 - 3. 做一个简单的计算器界面
2019独角兽企业重金招聘Python工程师标准>>> 目标:完成一个简单的计算器的界面,暂时不做点击处理,主要联系UI布局. 步骤: 1.创建一个空的windows phone 项 ...
使用struts做一个简单的登录跳转
[java web]第一节课 3.7号作业做一个非常简单的登录跳转界面,要求: 需要一个登陆界面用于接受用户输入的信息输入姓名"wei"如果正确则跳转到"index. ...
JSP写一个简单的登录界面
系列文章目录 JSP实现不链接数据库的简单登录功能实现文章目录系列文章目录前言一.jsp是什么? 二.使用到的页面代码 1.login.jsp 2.index.jsp 3.LoginServl ...
tornado完成一个简单的登录界面/图片的上传
# 对程序中可能经常变化的值应该提取到配置文件中 # 创建文件夹在文件夹下创建file,充当配置文件 from tornado.httpserver import HTTPServer from to ...
用HTML+CSS做一个简单好看的环保网页
⛵ 源码获取文末联系 ✈ Web前端开发技术描述网页设计题材,DIV+CSS 布局制作,HTML+CSS网页设计期末课程大作业 | 环境保护 | 保护地球 | 校园环保 | 垃圾分类 | 绿色家 ...

用HTML/JScript/CSS做一个简单的登录界面

用HTML/JScript/CSS做一个简单的登录界面相关推荐

最新文章

热门文章