使用javascript实现简易登录功能

已于 2022-11-24 22:14:11 修改
阅读量6.2k 收藏 53
点赞数 11
文章标签： javascript html
于 2022-11-24 22:13:05 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Drink_coffee_/article/details/128027259
版权

新建一个js文件（我这里取名为Signin.js），定义两个变量，用户名和密码，使用从网页中输入的参数进行赋值，之后进行if判断语句，如果输入的用户名和密码都匹配正确则弹窗登陆成功，并且进入指定网页，如果用户名或者密码不正确，则弹窗用户名或密码错误，如果用户名未输入，则弹窗用户名不能为空，如果密码未输入，则弹窗密码为空，js代码如下（复制可直接使用）：

function login() {
        
            var userName = document.getElementById("nName").value;
            var userPass = document.getElementById("uPass").value;
            
            if (userPass == "123456" && userName == "root") {
                alert("登入成功");
                window.location.href="index.html";
            } 
            else if (userName == "" || userName == null) {
                alert("用户名不能为空");
                return false;
            } 
            else if (userPass == "" || userPass == null) {
                alert("密码不能为空");
                return false;
            } 
            else if (userPass != "123456" || userName != "mhh") {
                alert("用户名或密码错误");
                return false;
            } 
            else{
                return true;
            }
                
        }

之后在你的html文件中导入该文件

<script src="Signin.js"></script>

html文件中body标签下的登录窗口需要有用户输入栏，我是这样写的（也可直接复制）

<body style="text-align: center;background-image:url('JPG/denglu.jpg');" onLoad="document.getElementById('enter').focus()" οnkeydοwn="if(event.keyCode===13) document.all.enter.click()"><br><br><br><br><br>

#此处导入CSS文件
        <style>
            @import url(denglu.css);
        </style>
        <div style="text-align: center;width: 100%;height: 50px;color: #fff;font-family: '楷体';font-size: 30px;text-shadow: -2px 2px 0 skyblue,2px 2px 0 skyblue,2px -2px 0 skyblue;"><h1>登录</h1></div>
        <div class="content" >
          <div class="login-wrap">
            <form id="user_login" action="">
              <h3 style="font-family: '楷体';">登 录</h3><br>
              账号:<input class="name" name="name" id="nName" type="text" placeholder="请输入用户名" ><br>
              密码:<input class="code" name="password" id="uPass" type="password" placeholder="请输入密码" >
              <div class="btn" onLoad="document.getElementById('enter').focus()">
                <input type="button" id="enter" class="submit" value="登录" οnclick="login()">
                <input type="reset" id="reset" class="reset" value="重置" >
              </div>
                <div id="CheckMsg" class="msg"></div>
            </form>
          </div>
        </div>

</body>
注意：CSS样式需要定义来美化用户页面

我的CSS文件如下：

.content{
    padding:0 auto;
  margin: 0 auto;
  height: 450px;
  width: 100%;
  background-size:100% 450px ;
  margin-top: 25px;
}
.login-wrap{
  position: absolute;
  width:320px;
  height: 300px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  right:40%;
  margin-top: 75px;
  background: url("../Image/Login-Img/form_bg.png") no-repeat;
  background-size: 100%;
  border-radius: 25px;
  background-color: #fff;
  opacity: 0.8;
}
.login-wrap h3{
  color:black;
  font-size: 18px;
  text-align: center;
}
.name,.code{
  border:1px solid cyan;
  width:130px;
  height: 40px;
  margin-left: 25px;
  margin-bottom: 20px;
  padding-left: 40px;
  border-radius:12px;
  border-color:skyblue;
}
.name{
  color: black;
  background-position-x:12px;
}
.code{
  color: blue;
  background-position-x:12px;
}
.btn input{
  height: 40px;
  width: 120px;
  float: left;
  margin-right: 25px;
  border:none;
  color:black;
  font-size: 16px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
  margin-top: 10px;
  cursor: pointer;
}
input:active{border-color:#147a62}
.submit{background: #ea8c37;margin-left: 25px;}
.reset{background: #bbb;}
/**错误信息提醒**/
.msg{
  color: #ea8c37;
  font-size: 14px;
  padding-left: 40px;
  padding-top: 10px;
  clear: both;
  font-weight: bold;
}
一些背景图片可以用你自己的图片来取代，用自己想用的图片路径

好啦，以上就是一个简易（不需要数据库）的登录系统，希望能给大家一些参考，如有问题可以在评论区留言，也很希望大佬来给我提出更多改进的意见，谢谢大家

Drink_coffee_
关注
  • 11
    点赞
  • 踩
  • 53
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
js判断用户名密码实现登录
03-11
js判断用户名密码实现登录
javascript表单登录界面
05-15
javascript表单登录界面，内部加入图片，表单检测，随机生成验证码等，适合小白。
javascript 写一个登录界面
yanguicehn的博客
04-06 4406
3.7.2 登录 login.html 登录： 在这里插入代码片 <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" href="css/bootstrap.min.css"/> <style> div{ margin: 20px; width: 300px; }
利用JS实现简单登录
div666的博客
02-03 2万+
介绍如何使用JS实现账户验证及登录跳转。
javascript实现简易计算器
12-11
前言 hello，大家好，学习一段时间了，学习了框架和后台的内容，为了防止前端的js和jq的熟练度不够，忘记很多算法和基础用法，会陆陆续续更新一些小的功能效果code，用于记录和积累，不足之处很多，封装性和代码冗余暂且不严格要求，尽力完善，保持更新.. 简易加减乘除计算器，利用表单的value值取值，用原生js实现.可直接复制到编辑器，打开即可运行. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>加减乘除计算器</title> [removed] function
前端三件套搭建登录页面（HTML+CSS+JS）
weixin_62268437的博客
04-28 4349
本文运用前端三件套，搭建了这样一个登录界面与注册界面。
【JS】用JS实现系统登录页的登录和验证
热门推荐
wan小小冰的博客
09-05 6万+
这篇文章用JS显示表单的登录以及验证和对键盘的监听，这里有两种方法，一种是无需用户验证直接登录，一种是需要账户密码匹配才可登录。1. html代码&lt;div class=&quot;content&quot;&gt; &lt;div class=&quot;login-wrap&quot;&gt; &lt;form id=&quot;user_login&quot; action=&amp
使用原生js写一个简单的注册登录页面
apple_61973423的博客
08-15 2万+
使用JavaScript写的登录注册页面
用js实现简单的登录功能
yang68668的博客
10-25 7512
<!-- 实现登录功能： 1.弹出两个输入框，分别让用户输入用户名和密码。 2.验证用户输入的用户名与密码是否正确。 假设从后端获取到的用户名与密码是 zhangsan 123456 输入正确，弹出 登录成功 输入错误，提示：用户名或密码错误 --> <script> var username = prompt("请输入用户名"); var password = prompt("请输入密码.
javascript实现简易计算器功能
01-18
本文实例为大家分享了javascript实现简易计算器的具体代码，供大家参考，具体内容如下 功能： 1、实现单击数字按钮输入数字 2、实现基础四则运算功能，并添加必要的异常处理，例如：除数不能为零 3、实现小数点添加功能，并添加异常处理，小数点只能出现一次 4、实现正负号功能 5、实现回退功能，已经是最后一位时，显示框显示为零 6、清屏功能 使用的知识点： 1、利用大量的自定义函数实现业务逻辑 2、灵活运用事件及事件处理 3、培养异常处理的编程方法 4、培养并实践利用不同思路实现编程 综合练习目的： 1、将CSS、HTML和JS有效的惊醒技术组合，实现业务功能 2、锻炼和培养编程思想，解决
JavaScript实现简易计算器小功能
01-21
本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> </head> <body> <!--页面布局--> <input type=text id=num1 placeholder=请输入第一个数字/> <input type=text id=operator placeholder=请输入运算符> <input type=text id=num2 pl
基于HTML5与JavaScript实现简易音乐播放器
01-10
基于HTML5与JavaScript实现简易音乐播放器 - 不懂运行，下载完可以私聊问，可远程教学 该资源内项目源码是个人的毕设，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ <项目介绍> 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 --------
JavaScript 注册登录页面的简单实现
繁城落叶
10-17 5万+
三年前的代码了，代码年久失修出现问题在所难免，在此解释一下本文中的内容，各位可以选择是否继续观看：  - 首先这是一个JS课程的一个作业，老师的要求就是使用cookie机制来完成登陆注册的，所以此次并不涉及任何的后台内容。 - 过程很简单，主要核心就是讲用户输入的内容保存到cookie中，以及读取cookie。 - Chrome浏览器可能没有支持本地Cookie。 - 出的问题都是在保存和...
JS实现登陆界面
qq_46232829的博客
11-19 1万+
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{
js-仿京东显示隐藏密码
qq_41670147的博客
11-21 1069
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-...
JavaScript登录界面制作
friend_chen的博客
05-15 4730
主要使用javascript表单登录界面，内部加入图片，表单检测，随机生成验证码。 注册： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-eq
js登录页验证用户名密码
m0_59169193的博客
04-23 1万+
需求： 接受用户输入的用户名和密码，若用户名为"admin",密码为"123456",则提示用户登录成功。 var sww = 'admin'; // 设置用户名名称 var sty = '123456'; // 设置密码 do { // 使用 do while循环 先执行一次循环体，也就是下面的 用户名和密码输入框以及if分支。 var str = prompt('请输入用户名:'); // 弹出用户名输入框
ant design DatePicker日期选择框指定分钟的间隔minuteStep属性
最新发布
u010234868的专栏
05-17 196
在上面的例子中，DatePicker 将只允许用户以 15 分钟为间隔选择分钟。是 Ant Design 的 TimePicker时间选择框组件的一个属性。设置为 30，则用户可以选择以 30 分钟为间隔的分钟值。如果你想让分钟选项只能以 15 分钟为间隔选择，你可以将。
编写JavaScript程序实现简易购物车
06-12
好的，以下是一个简单的JavaScript程序实现简易购物车的示例： ```javascript // 初始化商品列表 const products = [ { id: 1, name: '商品1', price: 100 }, { id: 2, name: '商品2', price: 200 }, { id: 3, name: '商品3', price: 300 }, { id: 4, name: '商品4', price: 400 }, ] // 初始化购物车 let cart = [] // 添加商品到购物车 function addToCart(id) { const product = products.find(p => p.id === parseInt(id)) if (product) { cart.push(product) console.log(`已添加商品 ${product.name} 到购物车`) } else { console.log('商品不存在') } } // 从购物车中移除商品 function removeFromCart(id) { const index = cart.findIndex(p => p.id === parseInt(id)) if (index !== -1) { const product = cart.splice(index, 1)[0] console.log(`已从购物车中移除商品 ${product.name}`) } else { console.log('购物车中不存在该商品') } } // 计算购物车总价 function getTotalPrice() { return cart.reduce((total, product) => total + product.price, 0) } // 打印购物车商品列表和总价 function printCart() { console.log('购物车商品列表：') cart.forEach(product => console.log(`- ${product.name}（${product.price}元）`)) console.log(`总价：${getTotalPrice()}元`) } // 测试 addToCart(1) addToCart(2) addToCart(3) removeFromCart(2) printCart() ``` 在这个示例中，我们首先定义了一个商品列表和一个购物车数组，然后实现了三个操作函数： - `addToCart(id)`：将指定id的商品添加到购物车中； - `removeFromCart(id)`：从购物车中移除指定id的商品； - `getTotalPrice()`：计算购物车中所有商品的总价。 最后，我们调用了这些函数来测试程序的功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值