Question

我想创建一个相当简单但有吸引力的时钟，用css设计，它将浮动在页面的右上角，从顶部向下约100个像素，在时钟的右侧和垂直滚动条之间有5个像素的边距。

我需要两个时钟：一个显示UTC时间，左边是UTC标签，另一个显示本地时间。

这两个时钟也应该浮动，这样当你向下滚动页面时，它们将在向下移动页面后变为顶部对齐。

我将如何创建这种性质的安排？能否请您提供一个如何创建代码的示例？ jQuery如果更简单就没问题。

两个时钟可能如下所示：

Two clocks that float right and attach to top on scrolldown

Answer 1

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更改为最新版本

示例 - 请将相应的资源下载到您自己的服务器：

DEMO

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

如何为UTC和本地时间创建浮动JavaScript时钟？

1 个答案: