想问问大家当时间发生变化时怎么让数字图片向上切换

如图所示，计时的时候数字图片是要以向上翻动的形式，时分秒是联动的

您好，实现时分秒数字图片向上翻动的效果，可以通过修改JavaScript代码中的图片top属性来实现。具体步骤如下：

1. 在CSS中增加.flip类，设置position: absolute和transition属性，用于实现数字图片的动画效果：

.flip {
    position: absolute;
    transition: top 0.5s ease-in-out;
}

2. 在JavaScript代码中，获取所需的图片元素，并为其添加flip类。同时，通过设置图片的top属性，使数字图片向上翻转：

var imgs = document.getElementsByTagName('img');
var timer = setInterval(() => {
    var date = new Date();
    var hours = date.getHours();
    var minutes = date.getMinutes();
    var seconds = date.getSeconds();
    
    imgs[0].src = parseInt(hours / 10) + '.jpg';
    imgs[1].src = hours % 10 + '.jpg';
    imgs[1].classList.add('flip');  // 添加.flip类
    imgs[1].style.top = -parseInt(hours % 10) + 'px';  // 设置top属性
    
    imgs[2].src = parseInt(minutes / 10) + '.jpg';
    imgs[3].src = minutes % 10 + '.jpg';
    imgs[3].classList.add('flip');  // 添加.flip类
    imgs[3].style.top = -parseInt(minutes % 10) + 'px';  // 设置top属性
    
    imgs[4].src = parseInt(seconds / 10) + '.jpg';
    imgs[5].src = seconds % 10 + '.jpg'; 
    imgs[5].classList.add('flip');  // 添加.flip类
    imgs[5].style.top = -parseInt(seconds % 10) + 'px';  // 设置top属性
}, 1000);

以上代码中，当数字图片元素添加了flip类后，会触发CSS中的transition属性，从而实现数字图片向上翻转的动画效果。

你在看 blue的视频？

不知道你这个问题是否已经解决, 如果还没有解决的话:

• 帮你找了个相似的问题, 你可以看下: https://ask.csdn.net/questions/7662924
• 这篇博客你也可以参考下：节流和防抖函数 以及如何解决请求有防抖但是需要马上响应或获取防抖状态的情况
• 您还可以看一下 刘建萍老师的人工智能系列课程零基础讲解知识点和实例应用线性回归梯度下降逻辑回归课程中的 讲解机器学中会涉及到的有关数学方面的知识储备有哪些小节, 巩固相关知识点
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^