炫酷登录注册 完整功能版【本地存储+JS+HTML+CSS+jQuery】

news2025/2/24 20:54:08

一:源码获取

🔍说明:

      这篇文章是完整功能的登录注册,包含了基于本地存储的注册,登录,以及密码修改功能,登录包含错误三次冻结账户1000s等细微功能,适合新入门前端的小伙伴拿来学习使用,下面是这个源码的资源链接,本资源是积分下载需要VIP,没有VIP的小伙伴私聊我获取即可

https://download.csdn.net/download/weixin_52212950/86082219https://download.csdn.net/download/weixin_52212950/86082219


🔍无功能版本:

       如果需要自己使用后端语言写功能此处获取无功能版本的页面即可,获取方式同上

一款非常炫酷登录注册页面_模拟12306售票系统-Javascript文档类资源-CSDN下载一个非常炫酷的的登录注册页面,登录注册切换由jQuery实现,原理简单易懂并且十几行代码就完成了模拟12306售票系统更多下载资源、学习资料请访问CSDN下载频道.https://download.csdn.net/download/weixin_52212950/85799335


二:页面展示

------ 登录页面及所有错误提示 

------ 注册页面及所有错误提示

------ 登陆密码错误三次冻结1000s

------ 找回密码及其错误提示 

 数据存放形式

 三:部分代码演示

document.addEventListener('DOMContentLoaded',function(){
user=window.localStorage.getItem('user');
    user=JSON.parse(user)
    var admin1=document.querySelector('.login-num');
    var pwd1=document.querySelector('.login-pwd');
    var login_btn=document.querySelector('.login-button');
    var flag3=4;
    login_btn.addEventListener('dblclick',function(event){
        var flag1;
        var flag2;
        for( i=0;i<user.length;i++){
             if(admin1.value!=user[i].admin){
                 flag1=false;
             } else if(admin1.value==user[i].admin){
                   flag1=true;
                   for( var j=0;j<user.length;j++){
                    if(pwd1.value!=user[i].pwd){
                        flag2=false;
                    } else if(pwd1.value==user[i].pwd){
                          flag2=true;
                          if(flag2==true){
                              break;
                          }
                       }
                  }
                       break;
                }
        }if(admin1.value==''&&pwd1.value==''){
         alert('请输入您的账号')
       }else if(admin1.value==''&&pwd1.value!=''){
           alert('不输入账号,谁知道密码对不对呢?')
       }else if(flag1==false){
            alert('您输入的账户不存在,检查是否输错或去注册账户!')
        }else if(flag1==true&&pwd1.value==''){
             alert('密码不能为空')
        }
        else if(flag1==true&&flag2==false){
            flag3--;
            if(flag3==0){
                login_btn.className='current1'
                login_btn.value='还剩下1000秒后解除冻结';
                login_btn.disabled=true;
                pwd1.value=''
                alert('错误次数过多,您的账户被冻结');
                var times=1000;
                var timer=window.setInterval(function(){
                    if(times==0){
                        window.clearInterval(timer);
                        login_btn.disabled=false;
                        login_btn.className='login-button' 
                        login_btn.value='登录';
                        flag3=4;
                    }else{
                        times--;
                        login_btn.value='还剩下'+times+'秒后解除冻结';
                    }     
                },1000)
                console.log(11);
            }else{
                alert('密码错误,您还剩下'+ flag3 +'次机会')
            }
        }
        else if(flag1==true&&flag2==true){
              window.location.assign('../html/main.html')
        }
    })
})
document.addEventListener('DOMContentLoaded',function(event){
    document.addEventListener('selectstart',function(event){
        event.preventDefault();
    })
    document.addEventListener('contextmenu',function(event){
        event.preventDefault();
    })
})
$(function(){
      $('.change-register-button').on('click',function(){
            $('.login').animate(
                {
                    'left':'240px'
                },400,function(){
                    $('.login').css({'display':'none',
                                          'left':'60px'})
                    $('.change-register-box').css('display','none')
                    $('.register').css('display','block')
                    $('.change-login-box').css('display','block')
                }
            )
      })
      $('.change-login-button').on('click',function(){
        $('.register').animate(
            {
                'right':'240px'
            },400,function(){
                $('.register').css({'display':'none',
                                            'right':'60px'})
                $('.change-login-box').css('display','none')
                $('.login').css('display','block')
                $('.change-register-box').css('display','block')
            }
        )
  })
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/408378.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

前端页面显示的时间格式为:2022-03-18T01:46:08.000+00:00 如何转换为:年-月-日 时:分:秒 ?

解决办法&#xff1a; 第一种办法&#xff1a;后端格式处理&#xff0c;在后端转数据格式为字符串类型 第二种办法&#xff1a;前端格式处理&#xff0c; ElementUI 中 Table-column Attributes 列属性中有一个 formatter参数 &#xff0c;用来格式化内容 &#xff0c; 里面可…

SpringBoot+Vue实现文件上传下载功能

前言 本文主要实现了以下功能&#xff1a; 1、 单文件上传以及多文件上传功能 2、 输入文件名下载文件功能 3、 输入音频文件名在线播放音频功能 一、项目基础部分搭建 1.1 前端项目搭建 1.1.1 新建前端项目 打开命令行输入以下命令&#xff0c;使用Vue CLI创建前端项目&a…

浏览器同源策略导致跨域问题 No ‘Access-Control-Allow-Origin‘ header 原因及解决方式--(后端、nginx、前端)

目录 现象 原因 浏览器同源策略 导致结果&#xff1a; 解决方案 跨源资源共享&#xff08;CORS&#xff09; 各个端解决方法&#xff1a; 后端&#xff1a; 方式1&#xff1a;重载WebMvcConfigurer方法 方式2&#xff1a;配置监听CorsFilter 方式3&#xff1a;相关类…

微信小程序--》你真的了解小程序组件的使用吗?

&#x1f3cd;️作者简介&#xff1a;大家好&#xff0c;我是亦世凡华、渴望知识储备自己的一名在校大学生 &#x1f6f5;个人主页&#xff1a;亦世凡华、 &#x1f6fa;系列专栏&#xff1a;微信小程序 &#x1f6b2;座右铭&#xff1a;人生亦可燃烧&#xff0c;亦可腐败&…

JAVA-分页查询

分页查询 分页查询将数据库中庞大的数据分段显示,每页显示用户自定义的行数,提高用户体验度,最主要的是如果一次性从服务器磁盘中读出全部数据到内存,有内存溢出的风险 真假分页 假分页: 其原理还是将所有的数据读到内存中,翻页从内存中读取数据, 优点: 实现简单,性能高 缺点…

HTML+CSS+JS网页设计期末课程大作业 京剧文化水墨风书画

Web前端开发技术 描述 网页设计题材&#xff0c;DIVCSS 布局制作,HTMLCSS网页设计期末课程大作业&#xff0c;茶文化网站 | 中华传统文化题材 | 京剧文化水墨风书画 | 中国民间年画文化艺术网站 | HTML期末大学生网页设计作业 HTML&#xff1a;结构 CSS&#xff1a;样式 在操作…

EasyExcel复杂表头导出(一对多)升级版

一、前言 在之前写的 EasyExcel复杂表头导出&#xff08;一对多&#xff09;的博客的结尾&#xff0c;受限于当时的能力和精力&#xff0c;留下一些问题及展望。现在写下此博客&#xff0c;目的就是解决之前遗留的问题。 背景介绍&#xff0c;见上述链接指向的博客&#xff0c;…

vue3 route和router的区别以及如何传参数接受参数,如何像vue2一样使用$route和$router详解

vue3 route和router的区别以及如何传参数接受参数&#xff0c;如何像vue2一样使用$route和$router详解 因为我们在 setup 里面没有访问 this&#xff0c;所以我们不能再直接访问 this.$router 或 this.$route。作为替代&#xff0c;我们使用 useRouter 和useRoute函数,或者 Vu…

HTML小游戏21 —— html5版暴打皮卡丘游戏(附完整源码)

&#x1f482; 网站推荐:【神级源码资源网】【摸鱼小游戏】&#x1f91f; 前端学习课程&#xff1a;&#x1f449;【28个案例趣学前端】【400个JS面试题】&#x1f485; 想寻找共同学习交流、摸鱼划水的小伙伴&#xff0c;请点击【摸鱼学习交流群】本节教程我会带大家使用 HTML…

微信小程序--基础内容(详解)(一)

一、常用标签 1、view 标签 view 标签是一个块级元素&#xff0c;类似于 div&#xff08;小程序里面没有div标签&#xff09;&#xff0c;里面可以放任何内容或者插值表达式&#xff0c;如下所示&#xff1a; <view>这是view标签<view> <view>{{num}}<…

谷歌新版本跨域错误深度剖析与解决:request client is not a secure context and the resource is in more-private address

快速解决&#xff1a; 最近在测试http服务时&#xff0c;谷歌浏览器报了以下错误 “The request client is not a secure context and the resource is in more-private address space ‘local’”. 从报错信息来看&#xff0c;“不安全的请求方请求了更私有的本地资源” 对于…

API接口开发其实特简单,Python Flask Web 框架教程来了

大家好&#xff0c;日常工作中&#xff0c;无论你是数据工程师、数据挖掘工程师&#xff0c;甚至数据分析人员&#xff0c;都不可避免的与他人进行数据交互&#xff0c;API接口提供数据是最常见的形式。 今天我给大家分享 Python Flask Web 框架教程&#xff0c;共计10个部分&…

Vue面试题你知道多少

✅作者简介&#xff1a;大家好我是hacker707,大家可以叫我hacker&#xff0c;新星计划第三季python赛道Top1&#x1f3c6; &#x1f4c3;个人主页&#xff1a;hacker707的csdn博客 &#x1f525;系列专栏&#xff1a;带你玩转Vue &#x1f4ac;推荐一款模拟面试、刷题神器&…

前端401错误 解决方法:响应拦截器

目录 1.该问题出现的原因 2.处理401问题的解决方案原理 3.使用响应拦截器解决问题 1.该问题出现的原因 在前后端分离项目中&#xff0c;最常见的是前端点击登录后&#xff0c;后端返回token字符串&#xff0c;这个token可以看作是一个“令牌”&#xff0c;就比如你去酒店办理…

Vue实战【调整Vue-element-admin中的菜单栏,并添加顶部模块菜单栏】

目录&#x1f31f;前言&#x1f31f;小伙伴们先看&#x1f31f;实现思路&#x1f31f;具体代码&#x1f31f;最后&#x1f31f;前言 因为最近在整合公司的项目&#xff0c;需要把所有系统里的功能集成到一个项目里&#xff0c;这样就导致菜单栏目录会特别的多&#xff0c;不便…

【JavaScript】手撕前端面试题:事件委托 | 判断URL是否合法 | 全排列

&#x1f5a5;️ NodeJS专栏&#xff1a;Node.js从入门到精通 &#x1f5a5;️ 博主的前端之路&#xff08;源创征文一等奖作品&#xff09;&#xff1a;前端之行&#xff0c;任重道远&#xff08;来自大三学长的万字自述&#xff09; &#x1f5a5;️ TypeScript知识总结&…

【Axure】Axure RP 9下载、安装、授权、汉化

目录一、Axure RP 9 下载二、Axure RP 9 安装三、Axure RP 9 授权四、Axure RP 9 汉化一、Axure RP 9 下载 1、Axure RP 9 下载地址&#xff1a;https://www.axure.com/release-history/rp9 2、其他版本下载地址 ①登录axure官网:https://www.axure.com/ ②拉到最下面找到相关…

很好看的爱心表白代码(动态)

分享几个好看的爱心表白代码❤️爱心代码❤️&#xff08;C语言&#xff09;❤️流动爱心❤️&#xff08;htmlcssjs&#xff09;❤️线条爱心❤️&#xff08;htmlcssjs&#xff09;❤️biu表白爱心❤️&#xff08;htmlcssjs&#xff09;❤️matlab爱心函数❤️&#xff08;需…

Vue3+TS+Vite 入门指南

最近尝试上手 Vue3TSVite&#xff0c;对比起 Vue2 有些不适应&#xff0c;但还是真香~ 上手前先说下 Vue3 的一些变化吧~ Vue3 的变化 Vue3 带来的变化主要有以下几个方面&#xff1a; 使用层面 对比起 Vue2 启动速度快很多&#xff0c;新项目从 1s 升级到不到 500msvite.co…

Element-UI新手学习记录(一)

Layout 布局 通过基础的 24 分栏&#xff0c;迅速简便地创建布局。 span的作用 一行默认24个span&#xff0c;属性放在el-col中决定此元素占据多少span gutter属性 放在el-row中&#xff0c;给各个块之前设置间隔&#xff0c;但是是割的代码块的宽度。 offset属性 放在el…