JavaScript imitates the complete page implementation process of Xiaomi Mall official website

I have been learning front-end for almost 4 months without realizing it. Before I learned JavaScript, I could only look at the projects I made but not play with them. This page on Xiaomi’s official website is the first relatively complete project I have written. Although there is still a lot of room for improvement, there is hope for the future!

This blog is mainly about some problems encountered when writing this project, finding corresponding methods, and recording the pitfalls I encountered when writing this project.

1. Home Page Production

The main effects of the homepage are as follows:

Download APP, create shopping cart, create two navigation bars, create carousel images

Once we have the general layout completed, we need to start using JavaScript to handle the details.

1. Production of download APP

What kind of effect is needed here? When the mouse moves to the download app, the download QR code appears, and disappears when it is moved away. This is the same effect as many of the ones we’ve done before, but is he special? He is special. What’s special is that there is an animation effect when it appears and disappears. So why is the Xiaomi original so smooth? When I was wondering whether to use the display attribute or animation, I suddenly thought of a very clever attribute! We can change the height of this box, and use transition effects and overflow:hidden attributes to make the effect full.

But there will be a pit here. For the small triangle above, we can use a border and then position it outside the box. If we put this small triangle inside the QR code box (.download), the top value we position it will be negative, which means it will exceed the box. Once it exceeds the box, it will be hidden. Therefore, we can only put the small triangle outside, then position it above the box, and then use the display attribute to complete the effect. This may not be very intuitive to describe, so let’s get started with the code!

HTML code:

   <li id="download">
       <a href="#" rel="external nofollow" rel="external nofollow" >Download APP</a>
       <i></i>
       <div class="download">
             <a href="#" rel="external nofollow" rel="external nofollow" >
             <img src="./image/Homepage Picture/xiaomi-android.png" alt="">
                 Xiaomi Mall APP
             </a>
       </div>
  </li>

CSS code: (less version)

     li {
            float: left;
            padding:8px;
            padding-right: 0; 
                a {
                    display: block;
                    height: 15px;
                    text-align: center;
                    padding-right: 8px;
                    border-right:1px solid #423c37 ;
                    font-size: 8px;
                    color: #b0b0b0;
                    &:hover {
                         color: #fff;
                         }
                } 
            }
            #download {
                position: relative;
                width: 68px;
                i {
                    display: none;
                    position: absolute;
                    top: 20px;
                    left: 25px;
                    width:0;
                    height:0;
                    border-color: transparent transparent white transparent;
                    // border-color:transparent #ccc transparent transparent;
                    border-style:solid;
                    border-width:8px;
                    z-index: 9;
                   
                }
           
            .download {
                position: absolute;
                top: 16px;
                left: -28px;
                margin-top: 20px;
                width: 130px;
                height: 0;
                overflow: hidden;
                box-shadow: 0px 1px 5px #aaa;
                // border:1px solid #ccc;
                background-color: #fff;
                transition: height .3s;
                z-index: 999; 
                a {
                    font-size: 14px;
                    color: #000;
                    border: 0;
                    &:hover {
                        color: #000;
                    }
                    img{
                        display: block;
                        width: 100px;
                        height: 100px;
                        margin: 15px;
                    } 
                }
            }
            }

js code:

  var APP = this.document.getElementById('download')
  var download = this.document.querySelector('.download');
 
 
  APP.addEventListener('mouseenter', function () {
    download.style.height = 160 + 'px';
    APP.children[1].style.display = 'block';
 
  });
  APP.addEventListener('mouseleave', function () {
    download.style.height = 0;
    APP.children[1].style.display = 'none';
 
  });

Note: This code is not complete and may not run. It is for reference only.

The shopping cart is made in the same way.

2. Production of navigation bar

We can also complete the navigation bar box in the same way as above, with the height. The main point is that when we touch a navigation bar above, the corresponding product bar will appear below. At the same time, we can touch any element in this product bar, and when the mouse moves outside the navigation bar, the product bar will disappear.

When I saw this effect, my first thought was, isn’t this the same as switching the tab bar? Wouldn’t it be enough to just change the mouse click event to the mouse move in and out event? But I really didn't think enough. When I moved the mouse out of the navigation bar and wanted to go to the product bar, the product bar would disappear directly, and the effect was that I could only see it but not touch it. So we can only write the product column into the corresponding navigation bar, like this.

The corresponding figure:

The next thing becomes simple. Just change the style, change the content, and add the remaining js code.

3. Production of carousel images

For the carousel chart, we can use the swiper plug-in to write it directly.

Website: Swiper Chinese website - slideshow js plug-in, H5 page front-end development

Choose a template you like from the effect demonstration and modify it. It is much easier than writing the code yourself! Since there is such a plug-in that can be developed, of course we should use it!

2. Production of login and registration pages

When I made this page, I fixed the left side and squeezed the margin value on the right side. However, when I accepted it later, I found that the layout was not simple enough. We can directly layout the left and right and use percentage layout for the picture on the left.

1. Box layout

The core content of this page is the box in the middle. Since the registration and login pages are written on the same page, their parts should be as follows:

Place the two boxes side by side. When we click the login/register button on the top box, the bottom box will perform an animated switching effect.

2. Checkbox style changes

Among the methods I found online about changing the style of a checkbox, there is one that really shocked me! That is to write another box and cover the original check box.

When I saw this method, I was full of questions, but believe me, it really works. The code is as follows:

 #checkbox {
                    width: 20px;
                    height: 20px;
                    display: inline-block;
                    color: #ff6900;
                    margin: 0;  
                    font-size: 14px;
                      
                   }
                input[type=checkbox]{
                    width: 20px;
                    height: 20px;
                    margin-top: 2px;
                    position: relative;
                }
                input[type=checkbox]::after {
                    position: absolute;
                    top: 0;
                    color: #000;
                    width: 20px;
                    height: 20px;
                    display: inline-block;
                    visibility: visible;
                    padding-left: 0px;
                    text-align: center;
                    content: ' ';
                    // border-radius: 3px;
                }
                input[type=checkbox]:checked::after {
                    content: "✓";
                    color: #fff;
                    font-size: 10px;
                    line-height: 20px;
                    background-color: rgb(255, 105, 0);
                }

3. Page Jump

At this point, the two pages are almost built, and the remaining thing is to connect the two pages together. At this time we will use the location attribute in the BOM object. (If you forget, you can go to the previous blogs to check the relevant usage~).

When we click the login button, we will jump to the login section, and click the register button to jump to the registration section, but the problem is that login and registration are one page, so we have to pass parameters at this time to determine which button we clicked.

Before clicking:

After clicking:

and

?login in the above code is the parameter we passed. We will change the registration login from a link to a submit button (form). When we click it, we get the value of the current button and store it in a variable. When jumping, we pass the jump address and parameters, get the parameter value just passed on the registration page, and perform operations based on the parameters. Look at the code!

HTML code:

     <form action="#">
           <input type="submit" value="Login" name="login" id="indexDL">
           <input type="submit" value="Register" name="register"id="indexZC">
     </form>

js of index page:

 var indexDL = this.document.getElementById('indexDL');
  var indexZC = this.document.getElementById('indexZC');
  var temp1 = null;
  var temp2 = null;
  indexDL.addEventListener('click', function () {
    temp1 = indexDL.name;
    var newurl = 'login.html';
    // window.location.href = newurl;
    // window.location.assign(newurl);
    window.event.returnValue = false
    window.location.href = 'login.html' + '?' + temp1;
    // console.log(temp1);
  });
  indexZC.addEventListener('click', function () {
    temp2 = indexZC.name;
    window.event.returnValue = false;
    window.location.href = 'login.html' + '?' + temp2;
  });

The function is to pass parameters.

js of login page:

    var temp3 = window.location.search.substr(1);
    if(temp3 === 'register'){
        ZC.click();   
    }

The function is to cut the string and determine whether it is the parameter we want.

Summary: This is the first complete case of html+css+JavaScript. It was painful to write, but I still learned a lot of new knowledge through this case. The most important point is to remember that you must clear the float after using it!

This is the end of this article about the JavaScript imitation of Xiaomi official website complete page implementation process. For more relevant JavaScript Xiaomi official website content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!