无心 | 人生若只如初见，何事秋风悲画扇
2017-07-15 | H5C3系列 | UNLOCK

H5C3系列

H5C3系列

块级盒子上下左右居中

已知盒子大小，已知该盒子父盒子的大小，就可以用margin挤开

定位

1. 如果不知盒子大小，可以使用top：50%;left：50%;transfrom:translate(-50%) 
[translate是走自身盒子的百分比]
2. 如果已知盒子大小，可以使用top:50%;left:50%;margin:50% auto auto 50%

3. 或者上下左右距离为零(left:0;top:0;bottom:0px;right:0px; margin:auto;).
  这个写法可以理解为，虽然四边希望盒子到它那边去， 但是盒子去那边都不好，为了公平起见，干脆上下左右居中，这样离四边都是一样的距离

利用伸缩布局flex

justify-content:center;(控制主轴方向)
align-items:center;(控制次轴方向)

布局

因为不确定用户的屏幕分辨率，所以布局的时候首先先定位到中心，然后在用margin或者其他的方法调位置

关于transform

1、如果是在外链css文件里写，就可以一起写
2、jQuery无法操作transform样式值

H5新增标签

1、自定义属性操作

1.1一般格式是以 data- 开头头，后面跟一到多个有效命名
1.2可以使用 dataset 进行获取或者设置自定义标签

1
2
3
4
5
<div data-file-name="nick"></div>
  <script>
         var div =document.querySelector("div");
        console.dir(div.dataset);
  </script>
1.3 可以使用delete删除自定义样式
1
2
3
4
5
<div data-file-name="nick"></div>
<script>
     var div =document.querySelector("div");
    div.classList.delete("fileName");
</script>

2、元素类名操作

1
2
3
4
5
6
2.1 添加元素类名 【JavaScript中相关方法：对象.addClass("类名")】
        对象.classList.add("类名") 
2.2 移除指定元素的指定类名 【javaScript中相关方法：对象.removeClass("类名")】
        对象.classList.remove("类名")
2.3 判断元素有没有该类名 【JavaScript中相关方法：对象.hasClass("类名")】
        对象.classList.contains("类名")  -->返回结果为boolean值
1
2
3
4
5
<div class="ele"></div>
<script>
     var div =document.querySelector("div");
    console.log(div.classList.contains("ele"));// true
</script>

2.4 元素类名开关(有该类名就删除，没有该类名就添加)

  • 对象.classList.toggle(“类名”);
1
2
3
4
5
<div class="ele"></div>
<script>
     var div =document.querySelector("div");
     div.classList.toggle("ele");
</script>

元素类名操作总结：总体来说，跟jQuery里的元素类名操作方式类似，
很方便，但是因为jQuery需要引包，而 H5 里不需要引包，但是兼容性不怎么好

3、H5新增检查网络状态(其实是增加对DOM操作方法)

3.1、之前是使用 window.navigator.onLine 来检测用户网络状态，但是不同浏览器返回的结果不同，具有兼容性问题
3.2、判断用户是不是在线或者离线 onLine offline

1
2
3
4
5
6
7
8
9
10
11
12
   <div class="ele"></div>
   <script>
        var div =document.querySelector("div");
           window.ononline=function(){
               div.innerText="网络已经连接";
           }
           window.onoffline=function(){
               div.innerText="网络已断开";
           }
   </script>
   
// 注意：这两个新增的检测网络状态的属性都是需要 “ Window ” 调用，可以使用window.addEventListener方法进行事件监听，如果是不用事件监听，就用window.ononline=function(){函数体} 或者 window.onoffline=function(){函数体}

4、新增全屏显示/取消全屏显示(其实是增加对DOM操作方法)

4.1、之前如果要是让元素全屏。几乎没办法。新增的全屏显示的， requestFullScreen 虽然挺好用的，但是很大的兼容性问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div><img src="img/t1.png" alt=""></div>
<script>
       var f1 = document.querySelector("input");
        var div =document.querySelector("div")
       document.querySelector("div").onclick=function(){ //这个是进行全屏操作的
            if(img.requestFullScreen){
                img.requestFullScreen();//这个是正常的
            }else if(img.webkitRequestFullScreen){//这个是针对webkit内核的
                img.webkitRequestFullScreen();
            }else if(img.mozRequestFullScreen){//这个是针对moz内核的
                img.mozRequestFullScreen();
            }else if(img.msRequestFullscreen){//这个是针对微软内核的，但是RequestFullscreen中的最后一个单词首字母要小写
                img.msRequestFullscreen();
            }else{
          img.oRequestFullScreen();//这个是针对欧朋内核的
            }
       }
//虽然解决兼容性问题之后，每个浏览器都能让元素全屏显示，不过由于没有标准，所以每个浏览器渲染实现的方式不同
      </script>

4.2、取消全屏 cancelFullScreen
这个跟上面的全屏显示一样有兼容性问题，但是不同的是，这取消全屏需要document调用(因为全屏之后，取消全屏是取消的浏览器文档全屏)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div><img src="img/t1.png" alt=""></div>
<script>
    var img = document.querySelecyor("img");
    var div =document.querySelector("div");
    div.onclick=function(){ //这个是进行取消全屏操作的
        if(document.cancelFullScreen){
            document.cancelFullScreen();
        }else if(document.webkitCancelFullScreen){
            document.webkitCancelFullScreen();
        }else if(document.mozCancelFullScreen){
            document.mozCancelFullScreen();
        }else if(document.msCancelFullscreen){
            document.msCancelFullscreen();
        }else{
            document .oCancelFullScreen();
        }
    }
</script>

4.3、检测当前状态是不是处于全屏 document.fullScreen, 当 返回值为boolean，同样的，跟上面两个兄弟一样具有兼容性问题，每个浏览器前需要加前缀-webkit-、-o-、-ms-、-moz- 。
document.fullScreenchange页面在全屏或者取消全屏时触发。

5、新增文件读取 FileReader

我们可以通过对象 fileReader 读取本地存储的文件
使用方法：先new一个实例对象, var file = new fileReader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
 <input type="file" name="" id="" multiple>
   <div></div>
   <script>
     var div =document.querySelector("div")
     var f1 = document.querySelector("input");
     f1.onchange=function(){
       var file = new FileReader();
       file.readAsText(this.files[0]);
       file.onload=function(){
           div.innerHTML = this.result;
       }
     }
 // file.files[0]可以获得上传元素的信息,
// readAsText是读取上传文件的文字信息，只能读取TXT格式的文档内容，读取完之后会将信息存储在 result 里，
//如果是要读取上传文件的URL地址，就需要使用 " readAsDataURL "，然后读取的内容为上传文件的URL地址，一样存储在 result 里。
   </script>

读取文件内容的时候注意： fileReader 实例对象跟读取文件信息需要放在onchange函数内，并且，读取完之后的相关操作，需要放在 onload函数内，onload是由new出的实例调用，onchange 是由上传表单对象调用

6、新增拖拽API

6.1在之前如果要实现拖拽效果，需要使用 onmousedown 和 onmousemove 等事件，还需要计算出鼠标在拖拽物体中的位置以及拖拽物体在拖拽区域内的坐标，非常麻烦;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="login-header"><a id="link" href="javascript:void(0);">点击，弹出登录框</a></div>
<div id="login" class="login">
    <div id="title" class="login-title">登录会员
        <span><a id="closeBtn" href="javascript:void(0);" class="close-login">关闭</a></span>
    </div>
    <div class="login-input-content">
        <div class="login-input">
            <label>用户名：</label>
            <input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
        </div>
        <div class="login-input">
            <label>登录密码：</label>
            <input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
        </div>
    </div>
    <div id="loginBtn" class="login-button"><a href="javascript:void(0);" id="login-button-submit">登录会员</a></div>
</div>
<!-- 遮盖层 -->
<div id="bg" class="login-bg"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<script>
    var link = document.getElementById('link');
    var bg = document.getElementById('bg');
    var login = document.getElementById('login');
    var closeBtn = document.getElementById('closeBtn');
    var title = document.getElementById('title');
    link.onclick = function () {
        bg.style.display = 'block';
        login.style.display = 'block';
    }
    closeBtn.parentNode.onclick = function () {
        bg.style.display = 'none';
        login.style.display = 'none';
    }
    title.onmousedown = function (e) {
        //获取鼠标点击的时候，鼠标在盒子中的坐标。为之后盒子随着鼠标移动实时计算盒子坐标做出准备。
        var pageX = e.pageX - login.offsetLeft;
        var pageY = e.pageY - login.offsetTop;
        document.onmousemove = function (e) {
       //因为随着鼠标实时移动，盒子的坐标也实时移动，就需要计算出盒子的实时位置坐标，
       // 而鼠标移动的时候，可以计算出鼠标距离文档上边以及左边的距离，然后再用这个距离减去
       // 鼠标在盒子中的距离，就可以得出盒子随着鼠标移动的时候，盒子的实时坐标
            login.style.left = e.pageX - pageX + 256 + 'px';
            login.style.top = e.pageY - pageY - 140 + 'px';
        }
    }
    title.onmouseup = function (){
        document.onmousemove = null;
    }
</script>

6.2新增拖拽API

6.2.1、首先需要在拖拽的元素标签上添加 draggable="true"这个属性，表明该属性允许被拖动。
链接和图片默认是可拖动的，不需要 draggable 属性。

1
<div class="div"> <p draggable="true">拖我</p></div>

6.2.2、其次需要说明，拖拽元素有几个事件，
(1)、ondragstart：当拖拽元素被拖动的时候触发

1
2
3
4
5
6
7
8
9
10
11
document.ondragstart = function(event) {
		console.log("源对象开始被拖动");
		// event.target  事件对象里面的事件目标
		console.log(event.target.id);
	 //obj = event.target;  把当前对象给 obj 然后追加到 新目标对象里面就阔以了
		 // event.dataTransfer.setData("类型", 数据) 在我们start 里面设置 当我们开始拖拽的时候，就存储数据
		 // 类型  text/html   URL  
		 // 记录 当前源对象的id 名字
		 event.dataTransfer.setData("text/html", event.target.id);  
		 // 我们传递的是 id  字符型形式  text
}
  • (2)、ondrag ：当拖拽元素被拖动过程中触发，即使鼠标没有移动，只要鼠标没有放开拖拽元素就算这个过程。
  • (3)、ondragend ：当拖拽元素结束之后触发
  • (4)、ondragleave ：当拖拽元素拖动着离开了目标对象

6.2.3、拖放到目标对象同样对应几个事件

  • (1)、 ondragenter：当被拖拽的元素进入到目标对象的区域时触发

  • (2)、 ondragover :当被拖拽的元素在目标对象区域内停留的时候触发，即使鼠标不移动的时候，也会一直触发。(并且由于目标元素的的离开事件 ondrop 被浏览器的默认行为阻止，所以需要在这个阶段阻止默认行为)

    1
    2
    3
    4
    5
    6
    7
    <script>
         document.ondragover = function(e) {
         	console.log("目标对象被源对象悬停在上方");
         // 如果想要触发 ondrop 事件 则需要在over 里面 阻止    默认行为
         	return false;// e.preventDefault()
         }
    </script>

  • (3)、 ondrop：当拖拽元素在目标对象上松开手的时候，触发

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <script>
        document.ondrop = function(event) {
         	console.log("上方释放/松手");
         	var id = event.dataTransfer.getData("text/html");
    //这个id是在拖拽元素开始拖拽的时候，存储在event.dataTransfer这个全局事件对象中。然后到目标对象的时候获取拖拽目标的id，就可以获取到是哪个元素被拖拽了，进而就可以进行相关的操作
     		event.target.appendChild(document.getElementById(id));
        }
    //这一步可以做出一些相关的操作,将拖拽的元素追加到目标对象的里面
    </script>

7、缓存API

  • 7.1、localStorage ：
1
2
3
4
5
6
7
//  setItem(key, value) : 存储数据
//  getItem(key):获取已经存储的数据
//  removeItem(key)：删除指定存储的数据。单个单个的删除
//  clear()：删除本网站存储在本地浏览器的数据。
//eg：
var value = document.querySelector("#userNane").value;
window.localstorage.setItem("userName","value");

  • 7.2、sessionStorage :

    1
    2
    3
    4
    5
    6
    7
    //  setItem(key, value) : 存储数据
    //  getItem(key):获取已经存储的数据
    //  removeItem(key)：删除指定存储的数据。单个单个的删除
    //  clear()：删除本网站存储在本地浏览器的数据。
    //eg：
    var value = document.querySelector("#userNane").value;
    window.sessionStorage.setItem("userName","value");

  • 7.3、 应用缓存机制：

1、使用应用缓存第一步需要引入缓存清单，缓存清单的名字可以由自己，但是 .appcashe 后缀名不能更改。

1
2
<html lang="en" manifest="study.appcache">
 <!-- study.appcache 引入 缓存清单 -->

2、使用应用缓存清单的时候，是有特定格式的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
CACHE MANIFEST #这一行是告诉浏览器，这个是缓存清单
# 上面必须是第一行 
CACHE: #此部分写需要缓存的资源

./img/img1.jpg #这里一般是写缓存资源的路径
./img/img2.jpg
./img/img3.jpg
./img/img4.jpg  //其中，* 代表所有资源都需要缓存

NETWORK:
#此部分要写需要有网络才可访问的资源，无网络就不能访问
./img/img1.jpg
./img/img2.jpg
#*
FALLBACK:
#当访问不到某个资源的情况下，自动由另一个资源替换
./images/img4.jpg  ./images/img5.jpg 
#前面是主要的资源，当主要的资源找不到的时候，可以用第二个代替，两个同样都是路径。中间用空格隔开。
  • 7.4、三种缓存总结区分：
  • 相同点：三种缓存都是存储在浏览器本地的；设置、读取方便、页面刷新不丢失数据；只能存储字符串，可以将对象JSON.stringify() 编码后存储；相对来说，存储空间比较大。
  • 不同点：
    localStorsage： 存储空间有20M，不主动删除的话，会一直存在；可以同一浏览器多窗口共享数据。
    sessionStorage：存储空间只有5M，属于临时会话数据，当浏览器关闭或者主动删除的时候，重新打开浏览器都会消失。
    应用缓存：存储空间相对来说比较大，可配置缓存资源，减少请求，减少服务器压力，提升页面访问速度、提升用户体验度，当缓存了之后无网络状态依然可以访问。一般应用在离线APP上。
  • 与 session 与 cookie 的区别：
  1. session 是在服务器端设置，存储在服务器端，客户端没有主动性。
  2. cookie 也是服务器端设置，存储在浏览器端，每次请求都会带着(无论是否需要)，非常影响性能，所以不建议使用。
  3. sessionStorage localStorage 是客户端这边设置的，存储在浏览器本地，有需要的时候可以获取需要数据传到后台。对于不经常改变的值，可以存储在 localStorage 里。

8、新增音频视频属性的支持

1
2
3
4
5
- $("video")[0].play();  $("video")[0].pause(); 
- oncanplay : 表示可以播放
- ontimeupdata : 播放时时间发生改变的时候触发
- duration 总时长
- currentTime 当前播放时长

具体的可以在W3C：[W3C音视频属性的具体用法][1]
这些方法以及属性是 JavaScript 原生API，
[1]: http://www.w3school.com.cn/jsref/dom_obj_video.asp

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<script>
      //将秒数转化专有格式的函数
      function getTime(time) {
          var h = Math.floor(time / 3600);//将秒数算出小时时长
          var m = Math.floor(time % 3600 / 60) //将秒数算出分钟时长
          var s = Math.floor(time % 60) //算出秒数
          return (h < 10 ? '0' + h : h) + ":" + (m < 10 ? '0' + m : m) + ":" + (s < 10 ? '0' + s : s)
      }
      //获取元素
      var video = $("video")[0];
      video.oncanplay = function () { //当视频可以播放的时候，触发这个事件
          $("video").show();//    video.duration可以获得当前视频的总长度，
          //返回的是秒数，但是显示格式不是这样的，所以需要转化
          $('.total').html(getTime(video.duration));
      }
      $(".switch").click(function () {
          if ($(this).hasClass("fa-play")) {
              video.play(); //让视频播放
              $(this).removeClass("fa-play").addClass("fa-pause");
          } else {
              video.pause();//然视频停止
              $(this).removeClass("fa-pause").addClass("fa-play");
          }
      })
      //下一步就要计算出进度条
      video.ontimeupdate = function () { // ontimeupdate是播放的视频时间发生改变的时候触发
          // 先要计算出横向条的长度
          var k = video.currentTime / video.duration * 100 + "%";//计算出已经播放的时间在总长度中占的比值。
          $(".line").css("width", k);//让进度条随着播放时长改变而改变
          $(".current").html(getTime(video.currentTime));//将播放时长展现在页面上。
      }
      //当鼠标点击在进度条上的时候，让视频具有快进功能
      $(".bar").click(function (event) { //当鼠标点击的时候，有一个事件对象
          //当点击瞬间，获取鼠标在盒子中点击的位置
          var offset = event.offsetX;//offsetX可以获得鼠标在当前盒子中位置。
          $(".line").css("width", offset);
          var current = offset / $(this).width() * video.duration;
          video.currentTime = current;
      })
      //当点击全屏的时候，
      $(".expand").click(function(){
          if($(this).hasClass("fa-arrows-alt")){
              setFullsc(video,$(".controls"));
              $(this).removeClass("fa-arrows-art").addClass("fa-compress");
          }else{
              $(this).removeClass("fa-compress").addClass("fa-arrows-art");
              cancelFullsc();
          }
      });


      function setFullsc(obj,val) { //让元素全屏
          // 能力检测  做一个兼容性的解决方法
          if (obj.requestFullScreen) {  // 正常浏览器
              obj.requestFullScreen();
              $(obj).css("z-index",1);
              val.css("z-index",999);
          } else if (obj.webkitRequestFullScreen) {  // webkit 内核
              obj.webkitRequestFullScreen();
              $(obj).css("z-index",1);
              val.css("z-index",999);
          } else if (obj.mozRequestFullScreen) {  // moz
              obj.mozRequestFullScreen();
              $(obj).css("z-index",1);
              val.css("z-index",999);
          } else if (obj.msRequestFullscreen) {  // ms 微软  这里面有个坑 别掉进去了
              obj.msRequestFullscreen(); //  ms 里面这样写msRequestFullscreen()     s是小写的
              $(obj).css("z-index",1);
              val.css("z-index",999);
          } else {   // 欧朋
              obj.oRequestFullScreen();
              $(obj).css("z-index",1);
              val.css("z-index",999);
          }
      }

      function cancelFullsc() { // 让document取消全屏
          // 能力检测  做一个兼容性的解决方法
          if (document.cancelFullScreen) {  // 正常浏览器
              document.cancelFullScreen();
          } else if (document.webkitCancelFullScreen) {  // webkit 内核
              document.webkitCancelFullScreen();
          } else if (document.mozCancelFullScreen) {  // moz
              document.mozCancelFullScreen();
          } else if (document.msCancelFullscreen) {  // ms 微软  这里面有个坑 别掉进去了
              document.msCancelFullscreen(); //  ms 里面这样写msRequestFullscreen()     s是小写的
          } else {   // 欧朋
              document.oCancelFullScreen();
          }
      }  
  </script>

其他css

径向渐变 [多用于圆形的盒子背景]

  • background: radial-gradient(形状 | 大小 | 坐标 ,颜色 位置, 颜色 位置 )
  • 形状: [circle, ellipse]
  • 大小: closest-side:最近边/farthest-side:最远边/closest-corner:最近角/farthest-corner:最远角
  • 坐标: at left bottom
  • 颜色：color 10% // 可以为多组

线性渐变 [多用于长方形的盒子背景]

  • background : linear-gradient(方向 , 颜色 位置)
  • 方向: [to left][45deg]
  • 颜色: color 10% // 可以为多组
H5C3

评论加载中