问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

写了一个（没有用jQuery）的翻页时钟，但是在做轮播图片过渡时，遇到了一些逻辑上的问题。

头像
karlvicent
    69596987

    我的想法

    我想做的效果如下（有区别的是我的时钟翻页只是简单的图片轮播，不是这种向下翻）
    图片描述

    我的想法是：

    • 初始化，先得到现在时间，然后将现在时间每一个数值索引到其对应的图片
      比如说，现在 0点49分59秒，那么（经过专门处理）对应的数值是004959，然后赋值给str,那么通过 aImage[i].src = 'img/'+str.charAT(i)+'.jpg' [也就是在图片序列对应的位置将起改为与时间相等的图片]

    • 初始化时间之后，就正式开始了运行，这个地方我的想法是，将前面那个时间（由于我这个地方设的最小单位是秒，那就假设过了一秒之后吧），把前面那个时间保存起来，然后与过了一秒的时间之后的str一个数字一个数字的比对，一旦发现那个地方两者不相等，那此处就要翻一页（也就是在此处运行一个函数）。

    • 终于来到函数这个位置了，我的问题就在于此，我用的是特别笨的一个办法来轮播，就是在一个时间DIV前定义两个img元素，一个正好在div里面，一个在下面等着[如图所示]。
      图片描述

      [1]: /img/bVvMXu
[2]: /img/bVvMYm

    一旦，这里的时间变动了,那么上面那张图片上移，下面那张图片源自然地在上面那张图片源的基础上+1，同时向上移动直到到达div中心，等待下一次触发

    问题来了

    • 在这个地方，我需要变动的地方找到了之后，假设初始化的时候在上面的是A，在下面的是B，A向上移，B也向上移，当B到达Div中心时,A也到达顶端，开始准备下一次触发，但是下一次触发之后，A下来了，B就上去了，也就是A现在扮演了B原先的角色，B扮演了A原先的角色，这使我晕菜了，我感觉一会儿A又是B，B又是A，我无法使用JS去捕捉到它，可能用词不当吧，但是有一种直觉觉得这里不对。
      这里也算是图片轮播上出的问题吧，小弟自学一个多月前端最近被这个问题困扰，求大神解答。

    代码

    代码比较混乱，因为思路被自己弄混了
    而且是几个文件，so 直接贴 github上源码

    求各位大牛帮我看一下我的思路是否正确，还有就是图片轮播我这里用以前的思路行不通，现在的思路如上所述自己把自己绕晕了。 1：30了 睡觉zzzz

    javascriptcsshtml
    阅读 2.7k
    1 个回答
    得票最新
    头像
    prototype_eva
      1.1k23457
      <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body onload="startTime()">
    <script type="text/javascript">
    function startTime(){
       var today=new Date() ;
       var h=today.getHours();
       var m=today.getMinutes();
       var s=today.getSeconds();
       document.body.innerHTML=checkTime(h)+'<img src="img/colon.JPG"/>'+checkTime(m)+'<img src="img/colon.JPG"/>'+checkTime(s);
    }

    setInterval('startTime()',1000);
    
    function checkTime(i){
        if(i<10){
            i="0"+i;
        }
        var a=i.toString().slice(0,1);
        var b=i.toString().slice(1,2);
        return "<img src=img/"+a+".JPG/>"+"<img src=img/"+b+".JPG/>"
        
    }
    </script>
</body>
</html>
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题