• 小米官网（难点分析）

    在做小米官网时，遇到了很多问题，丢酱觉得最需要整理的问题就是网页直接跳转到登录页和注册页时，页面标题和展示的内容不同的问题，以及登录页面注册页面滑块滑动的问题。

    丢酱说了这么多，感觉表达的也不是很清楚，不够直白，啥也不说，咱先看看我们要实现的是哪个效果👇👇👇

    第一个效果：点击选择左右滑动显示登录页还是注册页；

    第二个效果：主页跳转过来的时候可以直接跳转到登录页或者注册页，不仅滑动页面变化，同时地址会有变化有区分区分；

    直接打开登录页面地址后面几位截图：

    主页跳转到登录页地址后面几位截图：

    主页跳转到注册页地址后面几位截图：

    现在我们一个一个说，咱不着急哈~

    首先我们看看第一个效果是怎么做出来的，丢酱这边是通过div盒子包裹两个form表单去搭建的HTML结构，当选择到登录或者注册页的时候，让相应的form表单整体左滑或者右滑；这里有个注意的点就是要让form浮动排列。

    注册页面的结构代码：（因为内容类似 我就没有整体修改，不要介意哈）

    1. <div class="boxbox">
    2.     <form class="container loginForm">
    3.         <div class="form-group" style="margin-bottom: 40px">
    4.             <input type="text" class="form-control   form-email" name="username" autocomplete="off">
    5.             <label for="account">邮箱/手机号码/小米IDlabel>
    6.             <p>请输入账号p>
    7.         div>
    8.         <div class="form-group">
    9.             <input type="password" id="password" class="form-control" name="password" autocomplete="off">
    10.             <label for="account">密码label>
    11.             <label for="">
    12.                 
    13.                 <img src="../素材/images/注册页/close.png" alt="" id="eyes">
    14.                 <img src="../素材/images/注册页/open.png" alt="" id="eyess" >
    15.             label>
    16.             <p>请输入密码p>
    17.         div>
    18.         <div class="checkbox">
    19.             <label>
    20.                 <input type="checkbox" name="remember" class="checkbox-input">已阅读并同意小米帐号 <a
    21.                     href="https://static.account.xiaomi.com/html/agreement/user/zh_CN.html"
    22.                     target="_blank"
    23.                     style="border: 0;">用户协议a>  和  <a
    24.                     href="https://privacy.mi.com/miaccount/zh_CN/" target="_blank"
    25.                     style="border: 0;">隐私政策a>
    26.                     <span class="ant-checked">
    27.                     span>
    28.                 <span class="ant-checked-inner">
    29.                     <img src="../素材/images/img/loading/下载.png" alt="">
    30.                 span>
    31.             label>
    32.         div>
    33.         <button type="submit" class="btn submit">登录button>
    34.     form>
    35.     <form class="container registerForm">
    36.         <div class="form-group" style="margin-bottom: 15px">
    37.             
    38.             <label for="countries" class="countries" style="font-size: 12px;">国家/地区label>
    39.             <label for="account">中国label>
    40.             <i class="iconfont subscript">i>
    41.         div>
    42.         <div class="form-group">
    43.             <input type="text" id="password" class="form-control" name="password" autocomplete="off">
    44.             <div class="disable">
    45.                 <label for="countries" class="countries" style="font-size: 12px;">国家码label>
    46.                 <label for="account" style="color: rgba(0, 0, 0, 0.4);">+86label>
    47.                 <i class="iconfont subscript">i>
    48.             div>
    49.             <label for="" class="callphone">手机号label>
    50.             <p>请输入手机号码p>
    51.         div>
    52.         <div class="form-group" style="margin-bottom: 45px">
    53.             <input type="text" class="form-control   form-email" name="username" autocomplete="off">
    54.             <label for="account">请输入验证码label>
    55.             <p>请输入短信验证码p>
    56.         div>
    57.         <div class="checkbox">
    58.             <label>
    59.                 <input type="checkbox" name="remember" class="checkbox-input">已阅读并同意小米帐号 <a
    60.                     href="https://static.account.xiaomi.com/html/agreement/user/zh_CN.html"
    61.                     target="_blank"
    62.                     style="border: 0;">用户协议a>  和  <a
    63.                     href="https://privacy.mi.com/miaccount/zh_CN/" target="_blank"
    64.                     style="border: 0;">隐私政策a>
    65.                     <span class="ant-checked">
    66.                     span>
    67.                 <span class="ant-checked-inner">
    68.                     <img src="../素材/images/img/loading/下载.png" alt="">
    69.                 span>
    70.             label>
    71.         div>
    72.         <button type="submit" class="btn submit">登录button>
    73.     form>
    74. div>

    效果是这样的

     

     JavaScript代码如下：

    1. // 登录与注册切换
    2.     var login = document.querySelector('.login');
    3.     var register = document.querySelector('.register');
    4.     var nav_slider = document.querySelector('.nav-slider');
    5.     var loginForm = document.querySelector('.loginForm');
    6.     var registerForm = document.querySelector('.registerForm');
    7.     var mi_form = document.querySelector('.mi-form');
    8.     register.addEventListener('click', function() {
    9.         login.style.color = '#bbb';
    10.         register.style.color = '#333';
    11.         // console.log(nav_slider.offsetLeft);
    12.         console.log(nav_slider.offsetLeft);
    13.         // animates(nav_slider, -336);
    14.         // console.log(registerForm.offsetLeft);
    15.         // animates(login, -457);
    16.         nav_slider.style.left = 60 + 'px';
    17.         loginForm.style.display = 'none';
    18.         loginForm.style.left = '-457px';
    19.         animates(registerForm, 45);
    20.         registerForm.style.display = 'block';
    21.         mi_form.style.marginTop = 397 + 'px';
    22.     });
    23.  
    24.     login.addEventListener('click', function() {
    25.         login.style.color = '#333';
    26.         register.style.color = '#bbb';
    27.         nav_slider.style.left = -3 + 'px';
    28.         // animates(nav_slider, 0);
    29.         animates(loginForm, -400);
    30.         loginForm.style.display = 'block';
    31.         registerForm.style.display = 'none';
    32.         registerForm.style.left = '-457px';
    33.         mi_form.style.marginTop = 337 + 'px';
    34.     });
    35.  
    36.     // 动画封装函数
    37.  
    38.     function animates(obj, target, callback) {
    39.         clearInterval(obj.timer);
    40.         obj.timer = setInterval(function() {
    41.             var step = (target - obj.offsetLeft) / 10;
    42.             // console.log("左移", obj, obj.offsetLeft, target);
    43.             step = step > 0 ? Math.ceil(step) : Math.floor(step);
    44.             // var lefts = step + obj.offsetLeft;
    45.             if (obj.offsetLeft == target) {
    46.                 clearInterval(obj.timer);
    47.                 callback && callback();
    48.             }
    49.             obj.style.left = obj.offsetLeft + step + 'px';
    50.         }, 20)
    51.     }

     注意：里面的数值要根据你自己的滑块位置进行调整哦，直接复制丢酱的代码会出问题的哦~

    第二个效果首先在主页把跳转链接设置好，再去登录注册页设置。

    这里主页搭建做的很简单就两个点击的a链接👇，方便展示效果就得嘞💛：

    第一步看首页搭建的代码：

    1. <div class="login">
    2.    <a href="./login.html?denglu" class="rootlogin">登录a>
    3.    <span>|span>
    4.    <a href="./login.html?zhuce" class="rootregister">注册a>
    5.    <span>|span>
    6.    <a href="#">消息通知a>
    7.    <span>|span>
    8. div>

    如果直接跳转到登录注册页面，那个a链接应该是这样子的：  

    但是看图片上的a链接是 和这样的；仔细观察，你会发现图片上的链接都是在原来的基础上面在最后面加上了一个“？”号和几个字母。这个就是设置了跳转过来显示的地址。（这里不清楚的可以去补充一下关于URL的知识）

    我们如何判断是跳转到登录页还是注册页呢，我们可以通过这两个函数来解决这个问题：

    indexOf()：获得字符在字符串中的索引号；

    charAt()：根据索引号获取字符；

    登录页还是注册页的地址不一样的地方是“？”号后面的字母，所以，我们可以先通过indexOf()获得“？”的索引号，让索引号+1就能获得“？”后面的第一个字符的索引号了，接着我们通过charAt()来获得字符，接着就根据字符的不同来确定是登录页还是注册页啦！！！

    JavaScript代码如下：

    1. //主页跳转过来
    2.     var temp = location.href; //获取地址
    3.     console.log(temp);
    4.     var num = temp.indexOf("?") + 1; //获取?后一位字符的索引号
    5.     if (temp.charAt(num) == "d") { //根据索引号获取字符，判断是登录还是注册
    6.         login.style.color = '#333';
    7.         register.style.color = '#bbb';
    8.         nav_slider.style.left = -3 + 'px';
    9.         // animates(nav_slider, 0);
    10.         animates(loginForm, -410);
    11.         loginForm.style.display = 'block';
    12.         registerForm.style.display = 'none';
    13.         registerForm.style.left = '-457px';
    14.         mi_form.style.marginTop = 337 + 'px';
    15.     }
    16.     if (temp.charAt(num) == "z") {
    17.         document.title = '小米官网-注册';
    18.         login.style.color = '#bbb';
    19.         register.style.color = '#333';
    20.         // console.log(nav_slider.offsetLeft);
    21.         console.log(nav_slider.offsetLeft);
    22.         // animates(nav_slider, -336);
    23.         // console.log(registerForm.offsetLeft);
    24.         // animates(login, -457);
    25.         nav_slider.style.left = 60 + 'px';
    26.         loginForm.style.display = 'none';
    27.         loginForm.style.left = '-457px';
    28.         animates(registerForm, 45);
    29.         registerForm.style.display = 'block';
    30.         mi_form.style.marginTop = 397 + 'px';
    31.     }

    要特别注意的是：这段代码也要写在注册页的js文件里，因为当我们点击首页的登录或者注册按钮时，它就以及跳转到login.html里面了，不会执行首页的js文件啦。

  • 相关阅读:
    C实现杨辉三角
    【Java 基础篇】深入理解Java HashMap：使用注意事项和性能优化
    百度Apollo自动驾驶
    赐你一本_.武林秘籍，Lodash常用的方法帮助你快速开发。
    权重衰退（PyTorch）
    【.NET Core】使用 Castle 实现 AOP，以及 Autofac 集成 Castle
    电脑重装系统后内存占用高怎么解决?
    Rust入门-引用借用
    SAP Commerce Cloud 里的 User 模型和 Restriction 的关系
    MySQL3
  • 原文地址：https://blog.csdn.net/DIUDIUjiang/article/details/126045501