js-timer/TimerTest.html at master · neochang/js-timer · 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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-31j">
<title>Insert title here</title>
<style type="text/css">
    .rowLine {
        width: 400px;
        height: 80px;
        border-bottom-style: solid;
        border-width: 1px;
    }

    .barList {
        border-style: solid;
        border-width: 1px;
        width:400px;
        height: 80px;
        overflow: hidden;
    }
</style>
<style type="text/css" mce_bogus="1"> .rowLine {
        width: 400px;
        height: 80px;
        border-bottom-style: solid;
        border-width: 1px;
    }

    .barList {
        border-style: solid;
        border-width: 1px;
        width:400px;
        height: 80px;
        overflow: hidden;
    }</style>
<script type="text/javascript" src="Timer.js" mce_src="Timer.js"></script>
<script type="text/javascript">
    var timer = new Timer(50, -1);
    var globalTimer = new Timer(5000, -1);
    var bList;
    function init() {
        bList = document.getElementById("barList");

        timer.addEventListener(TimerEvent.TIMER, calTime);
        timer.start();
        globalTimer.addEventListener(TimerEvent.TIMER, controlTime);
        globalTimer.start();
    }
    function controlTime() {
        if (!timer.running) {
            timer.reset();
            timer.start();
        }
    }

    function calTime() {

        bList.scrollTop += 1;
        if (bList.scrollTop > 80) {
            timer.stop();
            var barNode = bList.firstChild;
            if (barNode.nodeType == 3) {
                bList.appendChild(barNode);
                bList.appendChild(bList.getElementsByTagName("div")[0]);
            } else {
                bList.appendChild(barNode);
            }

            bList.scrollTop = 0;
        }
    }

    window.onload = init;
</script>
</head>
<body>
    <div class="barList" id="barList">
        <div class="rowLine" style="background-color: red" mce_style="background-color: red">1</div>
        <div class="rowLine" style="background-color: pink" mce_style="background-color: pink">2</div>
        <div class="rowLine" style="background-color: blue" mce_style="background-color: blue">3</div>
        <div class="rowLine" style="background-color: gray" mce_style="background-color: gray">4</div>
    </div>
</body>
</html>