我想创建一个相当简单但具有吸引力的时钟，使用css将会漂浮在页面的右上角，从顶部向下约100像素，并在时钟的右侧和垂直滚动条之间留出5像素的边距。如何为UTC和本地时间创建浮动JavaScript时钟？
我需要两个时钟：一个显示UTC时间，UTC标签向左，另一个显示本地时间。
这两个时钟也应该浮动，以便当您向下滚动页面时，页面向下移动后它们将变为顶部对齐。
我该如何去创造这种性质的安排？你能否提供一个如何创建这个代码的例子？ 如果更简单，jQuery会很好。
两个时钟可以是这个样子：
1）这里是一个脚本，将固定容器IE
http://www.gregjopa.com/2011/07/conditional-fixed-positioning-with-jquery/
2）时钟插件
http://www.ajaxupdates.com/jclock-jquery-clock-plugin/
https://github.com/dsparling/jclock
变化jQuery的最新虽然
示例 - 请下载相应的源极到自己的服务器：
<!doctype html>
<html>
<head>
<title>Conditional Fixed Positioning with jQuery</title>
<style type="text/css">
#wrapper {
width: 960px;
margin: 0 auto;
}
#header {
border: 1px solid;
padding: 10px;
margin-bottom: 10px;
}
#content {
float: right;
width: 620px;
padding: 0 10px 10px;
border: 1px solid;
margin-bottom: 10px;
}
#right-column {
width: 300px;
float: right;
position: relative;
}
#sidenav {
border: 1px solid;
margin-bottom: 10px;
background-color: #F0F0F0;
padding: 5px;
}
.sidenav-fixed {
position:fixed;
top:0;
margin:0;
width: 288px;
}
#links {
border: 1px solid;
padding: 5px;
}
h3 {
padding-left: 5px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/dsparling/jclock/master/jquery.jclock.js"></script>
<script type="text/javascript" src="https://raw.github.com/cowboy/jquery-throttle-debounce/master/jquery.ba-throttle-debounce.min.js"></script>
<script type="text/javascript" src="https://raw.github.com/Modernizr/Modernizr/master/modernizr.js"></script>
<script type="text/javascript" src="https://raw.github.com/gist/855078/bf649cd4b0b2df52d3840835c6f7699b79935bab/modernizr-tests.js"></script>
<script type="text/javascript">
$(document).ready(function() {
if (Modernizr.positionfixed && !Modernizr.appleios && !Modernizr.android) {
// cache selector queries
var sidenav = $('#sidenav'),
sidenavWrap = $('#sidenav-wrap'),
view = $(window),
sidenavHeight = sidenav.outerHeight(true),
sidenavWrapperOffset = sidenavWrap.offset();
function horizontalScrollCheck() {
// update sidenav left position when horizontal scrollbar exists and is scrolled
if (view.scrollLeft() > 0) {
sidenav.css('left', (-1 * view.scrollLeft() + 8));
}
else if (sidenav.css('left') != sidenavWrapperOffset.left) {
sidenav.css('left', sidenavWrapperOffset.left);
}
}
function stickyNavCheck() {
// apply fixed positioning when sidenav scrolls to the top of the browser and is smaller than viewport height
if ($(this).scrollTop() > sidenavWrapperOffset.top && view.height() > sidenavHeight){
if (!sidenav.hasClass('sidenav-fixed')) {
sidenav.addClass('sidenav-fixed');
// fill visual space of static positioned sidenav
sidenavWrap.css('margin-bottom', sidenavHeight);
}
else {
horizontalScrollCheck();
}
} else {
if (sidenav.hasClass('sidenav-fixed')) {
sidenav.removeClass('sidenav-fixed');
sidenavWrap.css('margin-bottom', 0);
}
}
}
// using Cowboy's jQuery throttle/debounce plugin to throttle the scroll event
view.bind("scroll resize", $.throttle(100, stickyNavCheck));
// update offset and left position of sidenav on resize event
view.bind("resize", $.throttle(100, function() {
sidenavWrapperOffset = $('#sidenav-wrap').offset();
if (sidenav.hasClass('sidenav-fixed')) {
horizontalScrollCheck();
}
})
);
}
var options = {
timeNotation: '12h',
am_pm: true,
fontFamily: 'Verdana, Times New Roman',
fontSize: '20px',
foreground: 'yellow',
background: 'red'
}
$('#jclock1').jclock(options);
options["utc"]=true;
options["utc_offset"]=-1;
$('#jclock2').jclock(options);
});
</script>
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>Conditional Fixed Positioning w/ jQuery</h1>
</div>
<div id="right-column">
<div id="sidenav-wrap">
<div id="sidenav">
<h2>Sticky Clock</h2>
<p><div class="corner"><div class="jclock"></div></div></p>
<p><div class="nocorner"><div class="jclock"></div></div></p>
<a href="#">Back to Top</a>
</div>
</div>
</div>
<div id="content">
<h2>Scrollable Content</h2>
<hr />
<a id="1"></a>
<h3>Ut consequat est vitae erat</h3>
<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
<p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
<h3>Opto tego, distineo luptatum</h3>
<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
<p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
<a id="2"></a>
<h3>Praesent egestas nulla vel</h3>
<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
<p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
<h3>Opto tego, distineo luptatum</h3>
<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
<p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
<a id="3"></a>
<h3>Aenean placerat libero vel</h3>
<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
<p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
<a id="4"></a>
<h3>Morbi viverra lacus pretium</h3>
<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
<p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
<a id="5"></a>
<h3>Ut sit amet orci at magna</h3>
<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
<p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
<a id="6"></a>
<h3>Suspendisse accumsan molestie</h3>
<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
<p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
<a id="7"></a>
<h3>Praesent scelerisque</h3>
<p>Commoveo wisi nulla pala illum melior quis. Et luptatum validus wisi ingenium humo quidne, eros lucidus dolore ea vel amet. Capto, praemitto singularis tation duis consequat. Jus vulputate ingenium mauris ut, vero. Enim suscipit exerci eligo dolus decet elit transverbero. </p>
<p>Opto tego, distineo luptatum, amet virtus ideo bene in, vindico eum. Voco, proprius, tation jugis dolore consequat, adipiscing iusto eu, ingenium augue nimis, nostrud, lucidus. Qui tristique uxor ibidem iriure bis praesent os. Consequat zelus pagus abdo augue demoveo odio jus vel. </p>
</div>
</div>
</body>
</html>
优秀！非常感谢。非常好的工作，并会在早上第一时间挖掘到它，并提醒任何打嗝。 – ylluminate 2012-01-17 07:50:33
为了方便和长寿，我在这里一起扔了：http://jsfiddle.net/DrjV9/ - 我没有看到精确的功能，我假设你打算顶部，所以希望你可以纠正然后把一个工作jsfiddle链接到答案中？我认为这不会太重要，但是在你付出了所有努力之后，我很乐意看到你的作品的附加价值，让其他人也能更充分地欣赏。 – ylluminate 2012-01-17 07:55:19
我更新了它。您没有添加FIXED postion zip附带的脚本 – mplungjan 2012-01-17 09:53:33
所谓社区喜欢它，如果你发布什么HTML /脚本你已经拥有。 – mplungjan 2012-01-17 06:23:09
不幸的是，在这种情况下，我真的不知道从哪里开始。这是一个带有jQuery的rails 3.1应用程序，所以我的平板是相当空白的，因此我开放性地提出了任何实现建议......包括从头开始编写一个简单的脚本。 – ylluminate 2012-01-17 06:38:28
请参阅示例我鞭打:) – mplungjan 2012-01-17 07:35:09