`
兔兔and妞
  • 浏览: 1722 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

jQuery实现HTML5时钟

阅读更多

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title>jQuery实现HTML5时钟-柯乐义</title><base target="_blank" /> 
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script
<style> 
/* 柯乐义  
* http://keleyi.com 
*/ 


margin:0; 
padding:0; 

body 

background:#f9f9f9; 
color:#000; 
font:15px Calibri, Arial, sans-serif; 
text-shadow:1px 2px 1px #FFFFFF; 

a, 
a:visited 

text-decoration:none; 
outline:none; 
color:#0000ff; 

a:hover 

text-decoration:underline; 
color:#009900; 

/*the footer*/ 
footer 

background:#444 url("http://keleyi.com/image/a/im66vsri.png") repeat; 
position:fixed; 
width:100%; 
height:70px; 
bottom:0; 
left:0; 
color:#fff; 
text-shadow:2px 2px #000; 
-moz-box-shadow:5px 1px 10px #000; 
-webkit-box-shadow:5px 1px 10px #000; 
box-shadow:5px 1px 10px #000; 

footer h1 

font:25px/26px Acens; 
font-weight:normal; 
left:50%; 
margin:0px 0 0 150px; 
padding:25px 0; 
position:relative; 
width:400px; 

footer a.orig, 
a.orig:visited 

background:url("http://keleyi.com/image/a/xihqij1u.png") no-repeat right top; 
border:none; 
text-decoration:none; 
color:#FCFCFC; 
font-size:14px; 
height:70px; 
left:50%; 
line-height:50px; 
margin:12px 0 0 -400px; 
position:absolute; 
top:0; 
width:250px; 

/*styling for the clock*/ 
#clock-keleyi-com 

position: relative; 
width: 600px; 
height: 600px; 
list-style: none; 
margin: 20px auto; 
background: url('http://keleyi.com/image/a/nejs3bnm.png') no-repeat center; 
 

#seconds, 
#minutes, 
#hours 

position: absolute; 
width: 30px; 
height: 580px; 
left: 270px; 

#date 

text-shadow:1px 2px 1px #000; 
position: absolute; 
top: 365px; 
color:#fff; 
right: 140px; 
font:30px/36px Acens; 
font-weight:bold; 
letter-spacing:3px; 

#hours 

background: url('http://keleyi.com/image/a/exs0erm9.png') no-repeat left; 
z-index: 1000; 

#minutes 

background: url('http://keleyi.com/image/a/exs0erm9.png') no-repeat center; 
width:25px; 
z-index: 2000; 

 
#seconds 

background: url('http://keleyi.com/image/a/exs0erm9.png') no-repeat right; 
z-index: 3000; 

</style> 
<script> 
$(document).ready(function () { 
 
//markup for the clock   
var clock = [ 
'<ul id="clock-ke'+'leyi-com">', 
'<li id="date"></li>', 
'<li id="seconds"></li>', 
'<li id="hours"></li>', 
'<li id="minutes"></li>', 
'</ul>'].join(''); 
 
//fadein the clock and append it to the body keleyi.com  
$(clock).fadeIn().appendTo('body'); 
 
//an autoexecuting function that updates the clovk view every second 
//you can also use setInterval (function Clock (){})(); 
(function Clock() { 
 
//get the date and time 
var date = new Date().getDate(), //get the current date 
hours = new Date().getHours(), //get the current hour 
minutes = new Date().getMinutes(); //get the current minute 
seconds = new Date().getSeconds(), //get the current second 
 
$("#date").html(date); //show the current date on the clock 
 
var hrotate = hours * 30 + (minutes / 2); 
//i.e 12 hours * 30 = 360 degrees 
 
$("#hours").css({ 
'transform': 'rotate(' + hrotate + 'deg)', 
'-moz-transform': 'rotate(' + hrotate + 'deg)', 
'-webkit-transform': 'rotate(' + hrotate + 'deg)' 
}); 
 
var mrotate = minutes * 6; //degrees to rotate the minute hand 
 
$("#minutes").css({ 
'transform': 'rotate(' + mrotate + 'deg)', 
'-moz-transform': 'rotate(' + mrotate + 'deg)', 
'-webkit-transform': 'rotate(' + mrotate + 'deg)' 
}); 
 
var srotate = seconds * 6; //for the rotation to reach 360 degrees 
//i.e 60 seconds * 6 = 360 degrees. 
 
$("#seconds").css({ 
'transform': 'rotate(' + srotate + 'deg)', 
'-moz-transform': 'rotate(' + srotate + 'deg)', 
'-webkit-transform': 'rotate(' + srotate + 'deg)' 
}); 
 
//a call to the clock function after every 1000 miliseconds 
setTimeout(Clock, 1000); 
})(); 
}); </script> 
</head> 
<body> 
<div style="width:800px;height:100px;margin:0px auto">[url=http://keleyi.com/a/bjac/ut3scn0n.htm]原文[/url] 请使用支持HTML5/CSS3的浏览器查看本页。本页地址: 
[url=http://keleyi.com/keleyi/phtml/html5/17.htm]http://keleyi.com/keleyi/phtml/html5/17.htm[/url]</div> 
</body> 
</html> 

 

分享到:
评论

相关推荐

    jquery+html5时钟插件clock

    《基于jQuery和HTML5的时钟插件:Clock详解》 在现代网页开发中,实时显示时间的功能常常被用于提高用户体验。"jquery+html5时钟插件clock"就是这样一款工具,它巧妙地结合了jQuery的强大力量与HTML5的新特性,为...

    jQuery翻盖动画数字时钟

    jQuery翻盖动画数字时钟是一种基于JavaScript库jQuery实现的创新时钟展示方式,它通过翻转数字的效果来显示当前时间,既有趣又富有交互性。这种时钟设计适合那些希望在网页或应用中添加独特时间显示功能的初学者。...

    jquery时钟

    "jQuery时钟"是一个网页应用,它利用JavaScript库jQuery来实现动态显示时间的功能。这个应用可能包含一个HTML页面,用于展示时钟界面,以及CSS样式文件来美化时钟的外观,还有JavaScript脚本来处理时间的更新和显示...

    Jquery 实现时钟翻页效果

    在本文中,我们将深入探讨如何使用jQuery来实现一个引人注目的时钟翻页效果,类似于HTC时钟的设计。这种效果可以为网页增添动态感和互动性,提高用户体验。 首先,我们需要理解jQuery是一个轻量级的JavaScript库,...

    jQuery html5时钟插件制作走动的时钟效果

    总结起来,这个jQuery HTML5时钟插件通过结合JavaScript的动态计算和HTML5的`&lt;canvas&gt;`元素,实现了在网页上实时更新并展示当前时间的功能。通过不断调整和优化,我们可以创建出更加美观、实用的时钟插件,满足各种...

    jQuery实时节气罗盘时钟代码.zip

    在本项目中,jQuery被用来操控DOM元素,响应用户交互,并实现动态时钟的动画效果。 项目中的主要文件包括: 1. **index.html**:这是网页的主文件,包含了HTML结构,包括页面头部引用的CSS和JavaScript文件,以及...

    jQuery 点阵数字时钟,实时显示日期效果.rar

    本文将深入探讨如何利用jQuery实现一个点阵数字时钟,并同时显示日期。 首先,我们来看标题中的"jQuery点阵数字时钟"。点阵数字时钟是一种以点阵形式展示时间的时钟,通常由若干个LED或LCD点阵组成,通过点亮不同的...

    jquery版时钟(css3实现)

    本项目“jquery版时钟(css3实现)”是结合了jQuery和CSS3技术来创建一个实时显示当前时间的动态时钟。下面我们将详细探讨这个项目的实现原理、关键技术和相关知识点。 首先,jQuery的引入是为了利用其强大的DOM...

    html5 + jquery 制作的时钟 纯手工 娱乐一下

    通过查看这些文件,我们可以深入理解开发者如何结合HTML5和jQuery来实现这个时钟的效果。为了进一步学习,你可以尝试打开这些文件,分析它们的结构和逻辑,甚至进行修改和扩展,比如增加分钟和秒针,或者改变设计...

    html5+jQuery做的表盘样式的时钟,纯手工,纯娱乐

    在这个项目中,"html5+jQuery做的表盘样式的时钟"是一个利用这两种技术实现的纯手工、纯娱乐的创意作品。这个时钟设计灵感来源于传统的实体表盘,将时间的展示方式转移到了数字界面上。 HTML5是超文本标记语言的...

    jQuery带闹铃数字时钟 jQuery带闹铃数字时钟网页特效.zip

    总的来说,这个“jQuery带闹铃数字时钟”的项目涵盖了前端开发的多个方面,包括HTML5结构、CSS3样式和jQuery的动态交互。通过学习和实践这个项目,开发者不仅可以提升对这些技术的理解,还能锻炼到实际项目开发中的...

    jQuery html5旋转制作带指针转动的圆形时钟代码

    在本文中,我们将深入探讨如何使用jQuery和HTML5来创建一个带有指针转动的圆形时钟。这个项目结合了前端技术的力量,使我们能够构建一个动态、交互式的时钟界面,实时显示当前时间。 首先,我们需要理解jQuery的...

    源生jQuery实现数字时钟

    【源生jQuery实现数字时钟】是一个利用JavaScript的jQuery库创建的动态时钟效果,它在屏幕上以全屏滚动的方式展示当前时间。这个时钟的独特之处在于它将时间分为x、y、z三列数字进行滚动展示,为用户带来一种新颖的...

    jQuery实现时钟

    **jQuery实现时钟** 在网页开发中,动态显示实时时间是一项常见的需求,jQuery结合CSS3可以轻松实现这一功能。jQuery库提供了丰富的DOM操作和事件处理功能,而CSS3则为网页样式添加了更多动态效果的可能性,如旋转...

    jQuery超酷平面式时钟效果 jQuery超酷平面式时钟网页特效.zip

    总结,jQuery超酷平面式时钟效果的实现结合了jQuery的强大功能、CSS3的动画效果以及HTML5的语义化标签,为网页增添了一道亮丽的风景线。开发者可以根据自身需求,进一步定制时钟样式,如添加背景渐变、动态数字显示...

    jQuery数字跟指针时钟一体特效.zip

    5. **动态效果**:jQuery的动画功能可以轻松创建动态效果。在这个时钟特效中,数字和指针的转换可能就是通过动画实现的,比如淡入淡出、平滑移动等。 6. **响应式设计**:考虑到网页可能在不同设备上显示,开发者...

    纯jQuery代码实现时钟效果

    一个非常简单易用的jQuery代码实现的获取当前系统时间的始终效果 模拟家中墙壁上的挂钟效果 当然,其中使用了部分css3效果 不支持低版本浏览器的哦 使用方法简单: 将附件index.html中的css样式以及...

    jquery罗盘时钟代码

    总结,jQuery罗盘时钟的实现主要涉及HTML布局、CSS样式设计以及JavaScript的计时器和DOM操作。通过结合这三个关键部分,我们可以创建一个实时更新的、具有视觉吸引力的罗盘时钟。这个实例不仅展示了jQuery的强大功能...

Global site tag (gtag.js) - Google Analytics