Fatal编程技术网
  • javascript/
  • 如何为UTC和本地时间创建浮动JavaScript时钟？

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

javascript jquery css jquery-ui

如何为UTC和本地时间创建浮动JavaScript时钟？,javascript,jquery,css,jquery-ui,Javascript,Jquery,Css,Jquery Ui,我想创建一个相当简单，但有吸引力的带有css的时钟样式，它将浮动在页面右上角，从顶部向下大约100像素，时钟右侧和垂直滚动条之间有5像素的边距 我需要两个时钟：一个显示UTC时间，左边有UTC标签，另一个显示本地时间 这两个时钟也应该浮动，这样当您向下滚动页面时，它们在向下移动页面后将变成顶部对正 我将如何着手创建这种性质的安排？你能提供一个代码如何创建这个的例子吗jQuery如果更简单就可以了。 这两个时钟可能看起来像这样： 1）下面是一个脚本，用于修复IE中的容器 2） 时钟插件 将j

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

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

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

我将如何着手创建这种性质的安排？你能提供一个代码如何创建这个的例子吗jQuery如果更简单就可以了。

这两个时钟可能看起来像这样：

1）下面是一个脚本，用于修复IE中的容器

2） 时钟插件

将jQuery更改为最新版本

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


使用jQuery的条件固定定位
#包装纸{
宽度：960px；
保证金：0自动；
}
#标题{
边框：1px实心；
填充：10px；
边缘底部：10px；
}
#内容{
浮动：对；
宽度：620px；
填充：0 10px 10px；
边框：1px实心；
边缘底部：10px；
}
#右栏{
宽度：300px；
浮动：对；
位置：相对位置；
}
#侧导航{
边框：1px实心；
边缘底部：10px；
背景色：#f0；
填充物：5px；
}
.sidenav固定{
位置：固定；
排名：0；
保证金：0；
宽度：288px；
}
#链接{
边框：1px实心；
填充物：5px；
}
h3{
左侧填充：5px；
}
$（文档）.ready（函数（）{
if（modernizer.positionfixed&&！modernizer.appleios&&！modernizer.android）{
//缓存选择器查询
var sidenav=$（“#sidenav”），
sidenavWrap=$（“#sidenav wrap”），
视图=$（窗口），
sidenavHeight=sidenav.outerHeight（真），
sidenavWrapperOffset=sidenavWrap.offset（）；
函数horizontalScrollCheck（）{
//当水平滚动条存在并被滚动时，更新sidenav left位置
if（view.scrollLeft（）>0）{
css（'left'，（-1*view.scrollLeft（）+8））；
}
else if（sidenav.css（'left'）！=sidenavWrapperOffset.left）{
css（'left'，sidenavWrapperOffset.left）；
}
}
函数stickyNavCheck（）{
//当sidenav滚动到浏览器顶部且小于视口高度时，应用固定定位
if（$（this.scrollTop（）>sidenavWrapperOffset.top&&view.height（）>sidenavHeight）{
如果（！sidenav.hasClass（'sidenav-fixed'））{
sidenav.addClass（'sidenav-fixed'）；
//填充静态定位侧导航的可视空间
css（'margin-bottom'，sidenavHeight）；
}
否则{
水平滚动检查（）；
}
}否则{
if（sidenav.hasClass（'sidenav-fixed'））{
sidenav.removeClass（“sidenav-fixed”）；
css（'margin-bottom'，0）；
}
}       
}
//使用Cowboy的jQuery throttle/debounce插件来限制滚动事件
view.bind（“滚动调整大小”，$.throttle（100，stickyNavCheck））；
//调整大小事件时更新sidenav的偏移量和左侧位置
view.bind（“resize”，$.throttle（100，function（）{
sidenavWrapperOffset=$（“#sidenav wrap”）.offset（）；
if（sidenav.hasClass（'sidenav-fixed'））{
水平滚动检查（）；
}
})
);
}   
变量选项={
时间符号：“12h”，
是的，
fontFamily:“Verdana，时代新罗马”，
fontSize:'20px'，
前景：“黄色”，
背景：“红色”
}
$（'jclock1'）.jclock（选项）；
选项[“utc”]=true；
选项[“utc_偏移”]=-1；
$（'jclock2'）.jclock（选项）；
});
带jQuery的条件固定定位
粘钟




可滚动内容


这是我生命中最重要的时刻
我们的目标是改善环境。这是一个充满活力的世界，是一个充满活力的世界。上尉，请注意。这是一个很好的例子。他是一位杰出的特朗斯韦贝罗教授

光镜、光镜、光镜、光镜、光镜。Voco、proprius、jugis dolore consequat、Adipising iusto eu、ingenium augue nimis、nostrud、lucidus。这是一个很好的例子。这是一个法律问题

视三角
我们的目标是改善环境。这是一个充满活力的世界，是一个充满活力的世界。上尉，请注意。这是一个很好的例子。他是一位杰出的特朗斯韦贝罗教授

光镜、光镜、光镜、光镜、光镜。Voco、proprius、jugis dolore consequat、Adipising iusto eu、ingenium augue nimis、nostrud、lucidus。这是一个很好的例子。这是一个法律问题

未经批准的许可证
我们的目标是改善环境。这是一个充满活力的世界，是一个充满活力的世界。上尉，请注意。这是一个很好的例子。伊莱戈·多卢斯

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