关于JavaScript网页计时器
Logo尺寸
background-size：设置背景图片尺寸
- background-size: 30px 30px;
- background-size: cover / contain;
- cover：保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小
- contain：保持图像的纵横比并将图像缩放成将适合背景定付区域的最大大小
子绝父相
给nav-box相对定位(relative)，img绝对定位(absolute)
定时器
setTimeout
let timer = setTimeout(函数, 延迟时间);在指定的延迟时间后执行一次函数 清除定时器clearTimeout(timer);
let timer = setTimeout(() => {
console.log("执行成功");
}, 1000);
clearTimeout(timer);setInterval
let timer = setInterval(函数, 时间);每隔指定时间执行一次函数 清除定时器clearInterval(timer);
let timer = setInterval(() => {
console.log("执行成功");
}, 1000);
clearInterval(timer);transition
过渡属性，可以让html标签的从一个样式切换到另一个样式时产生动画效果
image-20220629083920512
transition-duration
image-20220629084901386
image-20220629085002431
transition-timing-function
image-20220629085234612
transition-delay
定义过渡效果何时开始
transition 连写
transition : porperty duration timing delay其他可以省略，duration必须设置
image-20220629090328245
transform
transform属性应用于元素的2D或3D转换。该属性可以将元素旋转，缩放，移动等。
2D移动
格式：
transfrom: translate(x, y)
image-20220629090739941
2D缩放
格式：
transform: scale(倍数);
2D旋转
格式：
transform: rotate(角度);
transform:rotate(360deg);
/* 旋转360度 deg：角度 */拼团倒计时
// 获取结束时间点的时间戳
let endDate = new Date('2022-6-30 00:00:00');
endDate = parseInt(endDate.getTime() / 1000);
// 获取时分秒的标签对象
let hourDom = document.getElementById('hour');
let minDom = document.getElementById('min');
let secDom = document.getElementById('sec');
setInterval(() => {
// 获取当前时间点的时间戳
let nowDate = new Date();
nowDate = parseInt(nowDate.getTime() / 1000);
// 计算剩余的总秒数
let seconds = endDate - nowDate;
let hours = parseInt(seconds / 3600); //小时
hours = hours > 9 ? hours : "0" + hours;
let mins = parseInt(seconds % 3600 / 60); //分钟
mins = mins > 9 ? mins : "0" + mins;
let secs = seconds % 3600 % 60; //秒
secs = secs > 9 ? secs : "0" + secs;
hourDom.innerText = hours;
minDom.innerText = mins;
secDom.innerText = secs;
}, 1000);本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录