【每日一练】后台管理系统小案例

效果展示：

1.分析需求(交互)：

点击登录按钮： (1)判断用户名密码长度：全部大于6 登录成功

(2)如果登录成功

(2.1)将用户名和密码写入本地存储，下一次登录时直接显示用户名和密码

(2.2)跳转网页前端营地的博客_CSDN博客-前端每日知识,前端每日一练,前端每日一问领域博主

2.思路分析（事件三要素）

获取元素：事件源：

注册事件：事件类型

事件处理：

代码

<script>//1.获取元素
var input_txt = document.querySelector('.input_txt');
var input_pass = document.querySelector('.input_pass');
var input_sub = document.querySelector('.input_sub');//2.注册事件
input_sub.onclick = function () {//3.事件处理
//3.1 获取用户输入的用户名和密码
var username = input_txt.value;
var passoword = input_pass.value;
//3.2 判断用户名密码长度
if (username.length >= 6 && passoword.length >= 6) {
alert('登录成功');
//(1)存储用户名密码
localStorage.setItem('username', username);
localStorage.setItem('password', passoword);
//(2)跳转网页
window.location.href = 'https://blog.csdn.net/qq_46580087?type=blog';
} else {alert('登录失败');};};//3.页面一加载：就读取localStorage的数据，赋值给表单
input_txt.value = localStorage.getItem('username');
input_pass.value = localStorage.getItem('password');
</script>

【每日一练】后台管理系统小案例相关推荐

【每日一练】Ajax小案例-水果列表
1.页面一加载,ajax请求水果列表 2.服务器响应后: (1)JSON->JS (2)渲染页面结构: <div class="app-container" id=& ...
【每日一练】倒计时小案例
样式: <style>span {display: inline-block;width: 34px;height: 30px;background-color: rgb(14, 90, ...
Python每日一练-----妈妈找小蝌蚪(哈希算法）
题目: 给定一个池塘里面有众多小蝌蚪(整数数组 nums) 他们已经排队好了,有一位青蛙妈妈(一个整数目标值 mom),请你帮助青蛙妈妈找到他的亲生孩子所在的位置(数组序号)(青蛙:生的时候我也没想过 ...
Python每日一练-----妈妈找小蝌蚪(进阶版)，指针的灵活运用
题目: 给定一个池塘里面有众多小蝌蚪(整数数组 nums) 他们已经排队好了,有一位青蛙妈妈(一个目标值 :0),请你帮助青蛙妈妈找到他的亲生孩子(青蛙:生的时候我也没想过要找啊),假设青蛙妈妈身上带 ...
JavaScript 练手的小案例01：原生JS音乐播放器
温故而知新.今天重新将老师教过的东西拿出来翻新翻新,稳固加深知识理解程度. 首先,使用HTML搭好我们的框架结构.这一步为了提高我们代码的可读性,多写注释. <!DOCTYPE html> ...
Python采集手机4K壁纸，又是一个练手小案例，也不用担心没壁纸换咯
前言又是一篇采集壁纸的文章,只不过这次是一个新的网站里面也有电脑桌面壁纸,只不过今天先来采集一些手机壁纸吧又是一个练手的小案例,还能保存很多壁纸,不用担心没得壁纸换咯一. 数据来源分析明确需 ...
Java设计-微信小程序线上点餐/外卖项目+后台管理系统
文章目录 XOrder 前言环境微信开发者工具 Java开发环境 Vue开发环境成果展示小程序端小程序前端扫码点餐文件树技术选型鸣谢小程序后端文件树技术选型项目总结未完成的 ...
【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果
写在前面关于CSS 3D的效果,我之前也分享过一些,在视频号上也有,当然,视频号上没有源码,有兴趣的小伙伴,可以跟着视频自己敲代码,当然,这些代码,我后面也会分享到我们的网站上,大家可以直接到网站上 ...
微信小程序社区疫情防控+后台管理系统|前后分离VUE
<微信小程序社区疫情防控+后台管理系统|前后分离VUE>该项目含有源码.论文等资料.配套开发软件.软件安装教程.项目发布教程等本系统包含微信小程序前台和Java做的后台管理系统,该后台采 ...

【每日一练】后台管理系统小案例

【每日一练】后台管理系统小案例相关推荐

最新文章

热门文章