提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

关于JavaScript网页计时器

JavaScript网页 关于 计时器
2023-06-13 09:12:43 时间

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标签的从一个样式切换到另一个样式时产生动画效果

transition-duration

transition-timing-function

transition-delay

定义过渡效果何时开始

transition 连写

transition : porperty duration timing delay 其他可以省略，duration 必须设置

transform

transform属性应用于元素的2D或3D转换。该属性可以将元素旋转，缩放，移动等。

2D移动

格式：transfrom: translate(x, y)

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);

相关文章