关于JavaScript网页计时器



Logo尺寸

background-size:设置背景图片尺寸

  1. background-size: 30px 30px;
  2. 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);
© 版权声明
THE END
喜欢就支持一下吧
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片