JS選擇器
*doument.querySelector()
自定義屬性
1.在heml5中,在自定義屬性時(shí),推薦我們?cè)趯傩院灻右粋€(gè)data-
2.在取某個(gè)自定義屬性時(shí),先取dom的dataset ,在通過key(鍵)取對(duì)應(yīng)的值
拖拽事件
ondragsstart--開始拖動(dòng)
彈性布局
分配父盒子的空間規(guī)則
1.父盒子需要指定display:flex
開啟彈性布局,子元素會(huì)水平排列
子元素會(huì)根據(jù)父盒子的寬高做一個(gè)等比例的伸縮
2.子盒子分布寬度需要設(shè)置 flex:1
主軸方向的分布問題 justify-content
- flex-start--永遠(yuǎn)貼在左邊顯示(默認(rèn))
- flex-end--永遠(yuǎn)貼在右邊顯示
- space-around--每個(gè)元素的左右兩邊的空間相同
- space-between-- 左右兩個(gè)元素貼邊顯示,中間元素的間隔相等
副軸方向分布 align-items
- 只對(duì)多行有效
- flex-start--貼在頂部(默認(rèn))
- center--上下距離相等
- flex-end---貼在底部
控制子元素 align-self
- flex-star--默認(rèn)原來位置
- center--居中
- flex-end--貼在底部
- 固定寬度 flex-bases
以什么方式進(jìn)行排列 flex-decoration
- flex-decoration:row(默認(rèn)) ---行
- flex-decoration:column---列
視頻標(biāo)簽及其屬性
video --視頻
<video src="./movie/bglb.mp4"></video>
有默認(rèn)高度
判斷視頻是否是暫停狀態(tài) 并設(shè)置字體圖標(biāo)
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");
}
給圖標(biāo)這是視屏全屏功能
document.querySelector(".right").onclick = function(){
video.webkitRequestFullScreen();//全屏
}
獲取當(dāng)前視頻播放的時(shí)間--監(jiān)聽事件--ontimeupdate
video.ontimeupdate = function(){
// console.log(video.currentTime);當(dāng)前視頻播放事件
// console.log(video.duration);視頻總時(shí)長
}
本地存儲(chǔ)
存值(字符串)
window.localStorage.setItem()
取值
window.localStorage.getItem()
