8个基于jQuery和HTML5的日历时钟插件

澳门新葡亰网址 12

本文由码农网 –
小峰原创,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划!

时钟动画在网页应用中也非常广泛,在一些个人博客中,我们经常会看到一些相当个性化的HTML5时钟动画。今天我们向大家分享了14款形态各异的超时尚HTML5时钟动画,其中有圆盘时钟、3D时钟、个性化时钟等,强大的HTML5为时钟动画增添了不少精彩,希望能给大家带来帮助。

jQuery是一个当前依然非常流行的Web前端JavaScript框架,这次我们要分享的就是基于jQuery的日历时钟插件,部分日历插件还是基于HTML5技术实现的,因此动画效果都还不错。有兴趣的朋友可以接下去看看。

1、可爱的CSS3圆盘时钟动画

今天要分享的也是一款可爱的CSS3圆盘时钟动画,时钟背景是乳白色的,显得非常干净,另外,时钟也可以和你本地的时候保持同步。

澳门新葡亰网址 1

在线演示

源码下载

1、jQuery多功能日历插件 带事件记录功能

这款jQuery日历插件的一大特点就是可以在每一个日期后面记录事件,并且可以设置提醒时间,如果你对JS开发比较擅长,还可以将它改进成一款即时提醒的APP应用。

澳门新葡亰网址 2

在线演示源码下载

2、HTML5 SVG圆盘时钟动画 5种时钟样式

今天我们要来分享一款基于HTML5和SVG的圆盘时钟动画,首先,圆盘时钟的时间是和你的本地时间同步的,因此,你完全可以用它来看上网时间。另外,这款HTML5圆盘时钟提供了5中不同的盘面样式,有带刻度的和不带刻度的,还挺实用的。

澳门新葡亰网址 3

在线演示

源码下载

2、华丽的HTML5/CSS3日期选择器

这款HTML5日历插件的特点是外观非常漂亮,日期按钮有内凹的3D效果,并且随着鼠标的滑过,日期背景将会改变。

澳门新葡亰网址 4

在线演示源码下载

3、HTML5仿Apple Watch时钟动画

Apple
Watch刚刚发布不久,就已经有国外的大牛将其时钟表盘界面用HTML5模仿出来了,并且这款HTML5仿Apple
Watch的时钟是动态的,可以根据本地时间实时更新指针数据。时钟的界面非常华丽,确实有苹果的风格,HTML5也的确非常强大。

澳门新葡亰网址 5

在线演示

源码下载

3、jQuery超酷平面时钟特效插件

这款jQuery时钟就更加具有特色了,它的整体外观是一个平面,时钟的时针、分针和秒针都在这个平面上,不像圆盘时钟那样是绕圈计数的,它是在平面上滑动而周期性地计数。

澳门新葡亰网址 6

在线演示源码下载

4、jQuery带闹钟闹铃的数字时钟

今天要分享的是一款基于jQuery的数字时钟,这款jQuery时钟的一大特点是可以设置闹铃,可以做一个很好的闹钟插件。点击闹钟设置按钮即可弹出一个对话框,你可以多少时间后激活闹铃,比如1分钟后激活,那么就在minutes中设置1。1分钟后,会弹出一个闹铃提示框,并伴随提示声音。

澳门新葡亰网址 7

在线演示

源码下载

4、HTML5/CSS3带日期区间的日期选择插件

这款HTML5日历插件的特点是可以选取一定的时间范围,自定义日期区间。

澳门新葡亰网址 8

在线演示源码下载

5、jQuery超酷平面时钟特效插件

这是一个非常具有创意的jQuery时钟插件,它不像其他的时钟插件一样是圆盘的或者是数字的,它是一个平面时钟,日期和时分秒的指针都是在平面上移动计时的,尽管这款jQuery平面时钟插件不能广泛应用,但是创意是绝对可以肯定的。

澳门新葡亰网址 9

在线演示

源码下载

5、jQuery/HTML5秒表动画

这是一款基于jQuery和HTML5的圆盘秒表动画,和其他的jQuery日历插件不同,它的用途是用来计时和统计。

澳门新葡亰网址 10

澳门新葡亰网址,在线演示源码下载

6、HTML5/CSS3圆盘秒表动画 秒表可暂停计时

今天我们要分享一款基于HTML5和CSS3的圆盘秒表动画,秒表可以精确到0.001秒,并且可以在计时过程中暂停计时,同时秒表可以随时重置。

澳门新葡亰网址 11

在线演示

源码下载

6、JavaScript日期选择控件Kalendae

Kalendae是一款老牌的jQuery日历插件,它的特点是可以同时展示多个日历,并且提供日期的选择。

澳门新葡亰网址 12

在线演示源码下载

7、CSS3倒计时时钟动画

现在分享的这款CSS3应用是一个倒计时插件,这款倒计时插件的外观还是比较简单大气的,加上阴影,有着3D立体的视觉效果。倒计时标有天、时、分、秒,我们可以很清晰的看出时钟的走动。我们可以将它制作成挂件放到自己的个人博客上去,来实现活动开始的倒计时功能。

澳门新葡亰网址 13

在线演示

源码下载

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图