实例代码“Ctrl+/”提示“F11/ESC”全屏 返回 格式化 恢复 运行
AخA
 
1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2
<html xmlns="http://www.w3.org/1999/xhtml">
3
    <head>
4
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
        <title>jQuery+flipTimer演示倒计时与时钟效果</title>
6
        <link rel="stylesheet" href="/api/jq/5733e3316bc3e/css/flipTimer.css"/>
7
    </head>
8
    <body>
9
        <div class="container">
10
            <div class="demo">
11
                <h3><a href="index.html">时钟效果</a><a href="index2.html">倒计时</a><a class="cur"href="index3.html">回调</a></h3>
12
                <p class="p1">10 秒倒计时：</p>
13
                <div id="times">
14
                    <div class="hours"></div>
15
                    <div class="minutes"></div>
16
                    <div class="seconds"></div>
17
                </div>
18
            </div>
19
        </div>
20
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.7.2/jquery.min.js"></script>
21
        <script src="/api/jq/5733e3316bc3e/js/jquery.flipTimer.js"></script>
22
        <script type="text/javascript">
23
            $(function() {
24
                var d = new Date();
25
                var myDate = d.getFullYear() + '/' + (d.getMonth() + 1) + '/' + d.getDate() + ' ' + d.getHours() + ':' + d.getMinutes() + ':' + (d.getSeconds() + 10);
26
                $('#times').flipTimer({
27
                    direction: 'down',
28
                    date: myDate,
29
                    callback: function() {
30
                        alert('倒计时结束！');
31
                    }
32
                });
33
            });
34
        </script>
35
    </body>
36
</html>