复制时钟
Duplicate flipclock
我在我的网站上使用 Flipclock,我的问题是...如何在一个页面中放置超过 1 个 flipclock?
如果我尝试复制它们,它不起作用(就像复制粘贴 div 标签并重命名它们一样)
知道如何在网页中放置超过 1 个翻转时钟吗?
这是我得到的:
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 实例,也许就可以了。并选择不同的 class 个名称:
<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>
我知道这是旧的 post,但这可能会在将来帮助别人。
<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>
我在我的网站上使用 Flipclock,我的问题是...如何在一个页面中放置超过 1 个 flipclock?
如果我尝试复制它们,它不起作用(就像复制粘贴 div 标签并重命名它们一样)
知道如何在网页中放置超过 1 个翻转时钟吗?
这是我得到的: 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 实例,也许就可以了。并选择不同的 class 个名称:
<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>
我知道这是旧的 post,但这可能会在将来帮助别人。
<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>