我想創建一個相當簡單但具有吸引力的時鐘，使用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