記錄下css問題
1.在最外層元素設(shè)置里一個(gè)相對定位里面的對應(yīng)元素偶爾不需要相對定位可設(shè)置 position: static;取消定位關(guān)系
2.一個(gè)父元素中兩個(gè)子元素一個(gè)設(shè)置了定位并且遮蓋了沒定位的元素凛膏,這時(shí)候需要去設(shè)置父元素的z-index才能有效,設(shè)置子元素的z-index是無效的
3.cursor改變鼠標(biāo)形狀1)脏榆、
1猖毫、?cursor:default 默認(rèn)正常鼠標(biāo)指針
2、 cursor:hand和cursor:text? 文本選擇效果
3姐霍、cursor:move 移動(dòng)選擇效果
4鄙麦、cursor:pointer 手指形狀 鏈接選擇效果
5典唇、cursor:url(url圖片地址) 設(shè)置對象為圖片
1.絕對定位上下左右居中辦法
position: absolutte;
left:?50%;?
top:?0.6rem;
transform:translate(-50%);
transform:?scale(0.5)對元素縮放镊折,可將font-size按比例縮放
記錄下video標(biāo)簽遇到的坑:
從chrome66版本開始,禁止視頻和音頻的自動(dòng)播放介衔,后來firebox也采用了此策略恨胚,因?yàn)榭赡苌嫦诱T導(dǎo)用戶行為。即便采用javascript也不能自動(dòng)播放炎咖,但是可以由用戶的行為導(dǎo)致播放赃泡,比如通過用戶點(diǎn)擊頁面,
也就是說video添加muted屬性只能靜音播放,可以通過用戶點(diǎn)擊來打開聲音
廢話不多說直接上代碼
html結(jié)構(gòu)部分
<div?class='center-video'>
????????????????<video?id='video'?style="width:100%;"?autoplay?muted?preload="auto"
????????????????????playsinline=""?src="/music/video1.mp4">
????????????????</video>
????????????????<span?class='video-left'>《粉紅法拉利》——?404?RAPPER</span>
????????????????<img?class='off?sound'?src='/public/static/imgs/works/soundOff.png'/>
????????????????<img?class='open?sound'?src='/public/static/imgs/works/soundOpen.png'/>
</div>
js部分代碼
(function(){
????????var?video?=?document.getElementById("video");??
????????let?unmute?=?function()?{
????????????video.muted?=?false;
????????????$('.open').css('display','block')
????????????$('.off').css('display','none')
????????}
????????let?openMute?=?function?()?{
????????????video.muted?=?true;
????????????$('.open').css('display','none')
????????????$('.off').css('display','block')
????????}
????????$('.open')[0].addEventListener('click',openMute,false)
????????$('.off')[0].addEventListener('click',unmute,false)
????????video.addEventListener("click",unmute,false)
? })()
如圖乘盼,通過點(diǎn)擊視屏或者聲音圖標(biāo)可開啟聲音播放升熊,
原理就是監(jiān)聽用戶點(diǎn)擊事件控制muted屬性開關(guān)
空值合并運(yùn)算符
const value = ''
const key = value ?? '不是空值'
console.log(key)? //不是空值
?绸栅?會(huì)對值進(jìn)行一次判斷? ?如果是空值null或undefined 則會(huì)取左邊的值级野,不是則取右邊的
使用!!運(yùn)算符可用于將表達(dá)式的結(jié)果快速轉(zhuǎn)換為布爾值(true或false):
const?str=?'Hello!';
console.log(!!greeting)?//?true
const?str=?'';
console.log(!!greeting)?//?false
uniapp
uni.$once()中修改響應(yīng)式數(shù)據(jù)視圖會(huì)不更新