重复翻转时钟

Duplicate flipclock

本文关键字：时钟 翻转      更新时间：2023-09-26

我为我的网站使用 Flipclock，我的问题是......如何在一个页面中放置超过 1 个翻转时钟？

如果我尝试复制它们，它不起作用（就像复制粘贴div 标签并重命名它们一样）

知道如何在网页中放置超过 1 个翻转时钟吗？

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>

初始化一个新的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!')
                }
            }
        });

所以我尝试了一下，它修复了它的外观，但仍然没有倒计时

这就是它现在的样子http://i57.tinypic.com/kasizt.png

这是代码

    <%@ Page Title="" Language="C#" MasterPageFile="~/GamerzBox.master" AutoEventWireup="true" CodeFile="ComingSoon.aspx.cs" Inherits="ComingSoon" %>
<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>
    <script type="text/javascript">
            var clock2;
            $(document).ready(function () {
                var clock2;
                clock2 = $('.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>
        <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="clock2" style="margin:2em;"></div>
    <div class="message2"></div>
</asp:Content>
我知道

这是一个旧帖子，但这可能会在未来帮助某人。

<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>

然后只需jQuerydiv选择器（$（'#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>
相关文章：