0

ウェブサイトに Flipclock を使用しています。私の質問は...ページに複数の Flipclock を配置するにはどうすればよいですか?

それらを複製しようとしても機能しません（コピーのように、divタグを貼り付けて名前を変更するだけです）

ウェブページに複数のフリップクロックを配置する方法はありますか?

http://flipclockjs.com/

これは私が得るものです: http://i58.tinypic.com/k3xk0p.png

これは私のコードです:

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
        <link rel="stylesheet" href="../includes/flipclock.css" />

        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

        <script src="../includes/flipclock.js"></script>
    <script type="text/javascript">
        var clock;

        $(document).ready(function () {
            var clock;

            clock = $('.clock').FlipClock({
                clockFace: 'DailyCounter',
                autoStart: false,
                callbacks: {
                    stop: function () {
                        $('.message').html('The clock has stopped!')
                    }
                }
            });

            clock.setTime(65000); /*60 = 1 Minute*/
            clock.setCountdown(true);
            clock.start();

        });
    </script>
        <style type="text/css">
        section
        {
            background-color:rgba(0, 0, 0, 0.45);
            width:900px;
            padding-top:5px;
            margin-left:10px;
            border:1px solid rgb(16, 16, 16);
        }   
        footer
        {
            position:relative;
            top:25px;
        }         
    </style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" Runat="Server">
    <div class="clock" style="margin:2em;"></div>
    <div class="message"></div>
    <div class="clock" style="margin:2em;"></div>
    <div class="message"></div>
    </asp:Content>
4

3 に答える 3

1

FlipClock の新しいインスタンスを初期化します。おそらくそれでうまくいくでしょう。そして、別のクラス名を選択します:

<div class="clockTwo" style="margin:2em;"></div>

そしてJS：

clockTwo = $('.clockTwo').FlipClock({
            clockFace: 'DailyCounter',
            autoStart: false,
            callbacks: {
                stop: function () {
                    $('.message').html('The clock has stopped!')
                }
            }
        });
于 2015-01-11T16:31:11.137 に答える
0

これは古い投稿であることは知っていますが、これは将来誰かを助けるかもしれません.

<asp:Content ID="Content2" ContentPlaceHolderID="mainContent" Runat="Server">
<div id="clock1" class="clock" style="margin:2em;"></div>
<div class="message"></div>
<div id="clock2" class="clock" style="margin:2em;"></div>
<div class="message"></div>
</asp:Content>

次に、クロックをインスタンス化するための jQuery div セレクター ($('#divName')) だけです。

<script type="text/javascript">
    var clock;

    $(document).ready(function () {
        var clock;

        clock = $('#clock1').FlipClock({
            clockFace: 'DailyCounter',
            autoStart: false,
            callbacks: {
                stop: function () {
                    $('.message').html('The clock has stopped!')
                }
            }
        });

        clock.setTime(65000); /*60 = 1 Minute*/
        clock.setCountdown(true);
        clock.start();

        clock = $('#clock2').FlipClock({
            clockFace: 'DailyCounter',
            autoStart: false,
            callbacks: {
                stop: function () {
                    $('.message').html('The clock has stopped!')
                }
            }
        });

        clock.setTime(65000); /*60 = 1 Minute*/
        clock.setCountdown(true);
        clock.start();

    });
</script>
于 2015-05-12T18:45:30.183 に答える