京东移动端初体验

header栏的一个特效

思路

• 在滚动事件中 写逻辑 修改 通栏的透明度

• 需要设置滚动的范围 滚动的距离 跟轮播图的高度一致即可

  1. 获取变量 通栏 轮播图的高度

  2. 为window绑定事件 onscroll

  3. 在事件中,获取 滚动的距离 / 轮播图的高度 获取 比例值
     当比例值 超过1时 就没有必要设置了
     if (比例值>1) {
     比例值=1;
     }

function header(){
    // 获取 通栏dom元素
    var headerDom = document.querySelector('header');

    // 获取 轮播图的高度 jq中 才是 height()
    var bannerHeight = document.querySelector('.jd_banner').offsetHeight;

    // 定义 最大的 透明度
    var maxNum = 0.9;

    // 定义 最大的比例值
    var maxPercent = 1.0;

    // 绑定事件
    window.onscroll = function(){
        // 获取 滚动的距离
        // console.log(document.body.scrollTop);

        // 计算比例
        var percent = document.body.scrollTop/bannerHeight; 

        console.log(percent);

        // 修改 计算出来的比例值
        if (percent>maxPercent) {
            percent = maxPercent;
        }

        // 这里设置即可
        headerDom.style.backgroundColor = 'rgba(201,21,35,'+percent*maxNum+')';
    }
}

倒计时特效

• 定义变量 记录总时间

• 使用interval 进行倒计时到interval设置的 函数中 进行倒计时操作
  总时间--; 3600s
  秒 转化为 时 分 秒
  设置到dom元素中

  1.定义变量 总时间 获取 需要修改的span

  2.开启定时器

  3.定时器的内部逻辑
  时间--;
  格式化秒 为 时分秒
  设置给对应的 dom元素

function countTime(){
    // 总时间 秒
    var totalNum = 5*60*60;
    // var totalNum = 3;

    // 获取 修改的span
    var timeSpans = document.querySelectorAll('.downTime span');

    // 封装 设置事件的 函数
    var setTime = function(){
        // 格式化为 时分秒  3690
        var hour = Math.floor(totalNum / 3600);

        var minute = Math.floor(totalNum % 3600 / 60);

        var second = totalNum % 60;

        // 设置给 对应的span
        // 设置时 假设 有11小时
        timeSpans[0].innerHTML = Math.floor(hour / 10); //获取 十位
        timeSpans[1].innerHTML = hour % 10; //获取 个位

        // 设置 分 56分钟
        timeSpans[3].innerHTML = Math.floor(minute / 10);//获取 十位
        timeSpans[4].innerHTML = minute % 10; //获取 个位

        // 设置 秒 45分钟
        timeSpans[6].innerHTML = Math.floor(second / 10);//获取 十位
        timeSpans[7].innerHTML = second % 10; //获取 个位
    }

    // 设置 默认显示的时间
    setTime();


    // 开启倒计时
    var timeID = setInterval(function(){

        // 如果 时间变为0 那么 关闭定时器 同时提示用户
        if (totalNum<=0) {
            // 关闭定时器
            clearInterval(timeID);

            // 提示一下
            alert('你来晚啦 ,哈哈哈哈哈 没有优惠了');
            // 统一的弹框 建议 自定义dom元素 display:block

            // 跳出执行
            return true;
        }

        // 递减时间 秒
        totalNum--;

        // 调用 抽取的 设置事件函数
        setTime();

    },1000);
}

晚上要好好学习，天天向上

今天学习了轮播图，倒计时，通栏的特效

function banner(){
   //思路：
   //会用到一个计时器，每回走一张下面的索引也要跟着走
   //定义 变量记录 是哪一张轮播图

    //定时器 interval 间隔调用
    //  索引++;
    //  修改 轮播图的位置               
    //  口口口口口口口口口口口
    //先定义一下第一张的索引值，因为总共十张图片，然后最左面有一张，所以当前这张的索引值为一
    var index=1;
    //获取屏幕的宽度
    var width=document.body.offsetWidth;
    //获取到ul这个对象
    var ulObj=document.querySelector('.banner_imgs');
    //获取到那些li标签
    //var lis=document.querySelectorAll('.banner_imgs li');
     //下面的索引的部分，同步一下
          //获取下面索引部分的ul
    var ulIndex=document.querySelector('.banner_index');
    var liIndex=document.querySelectorAll('.banner_index li');
    //定时器
    var setId=setInterval(function(){
          //让一秒走一张图片
          //让它的index的值改一下
          index++;
          //如果index大于9的时候
          if(index>=9){
            index=1;
          }

          ulObj.style.transform='translateX(-'+width*index+'px)';
         for(var i=0;i<liIndex.length;i++){
            //把所有的那个索引的背景颜色都去掉
            var classlist=liIndex[i].classList;
            classlist.remove('current');
         }
         liIndex[index-1].classList.add('current');

    },2000);

    
}

插入图片

005xcCKCjw1f4yomjo6vkj30qo0zg7aq.jpg