webAPI中的触屏事件、轮播图、插件以及本地存储

一、触屏事件

1.触屏事件概述

移动端浏览器兼容性比较好，我们不需要考虑以前js的兼容性问题，我们可以放心的使用原生js写书效果，但是移动端也有自己的独特的地方。比如：触屏事件（touch） Android和ios都有

touch对象代表是一个触摸点，触摸点可以是一根手指，也可以是一根触摸笔，触屏事件可以响应手指（触控笔）对屏幕或者触控操作

2.常见的触屏事件

3.触摸事件对象（touchEvent）

TouchEvent是一类描述手指在触摸平面（触摸屏、触摸板）的状态变化事件。这类事件用于描述一个或多个触点，使得开发者可以检车触点的移动，触点的增加或减少等等

因为平时我们都是给元素注册触摸事件，所以注意targetTouches

二、移动端常见特效

1.移动轮播图

移动端轮播图功能和pc基本一致

• 可以自动播放图片
• 手指可以拖动播放轮播图

window.addEventListener('load', function () {
    //alert(1);
    //1.获取元素
    var focus = document.querySelector('.focus');
    var ul = focus.children[0];   //这是第一个子元素
    var ol = focus.children[1];     //第二个子元素
    //获赠个div的宽度
    var w = focus.offsetWidth;
    var index = 0; //图片的索引
    //2.利用定时器自动轮播图片
    var timer = setInterval(function(){
        index++;//索引加1
        var translateX = -index * w; //移动的距离
        ul.style.transition = 'all .3s'  //动画持续时间
        ul.style.transform = 'translateX('+translateX+'px)'; //移动的距离
    },2000);
    //等着我们过渡完成后，再去判断是否超过索引 
    // transitionend 事件在 CSS 完成过渡后触发。
    ul.addEventListener('transitionend',function(){
        if(index >= 3){
            index = 0; //如果超过了最大索引回到0所以，就是第一张图片
            ul.style.transition = 'none'  //动画持续时间
            var translateX = -index * w; //移动的距离
            ul.style.transform = 'translateX('+translateX+'px)'; //移动的距离
        } else if(index < 0){
            index = 2;  //如果小于最小的索引，就到最后一张图片
            ul.style.transition = 'none'  //动画持续时间
            var translateX = -index * w; //移动的距离
            ul.style.transform = 'translateX('+translateX+'px)'; //移动的距离
        }
        //3.小圆点跟着变化
        //把ol里面li带有current的类名选出来去掉类名，给当前的加上current
        ol.querySelector('.current').classList.remove('current');  //大家也可以用排他，全部干掉
        //让当前的索引号的小li加上current
        ol.children[index].classList.add('current');
    });

    //4.手指滑动轮播图
    //通过触摸元素（touchstart）：获取手指初始位置坐标
    var startX = 0;
    var startY = 0;
    //添加手指触摸事件
    ul.addEventListener('touchstart',function(e){
        startX = e.targetTouches[0].pageX;
        //手指摸到轮播图，那么就该停止轮播(停止定时器)
        clearInterval(timer);
    });
    var moveX = 0; //在手指离开后我们要用这个距离做计算
    var flag = false;//如果用户手指移动过，我们再去判断是否要做判断效果
    //移动手指touchmove,计算手指的滑动距离，并且移动盒子
    ul.addEventListener('touchmove',function(e){
        //计算移动距离
        moveX = e.targetTouches[0].pageX - startX;
        //移动盒子，盒子原来位置+手指移动的距离
        var translateX = -index * w + moveX;
        //手指拖动的时候，不许哟动画效果，所以要取消过渡动画效果
        ul.style.transition = 'none'  //动画持续时间
        ul.style.transform = 'translateX('+translateX+'px)'; //移动的距离
        flag = true; //表示用户的手指动过轮播图
        //阻止屏幕滚动行为
        e.preventDefault();
    });
    //手指离开，根据移动距离去判断是回弹还是播放上一张，下一张
    ul.addEventListener('touchend',function(e){
        if(flag){ //用户的手指拖动过轮播图
            //(1)如果移动的距离大于50像素，我们就播放上一张或一张
            if(Math.abs(moveX) > 50){
                //如果用户是右滑播放的就是上一张，moveX是正值
                if(moveX > 0){
                    index--;
                } else {
                    //如果是左滑就播放下一张，moveX就是负值
                    index++;
                }
                var translateX = -index * w; //移动的距离
                ul.style.transition = 'all .3s'  //动画持续时间
                ul.style.transform = 'translateX('+translateX+'px)'; //移动的距离
            } else {
                //(2)如果移动的距离小于50像素我们就弹回去
                var translateX = -index * w; //移动的距离
                ul.style.transition = 'all .3s'  //动画持续时间
                ul.style.transform = 'translateX('+translateX+'px)'; //移动的距离
            }
        }
        //手指离开的时候重新开启定时器
        clearInterval(timer);
        timer = setInterval(function(){
            index++;//索引加1
            var translateX = -index * w; //移动的距离
            ul.style.transition = 'all .3s'  //动画持续时间
            ul.style.transform = 'translateX('+translateX+'px)'; //移动的距离
        },2000);
    });
});

2.返回顶部

//返回顶部模块
var goBack = this.document.querySelector('.goBack');
var nav = this.document.querySelector('nav');
window.addEventListener('scroll',function(){
    if(window.pageYOffset >= nav.offsetTop){
        goBack.style.display = 'block'
    } else {
        goBack.style.display = 'none'
    }
});
//点击后返回顶部
goBack.addEventListener('click',function(){
    window.scrollTo(0,0);
});

3.classList属性

classList属性是HTML5新增的一个属性，返回元素的类名

该属性用于元素中添加、移除以及切换css类

3.1 添加类

//语法
element.classList.add('类名');

//如：
focus.classList.add('current');

3.2 移除类

//语法
element.classList.remove('类名');

//如：
focus.classList.remove('current');

3.3 切换类

//语法
element.classList.toggle('类名');

//如：
focus.classList.toggle('current');

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>02classList属性</title>
    <style>
        .bg{
            background-color: black;
        }
    </style>
</head>
<body>
    <div class="one two three">123</div>
    <button>开关灯</button>
    <script>
        //classList返回的是元素的类名
        var div = document.querySelector('div');
        console.log(div.classList[1]);
        //1.添加类选择器
        div.classList.add('abc');
        //2.删除类名
        div.classList.remove('one');
        //3.切换类
        var btn = document.querySelector('button');
        btn.addEventListener('click',function(){
            document.body.classList.toggle('bg');
        })
    </script>
</body>
</html>

4.click延时解决方案

移动端click事件都会有300ms的延时。原因是移动端屏幕双击会缩放页面。

解决方案：

• 进制缩放，浏览器禁用默认双击缩放行为可以去掉300ms的点击延迟

  • <meta name="viewport" content="user-scalable=no">
    

• 利用touch事件自己封装这个事件解决300ms延迟

  • 原理：
    • 当我们手指触摸屏幕，记录当前触摸事件
    • 当我们的手指离开屏幕，用离开的事件减去触摸的事件
    • 如果时间小于150ms，并且没有滑动过屏幕，那我们就定义为点击

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>03使用插件解决延迟300ms问题</title>
    <script src="fastclick.js"></script>
</head>
<body>
    <div>123</div>
    <script>
        if('addEventListener' in document){
            document.addEventListener('DOMContentLoaded',function(){
                FastClick.attach(document.body);
            },false);
        }
        var div = document.querySelector('div');
        div.addEventListener('click',function(){
            alert(1111111);
        });
    </script>
</body>
</html>

三、移动端开发常用开发插件

1.什么是插件

移动端要求的是快速开发，所以我们经常借助一些插件来帮助我们完成操作。

JS插件就是js文件，它遵循一定规则编写，方便程序展示效果，拥有特定功能且方便调用，如：轮播图、瀑布流。

特点：它一般是为了解决某个问题而专门存在，其功能单一，并且比较小

fastclick.js就属于一个插件

2.插件的使用

• 第一步：引入js文件
• 按照规定的语法使用

if('addEventListener' in document){
    document.addEventListener('DOMContentLoaded',function(){
        FastClick.attach(document.body);
    },false);
}

3.Swiper

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>04swiper轮播图</title>
    <link rel="stylesheet" href="swiper/swiper-bundle.css">
    <style>
        .swiper {
            width: 600px;
            height: 300px;
        }  
        .swiper img{
            width: 100%;
            height: 100%;
        }
        .swiper-slide{
            width:300px;/*设为固定值*/
            width:auto;/*根据内容调整宽度*/
        }
    </style>
</head>
<body>
    <div class="swiper">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="images/focus1.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/focus2.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/focus3.jpg" alt=""></div>
            <div class="swiper-slide"><img src="images/focus4.jpg" alt=""></div>
        </div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>
        
        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
        
        <!-- 如果需要滚动条 -->
        <div class="swiper-scrollbar"></div>
    </div>    


    <script src="swiper/swiper-bundle.min.js"></script>
    <script>        
        var mySwiper = new Swiper ('.swiper', {
          autoplay:{  //自动播放相关
            delay: 1000,
            stopOnLastSlide: false
          },
          //slidesPerView : 3, 
          effect: 'coverflow',
            slidesPerView: 3,
            centeredSlides: true, 
          //direction: 'vertical', // 垂直切换选项
          loop: true, // 循环模式选项
          
          // 如果需要分页器
          pagination: {
            el: '.swiper-pagination',
          },
          
          // 如果需要前进后退按钮
          navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
          },
          
          // 如果需要滚动条
          scrollbar: {
            el: '.swiper-scrollbar',
          },
        })        
        </script>
</body>
</html>

4.media

移动端视频框架

framework：框架。它会基于自身的特点向用户提供一套较为完整的解决方案。框架的控制权在框架本身，使用者要按照框架所规定的某种规范进行开发。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>05视频插件</title>
    <link rel="stylesheet" href="media/zy.media.min.css">
 
</head>
<body>
    <div class="playvideo">
        <div class="zy_media">
            <video poster="bx.png" data-config='{"mediaTitle": "《疯狂动物城》--腾讯视频"}'>
                <source src="media/mov.mp4" type="video/mp4">
                    您的浏览器不支持HTML5视频
            </video>
        </div>
    </div>
    <script src="media/zy.media.min.js"></script>
    <script>
        zymedia('video',{
            autoplay:true,
            alwaysShowControls: false
        });
    </script>
</body>
</html>

四、本地存储

1.概念

随着互联网的快速发展，基于网页的应用越来越多，同时也变得复杂，为了满足各种各样的需求，会经常在本地存储大量的数据，HTML5规范提出了相应的解决方案

• 数据存储在用户的浏览器中
• 设置、读取方便、甚至页面刷新都不丢失数据
• 容量较大。sessionStroage约5M，localStorage约20M
• 只能存储字符串，可以将对象JSON.stringif() 编码后存储

2.sessionStorage

• 生命周期为关闭浏览器窗口
• 在同一个窗口（页面）下数据可以共享
• 以键值对的形式存储使用 （name:‘张三’）

2.1 存储数据的语法

sessionStorage.setItem(key,value);

2.2 获取数据的语法

sessionStorage.getItem(key);

2.3 删除数据

sessionStorage.removeItem(key);

2.4 清空所有数据

sessionStorage.clear()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>06本地存储-sessionStorage</title>
</head>
<body>
    <input type="text">
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="removeAll">删除全部数据</button>

    <script>
        var input = document.querySelector('input');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var removeAll = document.querySelector('.removeAll');


        //添加数据
        set.addEventListener('click',function(){
            //点击按钮后，将数据存储到sessionStorage中
            var val = input.value;
            sessionStorage.setItem('username',val);
        });

        //获取数据
        get.addEventListener('click',function(){
            //点击按钮后，将数据从sessionStorage中取出
            var val = sessionStorage.getItem('username');
            console.log('从sesisonStorage中取出的key是username的值：' + val);
        });

        //删除数据
        remove.addEventListener('click',function(){
            //点击按钮后，将数据从sessionStorage中删除
            sessionStorage.removeItem('username');
        });

        //删除全部数据
        removeAll.addEventListener('click',function(){
            //点击按钮后，将数据从sessionStorage中全部数据删除
            sessionStorage.clear();
        });
    </script>
</body>
</html>

3.localStorage

• 生命周期永久生效，除非手动删除，否则关闭页面也会存在
• 可以多个窗口（页面）共享同一个数据（同一个浏览器的多个窗口可以共享数据）
• 以键值对的形式存储数据

3.1 存储数据

localStorage.setItem(key,value);

3.2 获取数据

localStorage.getItem(key);

3.3删除数据

localStorage.removeItem(key);

//清空所有数据
localStorage.clear();

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>07本地存储-localStorage</title>
</head>
<body>
    <div>
        用户名：<input type="text" id="username">
        <br/>
        密码：<input type="text" id="pwd">
    </div>
    
    <button class="set">存储数据</button>
    <button class="get">获取数据</button>
    <button class="remove">删除数据</button>
    <button class="removeAll">删除全部数据</button>

    <script>
        var username = document.querySelector('#username');
        var password = document.querySelector('#pwd');
        var set = document.querySelector('.set');
        var get = document.querySelector('.get');
        var remove = document.querySelector('.remove');
        var removeAll = document.querySelector('.removeAll');


        //添加数据
        set.addEventListener('click',function(){
            //点击按钮后，将数据存储到localStorage中
            var name = username.value;
            var pwd = password.value;
            localStorage.setItem('username',name);
            localStorage.setItem('pwd',pwd);
        });
        
        //获取数据
        get.addEventListener('click',function(){
            //点击按钮后，将数据从localStorage中取出
            var name = localStorage.getItem('username');
            console.log('从localStorage中取出的key是username的值：' + name);
            var pwd = localStorage.getItem('pwd');
            console.log('从localStorage中取出的key是pwd的值：' + pwd);
        });
        
        //删除数据
        remove.addEventListener('click',function(){
            //点击按钮后，将数据从localStorage中删除
            localStorage.removeItem('pwd');
        });

        //删除全部数据
        removeAll.addEventListener('click',function(){
            //点击按钮后，将数据从localStorage中全部数据删除
            localStorage.clear();
        });
    </script>
</body>
</html>