real-interval/demo.html at master · hapjs/real-interval · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1">
    <title>test</title>
    <style>
        table{
            border-collapse: collapse;
        }
        table td{
            border: 1px solid #CCC;
            padding: 1em;
        }
    </style>
</head>
<body>

    <table>
        <tr>
            <td>start at:</td>
            <td><spand id="start"></spand></td>
        <tr>
        </tr>
            <td>now is:</td>
            <td><spand id="now"></spand></td>
        <tr>
        </tr>
            <td>pass:</td>
            <td><spand id="pass">0</spand></td>
        </tr>
        <tr>
            <td>setInterval:</td>
            <td><spand id="count">0</spand></td>
        </tr>
        <tr>
            <td>realInterval:</td>
            <td><spand id="realInterval">0</spand></td>
        </tr>
    </table>

    <script src="./build/interval.js"></script>
    <script>

        var $ = function(id){
            return document.getElementById(id);
        };
        var format = function(dt){
            return dt.getHours() + ':' + dt.getMinutes() + ':' + dt.getSeconds();
        }

        var startSpan = $('start'),
            nowSpan = $('now'),
            passSpan = $('pass'),
            countSpan = $('count'),
            realIntervalSpan = $('realInterval'),
            start = new Date(),
            count = 0;

        startSpan.innerHTML = format(start);
        nowSpan.innerHTML = format(start);

        //
        setInterval(function(){
            var now = new Date(),
                pass = parseInt((now.getTime() - start.getTime())/1000, 10);
            nowSpan.innerHTML = format(now);
            passSpan.innerHTML = pass;

            count += 1;
            countSpan.innerHTML = count;
        }, 1000);

        new Interval(function(pass){
            realIntervalSpan.innerHTML = pass;
        }, 1000);

        // test
        // automatic stop after 10 seconds
        new Interval(function(pass, surplus){
            console.info(pass);
            console.log('automatic stop after ' + surplus + ' seconds');
        }, 1000, 10);

    </script>
</body>
</html>