JavaScript-WebAPI基础④移动端触摸事件、轮播图案例、常见插件、本地存储

本文链接：https://blog.csdn.net/hjc13348/article/details/115670358

JavaScript基础

移动端网页特效
本地存储

移动端网页特效

触屏事件

触摸事件

触屏touch事件	说明
touchstart	手指触摸到一个DOM元素时触发
touchmove	手指移动一个DOM元素时触发
touchend	手指移动DOM元素时触发

触摸事件对象

触屏事件对象	说明
touches	正在触摸屏幕的所有手指的列表
targetTouches	正在触摸当前DOM元素的所有手指列表
changedTouches	手指状态发生了改变的列表，从有到无

因为平时我们都是给元素注册触摸事件，所以重点记住 targetTocuhes

触摸事件demo案例

	<script>
		element.addEventListener("touchstrat",function(e){
			//手指触摸到元素，触发事件
			var startX = e.changedTouches[0].pageX;  //触摸元素的第一根手指的触摸坐标
		});
		element.addEventListener("touchmove",function(e){
			//手指移动元素，触发事件
			var startX = e.changedTouches[0].pageX;  //触摸元素的第一根手指的触摸坐标
		});
		element.addEventListener("touchstrat",function(e){
			//手指移开元素，触发事件
			
		});
	</script>

classList属性

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

添加、删除类

	<script>
		//添加类
		element.classList.add("current");  		//给元素添加一个类名current;
		//移除类
		element.classList.remove("current");  	//给元素删除一个类名current;
		//切换类
		element.classList.toggle("current");	//判断元素有没有这个类名，有就删除，没有就添加
	</script>

移动端轮播图案例

网盘下载：https://wws.lanzous.com/iaqmFo06f2h
js/index.js 是demo代码

click 延时解决方案

	//1.禁止客户端缩放  user-scalable = no
	<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
	//2.自己封装函数
	//封装tap，解决click 300ms 延时
	<script>
	 function tap (obj, callback) {
	 var isMove = false;
	 var startTime = 0; // 记录触摸时候的时间变量
	 obj.addEventListener('touchstart', function (e) {
	 startTime = Date.now(); // 记录触摸时间
	 });
	 obj.addEventListener('touchmove', function (e) {
	 isMove = true; // 看看是否有滑动，有滑动算拖拽，不算点击
	 });
	 obj.addEventListener('touchend', function (e) {
	 if (!isMove && (Date.now() - startTime) < 150) { // 如果手指触摸和离开时间小于150ms 算点击
	 callback && callback(); // 执行回调函数
	 }
	 isMove = false; // 取反 重置
	 startTime = 0;
	 });
	}
	//调用 
	 tap(div, function(){ // 执行代码 });
	</script>
	//3.使用fastclick插件
	//GitHub官网地址： https://github.com/ftlabs/fastclick
	//1. 引入 js 插件文件。
	//2. 按照规定语法使用。
	<script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
            FastClick.attach(document.body);
            }, false);
        }
    </script>

移动端常见插件

Swiper 插件官网地址： https://www.swiper.com.cn/
superslide 插件官网地址： http://www.superslide2.com
iscroll 插件官网地址： https://github.com/cubiq/iscroll

音频zymedia插件

https://github.com/ireaderlab/zyMedia 插件名 zyMedia

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no,maximum-scale=1.0,minimum-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="zymedia/zy.media.css">
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .zy_media{
            width: 375px;
        }
    </style>
</head>
<body>
    <div class="zy_media">
        <video  data-config='{"mediaTitle": "这是我测试的视频"}'>
            <source src="zymedia/mov.mp4" type="video/mp4" />
            您的浏览器不支持HTML5视频
        </video>
    </div>
    
    <script src="zymedia/zy.media.js"></script>
    <script>
        zymedia('video',{
            autoplay : false ,
        });
    </script>
</body>
</html>

本地存储

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

window.sessionStorage

1、生命周期为关闭浏览器窗口
2、在同一个窗口(页面)下数据可以共享
3、以键值对的形式存储使用

	<script>
		//存储数据
		sessionStorage.setItem(key,value);  
		//获取数据
		sessionStorage.getItem(key);
		//删除数据
		sessionStorage.removeItem(key);
		//清空数据
		sessionStorage.clear();
	</script>

window.localStorage

1、声明周期永久生效，除非手动删除否则关闭页面也会存在
2、可以多窗口（页面）共享（同一浏览器可以共享）
3、以键值对的形式存储使用

	<script>
		//存储数据
		localStorage.setItem(key,value);  //以键值对的方式，
		//获取数据
		localStorage.getItem(key);
		//删除数据
		localStorage.removeItem(key);
		//清空数据
		localStorage.clear();
	</script>

demo案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
</head>
<body>
    <input type="text" id="username"><input type="checkbox"  id="remeberId">记住用户名
    <script>
        var username = document.querySelector('#username');
        var remeber = document.querySelector("#remeberId");
        //获取数据成功 将数据赋值给input
        if(localStorage.getItem("username")){
            username.value = localStorage.getItem("username");
            remeber.checked = true;
        }
        //监听 复选框 change变化事件 当checked为true 保存数据；当checked为false 删除数据
        remeber.addEventListener('change',function(){
            if(this.checked){
                localStorage.setItem("username",username.value);
            }else{
                localStorage.removeItem("username");

            }
        });
    </script>
</body>
</html>