弹性布局|弹性布局 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-- 左右两个元素贴边显示,中间元素的间隔相等
- 只对多行有效
- flex-start--贴在顶部(默认)
- center--上下距离相等
- flex-end---贴在底部
- flex-star--默认原来位置
- center--居中
- flex-end--贴在底部
- 固定宽度 flex-bases
- flex-decoration:row(默认) ---行
- flex-decoration:column---列
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()
推荐阅读
- 织网布局，社群营销走进山东玖零落地企业
- 瀑布流布局
- 2018-12-03-新手教程重构思路
- 详解布局Masonry
- 20.小程序（布局适配方案（rpx、px、vw、vh））
- 数据透视表布局及美化
- Flutter开发之布局Widget
- BitShares|BitShares 2.0、Steemit 2.0、BitUSD 2.0……BM在EOS上布局很大！
- Web前端如何学习?
- 清浅—人生布局