记录下css问题
1.在最外层元素设置里一个相对定位里面的对应元素偶尔不需要相对定位可设置 position: static;取消定位关系
2.一个父元素中两个子元素一个设置了定位并且遮盖了没定位的元素,这时候需要去设置父元素的z-index才能有效,设置子元素的z-index是无效的
3.cursor改变鼠标形状1)、
1、 cursor:default 默认正常鼠标指针
2、 cursor:hand和cursor:text 文本选择效果
3、cursor:move 移动选择效果
4、cursor:pointer 手指形状 链接选择效果
5、cursor:url(url图片地址) 设置对象为图片
1.绝对定位上下左右居中办法
position: absolutte;
left: 50%;
top: 0.6rem;
transform:translate(-50%);
transform: scale(0.5)对元素缩放,可将font-size按比例缩放
记录下video标签遇到的坑:
从chrome66版本开始,禁止视频和音频的自动播放,后来firebox也采用了此策略,因为可能涉嫌诱导用户行为。即便采用javascript也不能自动播放,但是可以由用户的行为导致播放,比如通过用户点击页面,
也就是说video添加muted属性只能静音播放,可以通过用户点击来打开声音
废话不多说直接上代码
html结构部分
《粉红法拉利》—— 404 RAPPER
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)
})()
如图,通过点击视屏或者声音图标可开启声音播放,
原理就是监听用户点击事件控制muted属性开关
空值合并运算符
const value = ''
const key = value ?? '不是空值'
console.log(key) //不是空值
??会对值进行一次判断 如果是空值null或undefined 则会取左边的值,不是则取右边的
使用!!运算符可用于将表达式的结果快速转换为布尔值(true或false):
const str= 'Hello!';
console.log(!!greeting) // true
const str= '';
console.log(!!greeting) // false
uniapp
uni.$once()中修改响应式数据视图会不更新