Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
Okinawa
Seattle
Amalfi
css
html { height: 100%; display: flex; justify-content: center; align-items: center; background-color: #673AB7; overflow: hidden; } .content { display: flex; align-items: center; } .content .widget { padding: 24px; margin: 24px; } .content .widget.clock { position: relative; width: 384px; height: 384px; border-radius: 100%; box-sizing: border-box; background-color: #5A2EA5; } .content .widget.clock#okinawa, .content .widget.clock#amalfi { width: 240px; height: 240px; } .content .widget.clock#okinawa:before, .content .widget.clock#amalfi:before { border-width: 3px; } .content .widget.clock#okinawa .hand, .content .widget.clock#amalfi .hand { height: 3px; top: 118.5px; transform-origin: right 1.5px; } .content .widget.clock#okinawa .hand.seconds, .content .widget.clock#amalfi .hand.seconds { display: none; } .content .widget.clock:before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; border: 6px solid #FFF; border-radius: 100%; box-sizing: border-box; } .content .widget.clock .shadow { content: ""; width: 100%; height: 500px; position: absolute; top: 50%; left: 0; background: linear-gradient(to bottom, rgba(0, 0, 0, 0.65) 0%, transparent 100%); transform: rotate(-45deg); transform-origin: 50% 0%; opacity: 0.3; z-index: -1; } .content .widget.clock .hand { height: 6px; position: absolute; top: 189px; background-color: #FFF; border-radius: 100% 0% 0% 100%; transform-origin: right 3px; transition: all 0.05s cubic-bezier(0, 0, 0.52, 2.51) 0s; } .content .widget.clock .hand.seconds { width: 45%; left: 5%; opacity: 0.25; } .content .widget.clock .hand.minutes { width: 35%; left: 15%; opacity: 0.5; } .content .widget.clock .hand.hours { width: 25%; left: 25%; opacity: 0.75; } .content .widget.clock .hand-cap { width: 5%; height: 5%; position: absolute; top: 47.5%; left: 47.5%; background-color: #FFF; border-radius: 100%; } .content .widget label { display: block; width: 100%; position: absolute; top: -24px; left: 0; font-family: sans-serif; font-weight: 200; font-size: 12px; text-transform: uppercase; text-align: center; letter-spacing: 4px; color: #FFF; opacity: 0.5; }
JavaScript
"use strict"; function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var Clock = function () { function Clock(id) { _classCallCheck(this, Clock); this.timezone = parseInt(document.getElementById(id).dataset.timezone); if (this.isDST(new Date())) { this.timezone += 1; } this.handSeconds = document.querySelector("#" + id + " .hand.seconds"); this.handMinutes = document.querySelector("#" + id + " .hand.minutes"); this.handHours = document.querySelector("#" + id + " .hand.hours"); this.getTime(); this.cycle(); } Clock.prototype.isDST = function isDST(now) { var jan = new Date(now.getFullYear(), 0, 1); var jul = new Date(now.getFullYear(), 6, 1); var dst = Math.max(jan.getTimezoneOffset(), jul.getTimezoneOffset()); return now.getTimezoneOffset() < dst; }; Clock.prototype.draw = function draw(hours, minutes, seconds) { var drawSeconds = seconds / 60 * 360 + 90; var drawMinutes = minutes / 60 * 360 + 90; if (hours >= 12) { drawHours = hours - 12; } var drawHours = hours / 12 * 360 + 90; this.handSeconds.style.transform = "rotate(" + drawSeconds + "deg)"; this.handMinutes.style.transform = "rotate(" + drawMinutes + "deg)"; this.handHours.style.transform = "rotate(" + drawHours + "deg)"; // fix for animation bump on when clock hands hit zero if (drawSeconds === 444 || drawSeconds === 90) { this.handSeconds.style.transition = "all 0s ease 0s"; } else { this.handSeconds.style.transition = "all 0.05s cubic-bezier(0, 0, 0.52, 2.51) 0s"; } }; Clock.prototype.getTime = function getTime() { var now = new Date(); var hours = now.getUTCHours() + this.timezone; var minutes = now.getUTCMinutes(); var seconds = now.getUTCSeconds(); this.draw(hours, minutes, seconds); }; Clock.prototype.cycle = function cycle() { setInterval(this.getTime.bind(this), 1000); }; return Clock; }(); new Clock('okinawa'); new Clock('seattle'); new Clock('amalfi'); // this is just a rough draft for some effects // const shadowOkinawa = document.querySelector("#okinawa .shadow"); // const shadowSeattle = document.querySelector("#seattle .shadow"); // const shadowAmalfi = document.querySelector("#amalfi .shadow"); // const handleMouseMove = (event) => { // const percent = parseInt((100 * event.pageX) / window.innerWidth); // const drawShadow = (0.22 * percent) - 50; // shadowOkinawa.style.transform = `rotate(${drawShadow}deg)`; // shadowSeattle.style.transform = `rotate(${drawShadow}deg)`; // shadowAmalfi.style.transform = `rotate(${drawShadow}deg)`; // }; // document.onmousemove = handleMouseMove;
粒子
时间
文字
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号