0

我最近负责制作游戏发布的倒计时页面。现在，我有一个根据本教程制作的简单倒计时 javascipt 文件，但我想让它更花哨一些。我想找到一些方法让数字淡出到下一个，只是为了让它不那么“生涩”。是否有捷径可寻？我用谷歌搜索并没有真正找到一个简单的方法。

这是JS：

function updatetimer() {
    now = new Date();
    launch = Date.parse("August 20, 2013 12:00:00");
    diff = launch - now;

    days  = Math.floor( diff / (1000*60*60*24) );
    hours = Math.floor( diff / (1000*60*60) );
    mins  = Math.floor( diff / (1000*60) );
    secs  = Math.floor( diff / 1000 );

    dd = days;
    hh = hours - days  * 24;
    mm = mins  - hours * 60;
    ss = secs  - mins  * 60;

    document.getElementById("timer")
    .innerHTML =
        dd + ' days ' +
        hh + ' hours ' +
        mm + ' minutes ' +
        ss + ' seconds';
}
setInterval('updatetimer()', 1000 );

在页面上只有一个名为“timer”的空 div。

4

3 回答 3

0

这是使用带有 2 个元素交叉淡入淡出的 CSS3 的快速而肮脏的版本。 在这里提琴

CSS：

.readyToFade{-webkit-transition: opacity 1s ease-out;
             -moz-transition: opacity 1s ease-in-out;
             -o-transition: opacity 1s ease-in-out;
             -ms-transition: opacity 1s ease-in-out;
              transition: opacity 1s ease-in-out;
}
.fadeOut{
           opacity: 0;
}

并且标记包含 2 个元素。这里的 javascript 很粗糙，但你明白了。

function updatetimer() {
var el;
var el2;
if (document.getElementById('timer').className != 'readyToFade fadeOut'){
    console.log("yay");
    el = document.getElementById('timer2');
    el2 = document.getElementById('timer');

} else {
    console.log("no");

    el = document.getElementById('timer');
    console.log(el.className);
    el2 = document.getElementById('timer2');
}


console.log(el);
now = new Date();
launch = Date.parse("August 20, 2013 12:00:00");
diff = launch - now;

days  = Math.floor( diff / (1000*60*60*24) );
hours = Math.floor( diff / (1000*60*60) );
mins  = Math.floor( diff / (1000*60) );
secs  = Math.floor( diff / 1000 );

dd = days;
hh = hours - days  * 24;
mm = mins  - hours * 60;
ss = secs  - mins  * 60;

el.innerHTML =
    dd + ' days ' +
    hh + ' hours ' +
    mm + ' minutes ' +
    ss + ' seconds';

el2.className = "readyToFade fadeOut";

el.className = "readyToFade initial";

}
setInterval(function(){
    updatetimer();
},1000);
于 2013-05-26T21:03:23.157 回答
-1

试试这个。虽然代码未经测试。

function updatetimer() {
    $("#timer").fadeIn();
    now = new Date();
    launch = Date.parse("August 20, 2013 12:00:00");
    diff = launch - now;

    days  = Math.floor( diff / (1000*60*60*24) );
    hours = Math.floor( diff / (1000*60*60) );
    mins  = Math.floor( diff / (1000*60) );
    secs  = Math.floor( diff / 1000 );

    dd = days;
    hh = hours - days  * 24;
    mm = mins  - hours * 60;
    ss = secs  - mins  * 60;

    document.getElementById("timer")
    .innerHTML =
        dd + ' days ' +
        hh + ' hours ' +
        mm + ' minutes ' +
        ss + ' seconds';
    $("#timer").fadeOut();
}
setInterval('updatetimer()', 1000 );
于 2013-05-26T20:11:41.727 回答
-2

您可以使用 Jquery Fadeout

$("button").click(function(){
$("p").fadeOut();
});
于 2013-05-26T20:02:26.723 回答