Toggle navigation
在线编辑器
在线代码
文本比较
jQuery下载
前端库
在线手册
登录/注册
下载代码
html
css
js
分享到微信朋友圈
X
html
1
2
3
4
5
6
7
8
9
10
11
12
css
body{ background-color: coral; padding: 0; margin: 0; } .clock{ width: 300px; height: 300px; border-radius: 50%; background-color: antiquewhite; margin: 100px auto 0px auto; position: relative; border:20px solid cornsilk; } .center{ background-color: #000; position: absolute; left: calc(50% - 10px); top: calc(50% - 10px); width: 20px; height: 20px; border-radius: 50%; z-index: 20; } .hourHand{ width: 10px; height: 75px; background-color: #000; transform-origin: bottom center; border-radius: 4px; position: absolute; top: 75px; left: 145px; z-index: 10; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); transform: rotate(360deg); } .minuteHand{ width: 5px; height: 120px; background-color: #000; transform-origin: bottom center; border-radius: 4px; position: absolute; top: 30px; left: 147px; z-index: 9; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); transform: rotate(90deg); } .secondHand{ width: 2px; height: 120px; background-color:red; transform-origin: bottom center; border-radius: 4px; position: absolute; top: 30px; left: 149px; transition: all 0.06s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); z-index: 8; transform: rotate(360deg); } .time{ position: absolute; top: 45%; left: 10%; border: 1px solid #fff8dc; background-color: #fff; padding: 5px; display: block; box-shadow: inset 0px 2px 5px rgba(0,0,0,.4); border-radius: 5px; min-width: 70px; height: 15px; } .time small{ color:red; transition: all 0.05s; transition-timing-function: cubic-bezier(0.1, 2.7, 0.58, 1); } .clock ul{ list-style: none; padding: 0; } .clock ul li{ position: absolute; width:20px; height:20px; text-align: center; line-height: 20px; font-size: 10px; color:red; } .clock ul li:nth-child(1){ right: 22%; top:6.5%; } .clock ul li:nth-child(2){ right: 6%; top:25%; } .clock ul li:nth-child(3){ right: 1%; top:calc(50% - 10px); color:#000; font-size: 20px; font-weight: bold; } .clock ul li:nth-child(4){ right: 6%; top:69%; } .clock ul li:nth-child(5){ right: 22%; top:84%; } .clock ul li:nth-child(6){ right: calc(50% - 10px); top:calc(99% - 20px); color:#000; font-size: 20px; font-weight: bold; } .clock ul li:nth-child(7){ left: 22%; top:84%; } .clock ul li:nth-child(8){ left: 6%; top:69%; } .clock ul li:nth-child(9){ left: 1%; top:calc(50% - 10px); color:#000; font-size: 20px; font-weight: bold; } .clock ul li:nth-child(10){ left: 6%; top:25%; } .clock ul li:nth-child(11){ left: 22%; top:6.5%; } .clock ul li:nth-child(12){ right: calc(50% - 10px); top:1%; color:#000; font-size: 20px; font-weight: bold; }
JavaScript
window.onload = function() { const hourHand = document.querySelector('.hourHand'); const minuteHand = document.querySelector('.minuteHand'); const secondHand = document.querySelector('.secondHand'); const time = document.querySelector('.time'); const clock = document.querySelector('.clock'); function setDate(){ const today = new Date(); const second = today.getSeconds(); const secondDeg = ((second / 60) * 360) + 360; secondHand.style.transform = `rotate(${secondDeg}deg)`; const minute = today.getMinutes(); const minuteDeg = ((minute / 60) * 360); minuteHand.style.transform = `rotate(${minuteDeg}deg)`; const hour = today.getHours(); const hourDeg = ((hour / 12 ) * 360 ); hourHand.style.transform = `rotate(${hourDeg}deg)`; time.innerHTML = '
' + '
' + hour + '
' + ' : ' + minute + ' : ' + '
' + second +'
'+ '
'; } setInterval(setDate, 1000); }
粒子
时间
文字
hover
canvas
3d
游戏
音乐
火焰
水波
轮播图
鼠标跟随
动画
css
加载动画
导航
菜单
按钮
滑块
tab
弹出层
统计图
svg
×
Close
在线代码下载提示
开通在线代码永久免费下载,需支付20jQ币
开通后,在线代码模块中所有代码可终身免费下!
您已开通在线代码永久免费下载,关闭提示框后,点下载代码可直接下载!
您已经开通过在线代码永久免费下载
对不起,您的jQ币不足!可通过发布资源 或
直接充值获取jQ币
取消
开通下载
<!doctype html> <html> <head> <meta charset="utf-8"> <title>JS CSS时钟-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号