弹性布局 flex 及视频标签 本地储存

JS选择器

*doument.querySelector()

自定义属性

1.在heml5中,在自定义属性时,推荐我们在属性签名加一个data-

2.在取某个自定义属性时,先取dom的dataset ,在通过key(键)取对应的值

拖拽事件

ondragsstart--开始拖动

弹性布局

分配父盒子的空间规则

1.父盒子需要指定display:flex

开启弹性布局,子元素会水平排列

子元素会根据父盒子的宽高做一个等比例的伸缩

2.子盒子分布宽度需要设置 flex:1

主轴方向的分布问题 justify-content

• flex-start--永远贴在左边显示(默认)
• flex-end--永远贴在右边显示
• space-around--每个元素的左右两边的空间相同
• space-between-- 左右两个元素贴边显示,中间元素的间隔相等

副轴方向分布 align-items

• 只对多行有效
• flex-start--贴在顶部(默认)
• center--上下距离相等
• flex-end---贴在底部

控制子元素 align-self

• flex-star--默认原来位置
• center--居中
• flex-end--贴在底部
• 固定宽度 flex-bases

以什么方式进行排列 flex-decoration

• flex-decoration:row(默认) ---行
• flex-decoration:column---列

---

视频标签及其属性

video --视频

<video src="./movie/bglb.mp4"></video>
有默认高度

判断视频是否是暂停状态 并设置字体图标

if(video.paused == true){
                video.play();//播放
                this.classList.add("icon-pause");
                this.classList.remove("icon-play");
            }else{
                video.pause();//暂停
                this.classList.add("icon-play");
                this.classList.remove("icon-pause");
            }

给图标这是视屏全屏功能

document.querySelector(".right").onclick = function(){
             video.webkitRequestFullScreen();//全屏
        }

获取当前视频播放的时间--监听事件--ontimeupdate

video.ontimeupdate = function(){
            // console.log(video.currentTime);当前视频播放事件
            // console.log(video.duration);视频总时长
        }

本地存储

存值(字符串)

window.localStorage.setItem()

取值

window.localStorage.getItem()