小米商城项目——首页跳转到登录页面或注册页面的制作分析

需要实现的效果：首页进行跳转到登录页面或者注册页面的操作时，相应页面变化的同时地址也进行相应变化。

打开登录页面 location.href 地址后几位为：/login.html
首页跳转到登录页时 location.href 地址后几位为：/login.html?denglu
首页跳转到注册页时 location.href 地址后几位为：/login.html?zhuce

其实想要实现这个效果很简单，只需要先在首页把跳转的链接地址设置好，然后再到登录/注册页面进行 JS 的设置即可实现相应效果。

第一步、设置链接地址

<li><a href="login.html?denglu">登录</a></li>
<li><a href="login.html?zhuce">注册</a></li>

第二步、判断跳转的页面并进行相应操作

JavaScript 代码如下：

// 链接跳转
var address = location.href; // 获取地址
// indexOf()：获得字符在字符串中的索引号
var key = address.indexOf("?") + 1; // 获取?后一位字符的索引号
console.log(address);
console.log(key);
// charAt()：根据索引号获取字符
if (address.charAt(key) == "d") { // 根据索引号获取字符，判断是登录还是注册h3[0].click(); // 手动调用事件使其显示登录页面
}
if (address.charAt(key) == "z") {h3[1].click(); // 手动调用事件使其显示注册页面
}

小米商城项目——首页跳转到登录页面或注册页面的制作分析相关推荐

HTML+CSS+JavaScript实现的品优购项目源代码，包含首页、登录页面、注册页面、商品秒杀页、商品推文页、商品抢购页等
本次项目一共实现了7个界面,包括首页.登录页面.注册页面.商品秒杀页.商品推文页.商品抢购页.商品详情页等界面. 完整代码下载地址:HTML+CSS+JavaScript实现的品优购项目源代码项目展 ...
搭建网站，登录页面和注册页面
一,安装宝塔面板(在这里我安装的是Windows版本) {个人觉得宝塔面板比php好用一点} 二,在宝塔面板的软件商店下载好 Apache 2.4.54 MySQL 5.5.62 phpMyAdmin ...
python-flack(一)登陆页面、注册页面、主页页面、登陆用户信息页面、上传文件页面
文章目录 1.flask项目静态文件的导入 2.flask链接的导入 3.消息闪现 1. 如何实现闪现? 2. html代码中如何调用闪现内容? 4.Flask中集成bootstrap 1. 什么是B ...
使用HTML与CSS制作一个简易的华为商城页面和注册页面
话不多说直接上效果图吧商城网页导航栏部分是有下划线滑动效果的本网页的核心就在于此代码都放在下面了好了直接进入到我们的代码部分第一个网页的html部分 <!DOCTYPE html&g ...
PHP判断用户是否已经登录，如果登录则显示首页，如果未登录则进入登录页面或注册页面
login.php 我这里演示用的session代替cookie,思想一样,session操作起来代码更简洁,较容易演示. <?php$user = ... ...; //这里是数据库查询的关于 ...
小米官网——主页直接跳转登录页或注册页的制作（详细分析）
题目可以不够直白,啥也不说,咱先看看我们要实现的是哪个效果
用vue实现注册页面、登录页面、主页之间跳转并保持登录状态【完整代码】
文章目录前言一.页面的简单实现 1.登录页面 2.注册页面 3.主页(显示个人信息) 二.逻辑实现 1.localStorage的使用 2.功能实现登录注册主页路由配置文件总结前言本 ...
用layui做一个简易的登录注册页面
用layui做一个简易的登录注册页面 1.首先在主页绑定一个点击事件,点击登录按钮就可以弹出一个弹出窗,一般商场登录页面不会跳转一个新页面,因为如果进入一个新页面,登录后需要跳转会原来的页面,这样会导 ...
HTML登录注册页面简单实现
完整代码下载: github:传送门 , 码云: 传送门效果参考: 登录页面,注册页面临时在线测试地址:http://139.9.68.218:3333/login2.html 使用了bootst ...

小米商城项目——首页跳转到登录页面或注册页面的制作分析

小米商城项目——首页跳转到登录页面或注册页面的制作分析相关推荐

最新文章

热门文章