Javascript 基于获取秒时钟的jquery显示图像

我正在努力寻找解决办法，不知道是否有人能帮忙

我想制作一个页面，其中一个图像会随着时间的推移消失，显示另一个图像。我希望通过使用updatesecond/getseconds函数来实现这一点。因此，从本质上讲，它就像一个时钟，时间越长，它消失的越多，它的周期就越长。例如，在一天的开始，它将是一个完整的图像，在12点，它将是一半，在24小时，它将消失，并重复。我想这将是一个if-else函数，关于页面剩余的百分比，我只是不知道如何使用它

这可能吗？任何帮助都将不胜感激。谢谢

这是我目前正在使用的代码。先谢谢你

body
{
    background-color: #FFF;
    padding: 2%;
    color: #ccc;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 1em;
}

a
{
    color: #FFF;
    text-decoration: none;
}

a:hover
{
    color: #DCE808;
    text-decoration: underline;
}

#mosaic
{
/*      background-color: yellow; 
    font-size: 500px;
    color: black;
    height: 1310px;
    width: 2000px;   */
background-image: url('tomorrow4.png');
}

#mosaic span.hover
{
    /*  background-color: blue;
    font-size: 500px;
    color: white;
    height: 1310px;
    width: 2000px;
    left: 100px;*/
    float: left;
   background-image: url('today4.png');  
}

和javascript

$(document).ready(function() {

var width = 1400;
var height = 724;

count = 0;
elements = new Array();

var el = $('#mosaic');

el.width(width).height(height);

var horizontal_pieces = 100;
var vertical_pieces = 100;
total_pieces = horizontal_pieces * vertical_pieces;

var box_width = width / horizontal_pieces;
var box_height = height / vertical_pieces;

var vertical_position = 0;

for (i=0; i<total_pieces; i++)
{
var tempEl = $('<span class="hover" id="hover-' + i + '">
</span>');

var horizontal_position = (i % horizontal_pieces) * box_width;

if(i > 0 && i % horizontal_pieces == 0)
{
    vertical_position += box_height;
}

tempEl.css('background-position', '-' + horizontal_position + 'px  
-' + vertical_position + 'px');

el.append(tempEl);
elements.push(tempEl);
}

elements = shuffleArray(elements);

$('#mosaic .hover').width(box_width).height(box_height);

setInterval(toggleDisplay, 100);
});

function toggleDisplay()
 {
 var tempEl = elements[count];
 var opacity = tempEl.css('opacity');

if(opacity == 0)
{
tempEl.animate({ opacity: 1 })
}
else
{
tempEl.animate({ opacity: 0 })
}

 count = (count + 1) % total_pieces;
 }



/* shuffleArray source:    
http://stackoverflow.com/questions/2450954/how-to-randomize-a-  
javascript-array#12646864 */
function shuffleArray(array) {
for (var i = array.length - 1; i > 0; i--) {
var j = Math.floor() * (i + 1);
var temp = array[i];
array[i] = array[j];
array[j] = temp;
 }
 return array;
 }

---

你是说像这样的事吗

我使用了4个扇区，因为skewY倾向于在90度以上出错，并将它们设置为与自午夜以来的分钟数相对的大小

如果你想测试它，只需输入一个定制的数字

我的代码如下：

HTML JS+jQuery

---

看看代码，从我收集的信息来看，你在寻找一张被另一张图片覆盖的图片，与一天的长度成正比，以秒为单位。就像一张画滑过另一张？就像这张照片：

看看我在这里创建的jsBin

代码的核心是定时和高度调整：

  function setCoverHeight() {
    var d = new Date();
    var curSecs = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
    var coverHeight = curSecs * 100 / (24 * 3600);

    $('.cover').height(coverHeight + '%');

    if (curSecs < 24 * 3600) {
      setTimeout(setCoverHeight, 1000);
      console.log(coverHeight);
    } else {

      // reset the cover height to 0%
      $('.cover').height(0);

      // swap the cover image to the bottom
      $('.bottom').css('backround-image', $('.cover').css('background-image'));

      // set a new cover image
      // ... get from Ajax, array, etc

    }

  }

  setCoverHeight();

这就是调整HTML：

<div class="wrapper">
  <div class="cover"></div>
  <div class="bottom"></div>
</div>

最后一天就要结束了，封面应该和底部的图片交换，这样你就可以循环浏览个人的每日图片，比如“今日.jpg”和“明日.jpg”

---

希望有帮助

你只是在找滑块谢谢@lintuxvi！这很好用。你知道有没有一种方法可以把它连接到马赛克上，也许可以用这样的东西？希望像素按顺序消失，而不是像这个例子那样随机消失，所以它不仅仅是一个静态的向下滑动图像。非常感谢你的帮助。非常感谢您的帮助，再次感谢您的帮助。

updateClock();

setInterval(function(){updateClock();}, 60000);//check for updates once per minute

function updateClock(){
    var dt = new Date();
    var time = (dt.getHours() * 60) + dt.getMinutes();//number of minutes since 00.00
    var timeToDegrees = time / 4;//1440 minutes in 24hours, 360 degrees in a circle. 1440 / 4 = 360

    if(timeToDegrees < 90){//deal with top right sector
        $('.slice.tr').css('transform', 'rotate('+timeToDegrees+'deg) skewY(-'+timeToDegrees+'deg)');
        $('.slice.tr .slice-contents').css('transform', 'skewY('+timeToDegrees+'deg)');
    }
    else if(timeToDegrees < 180){//deal with bottom right sector
        var localDeg = timeToDegrees - 90;
        $('.slice.tr').eq(0).css('transform', 'rotate(90deg) skewY(-90deg)');
        $('.slice.tr .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.br').css('transform', 'rotate('+(90+localDeg)+'deg) skewY(-'+localDeg+'deg)');
        $('.slice.br .slice-contents').css('transform', 'skewY('+localDeg+'deg)');
    }
    else if(timeToDegrees < 270){//deal with bottom left sector
        var localDeg = timeToDegrees - 180;
        $('.slice.tr').css('transform', 'rotate(90deg) skewY(-90deg)');
        $('.slice.tr .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.br').css('transform', 'rotate(180deg) skewY(-90deg)');
        $('.slice.br .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.bl').css('transform', 'rotate('+(180+localDeg)+'deg) skewY(-'+localDeg+'deg)');
        $('.slice.bl .slice-contents').css('transform', 'skewY('+localDeg+'deg)');
    }
    else if(timeToDegrees <= 360){//deal with top left sector
        var localDeg = timeToDegrees - 270;
        $('.slice.tr').css('transform', 'rotate(90deg) skewY(-90deg)');
        $('.slice.tr .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.br').css('transform', 'rotate(90deg) skewY(-90deg)');
        $('.slice.br .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.bl').css('transform', 'rotate(270deg) skewY(-90deg)');
        $('.slice.bl .slice-contents').css('transform', 'skewY(90deg)');
        $('.slice.tl').css('transform', 'rotate('+(270+localDeg)+'deg) skewY(-'+localDeg+'deg)');
        $('.slice.tl .slice-contents').css('transform', 'skewY('+localDeg+'deg)');
    }
}

  function setCoverHeight() {
    var d = new Date();
    var curSecs = d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
    var coverHeight = curSecs * 100 / (24 * 3600);

    $('.cover').height(coverHeight + '%');

    if (curSecs < 24 * 3600) {
      setTimeout(setCoverHeight, 1000);
      console.log(coverHeight);
    } else {

      // reset the cover height to 0%
      $('.cover').height(0);

      // swap the cover image to the bottom
      $('.bottom').css('backround-image', $('.cover').css('background-image'));

      // set a new cover image
      // ... get from Ajax, array, etc

    }

  }

  setCoverHeight();

<div class="wrapper">
  <div class="cover"></div>
  <div class="bottom"></div>
</div>