Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Change theme
css
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:300,500"); body { width: 100vw; height: 100vh; display: flex; justify-content: center; align-items: center; background: #333; transition: 0.4s; font-family: "Roboto Mono", monospace; font-weight: 300; } .clock { position: relative; display: flex; flex-flow: column wrap; width: 280px; height: 100px; } .block { width: calc(100% / 12); height: 20%; color: #474747; transition: 0.4s; } .block:not(:nth-child(n + 16)):nth-child(n + 11), .block:not(:nth-child(n + 46)):nth-child(n + 41) { margin-right: 10px; } .block:not(:nth-child(n + 31)):nth-child(n + 26) { margin-right: 20px; } .block:before { content: attr(data-num); position: relative; display: block; font-size: 16px; width: 100%; height: 100%; line-height: 20px; text-align: center; } .block:nth-child(-n + 10):before { content: "0" attr(data-num); } .block.active:before { color: whitesmoke; font-weight: 500; } .block.second:before { color: #FF8300; } .divider { position: absolute; width: 2px; background-color: whitesmoke; height: 60%; top: 20%; left: calc(50% + 19px); } body.light-theme { background: #e6e6e6; } body.light-theme .block { outline: 1px solid #dfdfdf; color: #acacac; } body.light-theme .block.active:before { color: #333; } body.light-theme .block.second { background: #d4d4d4; } body.light-theme .block.second:before { color: #333; } body.light-theme .divider { background: #333; } .switch-theme { position: absolute; bottom: 40px; right: 40px; color: grey; } .switch { position: relative; display: inline-block; width: 60px; height: 34px; margin-left: 30px; } .switch input { display: none; } .slider { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #ccc; transition: 0.4s; border-radius: 34px; } .slider:before { position: absolute; content: ""; height: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; transition: 0.4s; border-radius: 50%; } input:checked + .slider { background-color: #333; } input:focus + .slider { box-shadow: 0 0 1px #2196F3; } input:checked + .slider:before { -webkit-transform: translateX(26px); transform: translateX(26px); }
JavaScript
const numbers = [ [1, 1, 1, 1, 1, 1, 0, 0, 0, 1, 1, 1, 1, 1, 1], // 0 [1, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1], // 1 [1, 0, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 0, 1], // 2 [1, 0, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 3 [1, 1, 1, 0, 0, 0, 0, 1, 0, 0, 1, 1, 1, 1, 1], // 4 [1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1], // 5 [1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 0, 1, 1, 1], // 6 [1, 0, 0, 0, 0, 1, 0, 1, 1, 1, 1, 1, 0, 0, 0], // 7 [1, 1, 1, 1, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1], // 8 [1, 1, 1, 0, 1, 1, 0, 1, 0, 1, 1, 1, 1, 1, 1] // 9 ]; const blocks = []; const digits = Array.from(document.querySelectorAll('.block')); for (let i = 0; i < 4; i++) { blocks.push(digits.slice( i * 15, i * 15 + 15 )); } const setNum = (block, num) => { let n = numbers[num]; for (let i = 0; i < block.length; i++) { block[i].classList[ n[i] === 1 ? 'add' : 'remove']('active'); } }; const time = { s: '', m: '', h: '', p: null }; // time loop const animator = () => { let d = new Date(), h = d.getHours().toString(), m = d.getMinutes().toString(), s = d.getSeconds().toString(); s = s.length === 1 ? '0' + s : s; m = m.length === 1 ? '0' + m : m; h = h.length === 1 ? '0' + h : h; if (s !== time.s) { for (let i = 0; i < digits.length; i++) { let d = digits[i]; if (i === +s) { d.classList.add('second'); if (time.p !== null) digits[time.p].classList.remove('second'); time.p = i; time.s = s; } } } if (m !== time.m) { setNum(blocks[2], m[0]); setNum(blocks[3], m[1]); time.m = m; } if (h !== time.h) { setNum(blocks[0], h[0]); setNum(blocks[1], h[1]); time.h = h; } window.requestAnimationFrame(animator) } // init window.requestAnimationFrame(animator) // toggle button const body = document.querySelector('body'); changeTheme = ev => { body.classList.toggle('light-theme'); };
粒子
时间
文字
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号