Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
0
1
2
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
0
1
2
3
4
5
6
7
8
9
0
1
2
3
4
5
0
1
2
3
4
5
6
7
8
9
>
css
* { font-family:'Righteous',cursive; } body { background-color:#112; } .spinner { position:absolute; border-radius:100%; overflow:hidden; } .num { display:block; position:absolute; width:100%; line-height:110%; } /*Hours*/ #spinner_h1 .num_1 { transform:rotate( 120deg ); } #spinner_h1 .num_2 { transform:rotate( 240deg ); } #spinner_h2 .num_1 { transform:rotate( 36deg ); } #spinner_h2 .num_2 { transform:rotate( 72deg ); } #spinner_h2 .num_3 { transform:rotate( 108deg ); } #spinner_h2 .num_4 { transform:rotate( 144deg ); } #spinner_h2 .num_5 { transform:rotate( 180deg ); } #spinner_h2 .num_6 { transform:rotate( 216deg ); } #spinner_h2 .num_7 { transform:rotate( 252deg ); } #spinner_h2 .num_8 { transform:rotate( 288deg ); } #spinner_h2 .num_9 { transform:rotate( 324deg ); } /*Minutes*/ #spinner_m1 .num_1 { transform:rotate( 60deg ); } #spinner_m1 .num_2 { transform:rotate( 120deg ); } #spinner_m1 .num_3 { transform:rotate( 180deg ); } #spinner_m1 .num_4 { transform:rotate( 240deg ); } #spinner_m1 .num_5 { transform:rotate( 300deg ); } #spinner_m2 .num_1 { transform:rotate( 36deg ); } #spinner_m2 .num_2 { transform:rotate( 72deg ); } #spinner_m2 .num_3 { transform:rotate( 108deg ); } #spinner_m2 .num_4 { transform:rotate( 144deg ); } #spinner_m2 .num_5 { transform:rotate( 180deg ); } #spinner_m2 .num_6 { transform:rotate( 216deg ); } #spinner_m2 .num_7 { transform:rotate( 252deg ); } #spinner_m2 .num_8 { transform:rotate( 288deg ); } #spinner_m2 .num_9 { transform:rotate( 324deg ); } /*Seconds*/ #spinner_s1 .num_1 { transform:rotate( 60deg ); } #spinner_s1 .num_2 { transform:rotate( 120deg ); } #spinner_s1 .num_3 { transform:rotate( 180deg ); } #spinner_s1 .num_4 { transform:rotate( 240deg ); } #spinner_s1 .num_5 { transform:rotate( 300deg ); } #spinner_s2 .num_1 { transform:rotate( 36deg ); } #spinner_s2 .num_2 { transform:rotate( 72deg ); } #spinner_s2 .num_3 { transform:rotate( 108deg ); } #spinner_s2 .num_4 { transform:rotate( 144deg ); } #spinner_s2 .num_5 { transform:rotate( 180deg ); } #spinner_s2 .num_6 { transform:rotate( 216deg ); } #spinner_s2 .num_7 { transform:rotate( 252deg ); } #spinner_s2 .num_8 { transform:rotate( 288deg ); } #spinner_s2 .num_9 { transform:rotate( 324deg ); } /*Hours/Minutes/Seconds*/ /*Size*/:root { --base:6vmin; } /*CSS variables.Needs a CSS preprocessor to work on older browsers*/ body { padding:0; margin:0; } .container { overflow:hidden; position:relative; width:calc(var(--base) * 14); height:calc(var(--base) * 14); top:calc(50% - (var(--base) * 7)); margin-left:auto; margin-right:auto; } #spinner_s2 { top:calc(var(--base) * 0); left:calc(var(--base) * 0); } #spinner_s1 { top:calc(var(--base) * 1); left:calc(var(--base) * 1); } #spinner_m2 { top:calc(var(--base) * 2); left:calc(var(--base) * 2); } #spinner_m1 { top:calc(var(--base) * 3); left:calc(var(--base) * 3); } #spinner_h2 { top:calc(var(--base) * 4); left:calc(var(--base) * 4); } #spinner_h1 { top:calc(var(--base) * 5); left:calc(var(--base) * 5); } #spinner_s2 { width:calc(var(--base) * 14); height:calc(var(--base) * 14); } #spinner_s1 { width:calc(var(--base) * 12); height:calc(var(--base) * 12); } #spinner_m2 { width:calc(var(--base) * 10); height:calc(var(--base) * 10); } #spinner_m1 { width:calc(var(--base) * 8); height:calc(var(--base) * 8); } #spinner_h2 { width:calc(var(--base) * 6); height:calc(var(--base) * 6); } #spinner_h1 { width:calc(var(--base) * 4); height:calc(var(--base) * 4); } .num { font-size:var(--base); } #spinner_h1 .num,#spinner_h2 .num,#spinner_m1 .num,#spinner_m2 .num,#spinner_s1 .num,#spinner_s2 .num { top:50%; height:var(--base); margin-top:calc(var(--base)/-2); } /*.num div { padding-left:calc(var(--base)/7); } */ .num div { float:right; padding:0; width:calc(var(--base)/1.1); text-align:center; color:darkgoldenrod; } .top { position:absolute; display:block; box-sizing:border-box; top:calc(var(--base) * 6); left:calc(var(--base) * 6); width:calc(var(--base) * 2); height:calc(var(--base) * 2); padding-left:calc(var(--base)/3); text-align:center; line-height:165%; font-size:var(--base); border:calc(var(--base)/10) solid GoldenRod; border-radius:100%; overflow:hidden; color:ivory; } .spinner { border:calc(var(--base)/10) solid GoldenRod; box-sizing:border-box; } #spinner_s1,#spinner_m1,#spinner_h1 { border:calc(var(--base)/15) solid rgba(218,165,32,0.3); } /*Transitions !*/ /*Hours*/ .spinner_h1_0 { transform:rotate( 360deg ); } .spinner_h1_1 { transform:rotate( 240deg ); } .spinner_h1_2 { transform:rotate( 120deg ); } .spinner_h1_switch { transform:rotate( 480deg ); transition:none !important; } .spinner_h2_0 { transform:rotate( 360deg ); } .spinner_h2_1 { transform:rotate( 324deg ); } .spinner_h2_2 { transform:rotate( 288deg ); } .spinner_h2_3 { transform:rotate( 252deg ); } .spinner_h2_4 { transform:rotate( 216deg ); } .spinner_h2_5 { transform:rotate( 180deg ); } .spinner_h2_6 { transform:rotate( 144deg ); } .spinner_h2_7 { transform:rotate( 108deg ); } .spinner_h2_8 { transform:rotate( 72deg ); } .spinner_h2_9 { transform:rotate( 36deg ); } .spinner_h2_switch { transform:rotate( 396deg ); transition:none !important; } /*Minutes*/ .spinner_m1_0 { transform:rotate( 360deg ); } .spinner_m1_1 { transform:rotate( 300deg ); } .spinner_m1_2 { transform:rotate( 240deg ); } .spinner_m1_3 { transform:rotate( 180deg ); } .spinner_m1_4 { transform:rotate( 120deg ); } .spinner_m1_5 { transform:rotate( 60deg ); } .spinner_m1_switch { transform:rotate( 420deg ); transition:none !important; } .spinner_m2_0 { transform:rotate( 360deg ); } .spinner_m2_1 { transform:rotate( 324deg ); } .spinner_m2_2 { transform:rotate( 288deg ); } .spinner_m2_3 { transform:rotate( 252deg ); } .spinner_m2_4 { transform:rotate( 216deg ); } .spinner_m2_5 { transform:rotate( 180deg ); } .spinner_m2_6 { transform:rotate( 144deg ); } .spinner_m2_7 { transform:rotate( 108deg ); } .spinner_m2_8 { transform:rotate( 72deg ); } .spinner_m2_9 { transform:rotate( 36deg ); } .spinner_m2_switch { transform:rotate( 396deg ); transition:none !important; } /*Seconds*/ .spinner_s1_0 { transform:rotate( 360deg ); } .spinner_s1_1 { transform:rotate( 300deg ); } .spinner_s1_2 { transform:rotate( 240deg ); } .spinner_s1_3 { transform:rotate( 180deg ); } .spinner_s1_4 { transform:rotate( 120deg ); } .spinner_s1_5 { transform:rotate( 60deg ); } .spinner_s1_switch { transform:rotate( 420deg ); transition:none !important; } .spinner_s2_0 { transform:rotate( 360deg ); } .spinner_s2_1 { transform:rotate( 324deg ); } .spinner_s2_2 { transform:rotate( 288deg ); } .spinner_s2_3 { transform:rotate( 252deg ); } .spinner_s2_4 { transform:rotate( 216deg ); } .spinner_s2_5 { transform:rotate( 180deg ); } .spinner_s2_6 { transform:rotate( 144deg ); } .spinner_s2_7 { transform:rotate( 108deg ); } .spinner_s2_8 { transform:rotate( 72deg ); } .spinner_s2_9 { transform:rotate( 36deg ); } .spinner_s2_switch { transform:rotate( 396deg ); transition:none !important; } .num div { transition:transform 500ms ease-out,color 500ms ease-out; ,font-size 500ms ease-out; } .lit div { color:ivory; font-size:calc(var(--base)*1.3); transition:transform 500ms ease-out,color 500ms ease-out,font-size 500ms ease-out; } .spinner { transition:transform 500ms ease-in; } /*This fixes a bug on chrome*/ * { -webkit-backface-visibility:hidden; -webkit-transform:translateZ(0) scale(1.0,1.0); } html,body { height:100%; }
JavaScript
//These functions help add, remove or toggle css classes function tog_class(id, cl) { var elem = document.getElementById(id); if (elem == null) { return 0; } if (elem.classList.contains(cl) === true) { elem.classList.remove(cl); } else { elem.classList.add(cl); } } function add_class(id, cl) { var elem = document.getElementById(id); if (elem == null) { return 0; } if (elem.classList.contains(cl) !== true) { elem.classList.add(cl); } } function rem_class(id, cl) { var elem = document.getElementById(id); if (elem == null) { return 0; } if (elem.classList.contains(cl) === true) { elem.classList.remove(cl); } } //This function gets the date and does operations using H/M/S function startTime() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); var h1 = (h - h % 10) / 10; var h2 = h % 10; var m1 = (m - m % 10) / 10; var m2 = m % 10; var s1 = (s - s % 10) / 10; var s2 = s % 10; set_spin_class("s1", s1); set_spin_class("s2", s2); set_spin_class("m1", m1); set_spin_class("m2", m2); set_spin_class("h1", h1); set_spin_class("h2", h2); var t = setTimeout(startTime, 500); } //This function calls the appropriate class changes // It receives the type of spinner to change (m1 for example) and changes classes based on the current time function set_spin_class(target, val) { for (i = 0; i < 10; i++) { if (i != val) { rem_class("spinner_" + target, "spinner_" + target + "_" + i); rem_class("num_" + i + "_" + target, "lit"); } } add_class("spinner_" + target, "spinner_" + target + "_" + val); add_class("num_" + val + "_" + target, "lit"); if (val === 0) { deswitcher(target, val); } /*These functions prevent the clock from changing direction*/ setTimeout(function() { switcher(target, val); }, 500); } function switcher(target, val) { switch ("spinner_" + target + "_" + val) { case "spinner_h1_2": rem_class("spinner_h1", "spinner_h1_2"); add_class("spinner_h1", "spinner_h1_switch"); break; case "spinner_h2_9": rem_class("spinner_h2", "spinner_h1_2"); add_class("spinner_h2", "spinner_h2_switch"); break; case "spinner_m1_5": rem_class("spinner_m1", "spinner_m1_5"); add_class("spinner_m1", "spinner_m1_switch"); break; case "spinner_m2_9": rem_class("spinner_m2", "spinner_m2_9"); add_class("spinner_m2", "spinner_m2_switch"); break; case "spinner_s1_5": rem_class("spinner_s1", "spinner_s1_5"); add_class("spinner_s1", "spinner_s1_switch"); break; case "spinner_s2_9": rem_class("spinner_s2", "spinner_s2_9"); add_class("spinner_s2", "spinner_s2_switch"); break; } } function deswitcher(target, val) { rem_class("spinner_" + target, "spinner_" + target + "_switch"); } //Do stuff here window.onload = function() { startTime(); };
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>旋转时钟-jq22.com</title> <script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script> <style>
</style> </head> <body>
<script>
</script>
</body> </html>
2012-2021 jQuery插件库版权所有
jquery插件
|
jq22工具库
|
网页技术
|
广告合作
|
在线反馈
|
版权声明
沪ICP备13043785号-1
浙公网安备 33041102000314号