当计时器倒计时它如何制作它将刷新/更新文本文件中的文本?

时间:2014-05-06 20:04:09

标签: javascript jquery html css timer

在我的代码中,我的网站上有一个文本文件,我逐行阅读并在jquery插件newsTicker上显示。 此外,我有一个计时器倒数,在这种情况下4分钟后我不显示计时器,但它倒数。

我希望当计数器/计时器达到0小时0分0秒时,它会以某种方式刷新我网站上的页面或以某种方式刷新文本文件读取部分,以便显示文本文件的新内容。

我在c#中有一个程序,它每4分钟更新一次文本文件内容,然后将其上传到我的网站。 所以第一次例如文本文件内容是:Hello World和我的网站显示Hello World。 然后4分钟后文本文件内容为:这是一个测试 现在我希望它显示在jquery插件中:这是一个测试

然后计时器应该在4分钟后重新开始计数器,因为某些原因现在计时器停在0 0 0。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://risq.github.io/jquery-advanced-news-ticker/assets/js/jquery.newsTicker.js"></script>
<style>
.newsticker {
    max-width: 620px;
    margin: auto;
}

.newsticker li {
    color: #4e4e4e;
    background: #F2F2F2;
    overflow: hidden;
    height: 28px;
    padding: 10px;
    line-height: 30px;
    list-style: none;
    font-size: 20px;
    text-align: left;
    border-bottom: 1px dotted #2c8162;
}

.newsticker li:hover {
    background: #FFF;
}
</style>
<script language='JavaScript'>
   var count = 300;
    var counter = setInterval(timer, 1000); //1000 will  run it every 1 second

    function timer() {
    count = count - 1;
    if (count == -1) {
            clearInterval(counter);
            return;
    }

    var seconds = count % 60;
    var minutes = Math.floor(count / 60);
    var hours = Math.floor(minutes / 60);
    minutes %= 60;
    hours %= 60;
    //document.getElementById("timer").innerHTML = hours + " Hours " + minutes + //" Minutes and " + seconds + " Seconds left untill the next news update."; // //watch for spelling
    }
   $('body').find('.newsticker').remove();//It will clear old data if its present 
   var file = "http://newsxpressmedia.com/files/theme/test1.txt";
    $.get(file, function (txt) {
            //var lines = txt.responseText.split("\n");
            var lines = txt.split("\n");
            $ul = $('<ul class="newsticker" />');
            for (var i = 0, len = lines.length; i < len; i+=1) {  // step: 3
                //save(lines[i]); // not sure what this does
                $ul.append('<li>' + lines[i] + '</li>'); //here 
                //$ul.append('<li>' + lines[i+1] + '</li>');
            }
            //$ul.appendTo('body').newsTicker({
            $ul.appendTo('div.wcustomhtml').newsTicker({
                row_height: 48,
                max_rows: 5,
                speed: 600,
                direction: 'up',
                duration: 1000,
                autostart: 1,
                pauseOnHover: 1
            });
    });
</script>
<br><br><span id="timer"></span><br><br>

1 个答案:

答案 0 :(得分:2)

无需使用计时器。查看setTimeout函数:http://www.w3schools.com/jsref/met_win_settimeout.asp

<script language='JavaScript'>
    function updateTicker() {
        $('body').find('.newsticker').remove();//It will clear old data if its present 
        var file = "http://newsxpressmedia.com/files/theme/test1.txt";
        $.get(file, function (txt) {
            //var lines = txt.responseText.split("\n");
            var lines = txt.split("\n");
            $ul = $('<ul class="newsticker" />');
            for (var i = 0, len = lines.length; i < len; i+=1) {  // step: 3
                //save(lines[i]); // not sure what this does
                $ul.append('<li>' + lines[i] + '</li>'); //here 
                //$ul.append('<li>' + lines[i+1] + '</li>');
            }
            //$ul.appendTo('body').newsTicker({
            $ul.appendTo('div.wcustomhtml').newsTicker({
                row_height: 48,
                max_rows: 5,
                speed: 600,
                direction: 'up',
                duration: 1000,
                autostart: 1,
                pauseOnHover: 1
            });
        });

        // 4 minutes in millisecondes
        setTimeout(updateTicker, 240000);
    }
    updateTicker();
</script>