小米官网——功能实现

爱笑小太阳_mm

于 2024-07-09 08:44:55 发布

阅读量353

点赞数 4

文章标签： html css 前端

本文链接：https://blog.csdn.net/m0_68903702/article/details/140186353

版权

五、输入框输入内容的验证功能，以及登录注册按钮的禁用以及可用切换，输入框都有输入内容时可用

一、首页页面轮播图功能

利用Swiper，它是目前应用较广泛的移动端网页触摸内容滑动js插件。使用里面需要的API，能实现触屏焦点图、触屏Tab切换、触屏轮播图切换等常用效。

官网：https://www.swiper.com.cn/


    //创建对象
    var mySwiper = new Swiper('.swiper-container', {
        navigation: {
            nextEl: '.swiper-button-next',//左箭头
            prevEl: '.swiper-button-prev',//右箭头
        },
        pagination: {
            el: '.swiper-pagination',//小圆点
          },
          autoplay: {
            delay: 1000,//1秒切换一次
          },
    });

二、侧边栏展示隐藏功能

    //获取元素
    var ul = document.querySelector('.nav-l');
    let lis = ul.querySelectorAll('li');
    console.log(lis);
    for(let i = 0;i<lis.length;i++){
        lis[i].addEventListener('mouseenter',function(){   
             let item_box = lis[i].querySelector('.item-box');    
             console.log(item_box);    
            item_box.style.display = 'block';               
        })
        lis[i].addEventListener('mouseleave', function() {
            let item_box = lis[i].querySelector('.item-box');  
            item_box.style.display = 'none';
        })      
    }

三、下载图标鼠标移上去展示二维码功能

// 获取元素
    var download_app = document.getElementById('download');
    var download = download_app.querySelector('.download');
    var sj = download_app.querySelector('i');
    download_app.addEventListener('mouseover',function(){
        sj.style.display = 'block';
        download.style.height = '120px';
    })
    download_app.addEventListener('mouseleave',function(){
        sj.style.display = 'none';
        download.style.height = '0';
    })
    download.addEventListener('mouseover',function(){
        sj.style.display = 'block';
        download.style.height = '120px';
    })
    download.addEventListener('mouseleave',function(){
        sj.style.display = 'none';
        download.style.height = '0';
    })

四、在首页点击登录，注册进入对应的页面

window.location 标识当前所在网址，可以通过给这个属性赋值命令浏览器进行页面跳转。因为是从首页进行跳转，因此需要在index.html中书写javascript代码。

    //获取登录、注册元素
    var dl = document.getElementById('indexDL');
    var zc = document.getElementById('indexZC');
    //绑定事件，跳转到相应网址
    dl.addEventListener('click',function(){
        window.location.href = "login.html?1";
    })
    zc.addEventListener('click',function(){
        window.location.href = "login.html?2";
    })

演示发现，在跳转的过程中，点击注册没有直接跳转到对应的界面，故需要定义animateLeft(obj, target, callback)函数实现页面的切换。在这之前，还需对跳转过来的网址进行判断，之后再调用该函数。

function animateLeft(obj, target, callback) {
    // console.log(callback);  callback = function() {}  调用的时候 callback()

    // 先清除以前的定时器，只保留当前的一个定时器执行
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        // 步长值写到定时器的里面
        // 把我们步长值改为整数 不要出现小数的问题
        // var step = Math.ceil((target - obj.offsetLeft) / 10);
        var step = (target - obj.offsetLeft) / 10;
        step = step > 0 ? Math.ceil(step) : Math.floor(step);
        if (obj.offsetLeft == target) {
            // 停止动画 本质是停止定时器
            clearInterval(obj.timer);
            // 回调函数写到定时器结束里面
            // if (callback) {
            //     // 调用函数
            //     callback();
            // }
            callback && callback();
        }
        // 把每次加1 这个步长值改为一个慢慢变小的值  步长公式：(目标值 - 现在的位置) / 10
        obj.style.left = obj.offsetLeft + step + 'px';

    }, 15);
}

//获取元素   
var zc = document.getElementById("ZC");
var dl = document.getElementById("DL");
var rebox = document.querySelector(".rebox");

//点击登录，注册进入对应的页面
//获取完整的网址
var url =window.location.href;
//找到对应的索引位置
var num = url.indexOf("?")+1;
//对网址进行判断，实现网页正确跳转
if(url.charAt(num)=='1'){
  dl.style.borderBottom = '3px solid #ff5c00';
  zc.style.borderBottom = 'none';
  animateLeft(rebox, 30, function() {
  });
}
if(url.charAt(num)=='2'){
  zc.style.borderBottom = '3px solid #ff5c00';
  dl.style.borderBottom = 'none';
  animateLeft(rebox, -380, function() {
  });
}

五、输入框输入内容的验证功能，以及登录注册按钮的禁用以及可用切换，输入框都有输入内容时可用

var userInput = document.getElementById("username");
  var pwInput = document.getElementById("psw");
  var errors = document.getElementsByClassName("error");
  var checkbox = document.getElementById("checkbox");
  var dl1 = document.getElementById("submit");

  //用户点击或tab键切换会触发focus
  userInput.addEventListener("focus", function () {
    userInputInvisible();
  })
  //用户在输入框输入删除会触发input
  userInput.addEventListener("input", function () {
    userInputInvisible();
    dlCheck();
  })

  pwInput.addEventListener("focus", function () {
    pwInputInvisible();
  })
  pwInput.addEventListener("input", function () {
    pwInputInvisible();
    dlCheck();
  })

  //复选框改变触发change
  checkbox.addEventListener("change", function () {
    dlCheck();
  })
  
  //定义函数显示状态
  function userInputInvisible() {
    if(userInput.value == "") {
      errors[0].style.visibility = "visible";
      userInput.style.backgroundColor = "#FFE4E1";
    }
    else{
      errors[0].style.visibility = "hidden";
      userInput.style.backgroundColor = "#f9f9f9";
    }
  }
  
  function pwInputInvisible() {
    if (pwInput.value == "") {
      errors[1].style.visibility = "visible";
      pwInput.style.backgroundColor = "#FFE4E1";
    }
    else{
      errors[1].style.visibility = "hidden";
      pwInput.style.backgroundColor = "#f9f9f9";
    }
  }
  
  function dlCheck() {
    if (checkbox.checked && userInput.value != "" && pwInput.value != "") {
        dl1.style.opacity = 1;
        //移除 disabled 属性，使其变为可用状态
        dl1.removeAttribute('disabled');
    }
    else {
        dl1.style.opacity = 0.4;
    }
  }

具体的代码参考如下压缩包：