简体   繁体   English

JavaScript增量计数器,没有新鲜的

[英]JavaScript Increment counter with no fresh

i want to use this counter in smartry (.tpl) file. 我想在smartry(.tpl)文件中使用此计数器。 i have found script link is below 我发现脚本链接在下面

DEMO 演示

i just want to know where should i need to put these script code's 我只想知道我应该在哪里放置这些脚本代码

var START_DATE = new Date("October 10, 2012 22:30:00"); // put in the starting date here
var INTERVAL = 1; // in seconds
var INCREMENT = 30; // increase per tick
var START_VALUE = 35001; // initial value when it's the start date
var count = 0;

$(document).ready(function() {
 var msInterval = INTERVAL * 1000;
 var now = new Date();
 count = parseInt((now - START_DATE)/msInterval) * INCREMENT + START_VALUE;
 document.getElementById('counter').innerHTML = count;

 window.setInterval( function(){
    count += INCREMENT; 
    document.getElementById('counter').innerHTML = count;
 }, msInterval);

});

i mean where to put these in under or ? 我的意思是把它们放在下面或哪里? i want to use them in under in smarty (.tpl) file. 我想在smarty(.tpl)文件下使用它们。 guide me because i am new in javascript. 指导我,因为我是javascript新手。

You can put this code inside your Smarty template or in JS file depending on your needs. 您可以根据需要将此代码放入Smarty模板或JS文件中。

Of course you need to load also jQuery. 当然,您还需要加载jQuery。

Below there is a full Smarty .tpl file that uses your code and is working without a problem: 下面是一个完整的Smarty .tpl文件,该文件使用您的代码并且可以正常运行:

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo counter</title>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
</head>
<body>


<div id="counter">


</div>

<script type="text/javascript">
    {literal}
    var START_DATE = new Date("October 10, 2012 22:30:00"); // put in the starting date here
    var INTERVAL = 1; // in seconds
    var INCREMENT = 30; // increase per tick
    var START_VALUE = 35001; // initial value when it's the start date
    var count = 0;

    $(document).ready(function () {
        var msInterval = INTERVAL * 1000;
        var now = new Date();
        count = parseInt((now - START_DATE) / msInterval) * INCREMENT + START_VALUE;
        document.getElementById('counter').innerHTML = count;

        window.setInterval(function () {
            count += INCREMENT;
            document.getElementById('counter').innerHTML = count;
        }, msInterval);

    });
    {/literal}
</script>

</body>
</html>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM