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()
