设为首页收藏本站万年历下载链接批量生成在线弹钢琴眼力锻炼小游戏
切换到窄版

 找回密码
 立即注册

QQ登录

只需一步，快速开始

搜索
热搜: 文档 工具 设计
城东书院※社区»社区 › ※编程开发※ › 〔前端(Html,Div+Css...)〕 › html5 Apple Watch 时钟 代码
返回列表 发新帖
查看: 80|回复: 0

html5 Apple Watch 时钟 代码

[复制链接]
csx

1万

主题

916

回帖

2万

积分

超级版主

教育辅助界扛把子

附加身份标识
精华
1
热心
2
听众
1
威望
57
贡献
11949
违规
0
书币
5649
注册时间
2020-4-8

论坛元老灌水之王
发表于 2021-12-2 08:39 | 显示全部楼层 |阅读模式
html5 Apple Watch 时钟 代码

如图：
微信截图_20211202083331.png
index.html代码：
[HTML] 纯文本查看 复制代码
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>HTML5  Apple Watch  --[url]www.cdsy.xyz[/url]</title>
<link rel="stylesheet" href="style.css" tppabs="/style.css" media="screen" type="text/css">

<script> 
function stop(){ return false; } 
document.oncontextmenu=stop; 
</script>
</head>
<body>
<div class="fill">
<div class="reference"></div>
<div class="clock" id="utility-clock" style="transform: scale(1.939);">
<div class="centre">
<div class="dynamic">
<div class="anchor" style="transform: rotate(6deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(12deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(18deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(24deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: -116.9px; left: 67.5px;">05</div>
<div class="anchor" style="transform: rotate(36deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(42deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(48deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(54deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: -67.5px; left: 116.9px;">10</div>
<div class="anchor" style="transform: rotate(66deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(72deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(78deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(84deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: 0px; left: 135px;">15</div>
<div class="anchor" style="transform: rotate(96deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(102deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(108deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(114deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: 67.5px; left: 116.9px;">20</div>
<div class="anchor" style="transform: rotate(126deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(132deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(138deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(144deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: 116.9px; left: 67.5px;">25</div>
<div class="anchor" style="transform: rotate(156deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(162deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(168deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(174deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: 135px; left: 0px;">30</div>
<div class="anchor" style="transform: rotate(186deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(192deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(198deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(204deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: 116.9px; left: -67.5px;">35</div>
<div class="anchor" style="transform: rotate(216deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(222deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(228deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(234deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: 67.5px; left: -116.9px;">40</div>
<div class="anchor" style="transform: rotate(246deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(252deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(258deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(264deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: 0px; left: -135px;">45</div>
<div class="anchor" style="transform: rotate(276deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(282deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(288deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(294deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: -67.5px; left: -116.9px;">50</div>
<div class="anchor" style="transform: rotate(306deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(312deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(318deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(324deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: -116.9px; left: -67.5px;">55</div>
<div class="anchor" style="transform: rotate(336deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(342deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(348deg);">
<div class="element minute-line"></div>
</div>
<div class="anchor" style="transform: rotate(354deg);">
<div class="element minute-line"></div>
</div>
<div class="minute-text" style="top: -135px; left: 0px;">60</div>
<div class="hour-text hour-1" style="top: -90.9px; left: 52.5px;">1</div>
<div class="hour-text hour-2" style="top: -52.5px; left: 90.9px;">2</div>
<div class="hour-text hour-3" style="top: 0px; left: 105px;">3</div>
<div class="hour-text hour-4" style="top: 52.5px; left: 90.9px;">4</div>
<div class="hour-text hour-5" style="top: 90.9px; left: 52.5px;">5</div>
<div class="hour-text hour-6" style="top: 105px; left: 0px;">6</div>
<div class="hour-text hour-7" style="top: 90.9px; left: -52.5px;">7</div>
<div class="hour-text hour-8" style="top: 52.5px; left: -90.9px;">8</div>
<div class="hour-text hour-9" style="top: 0px; left: -105px;">9</div>
<div class="hour-text hour-10" style="top: -52.5px; left: -90.9px;">10</div>
<div class="hour-text hour-11" style="top: -90.9px; left: -52.5px;">11</div>
<div class="hour-text hour-12" style="top: -105px; left: 0px;">12</div>
</div>
<div class="expand round circle-1"></div>
<div class="anchor hour" style="transform: rotate(565.246deg);">
<div class="element thin-hand"></div>
<div class="element fat-hand"></div>
</div>
<div class="anchor minute" style="transform: rotate(6782.95deg);">
<div class="element thin-hand"></div>
<div class="element fat-hand minute-hand"></div>
</div>
<div class="anchor second" style="transform: rotate(406977deg);">
<div class="element second-hand"></div>
</div>
<div class="expand round circle-2"></div>
<div class="expand round circle-3"></div>
</div>
</div>
</div>
</body>
<script src="index.js" tppabs="/index.js"></script>
</html>


style.css内容：
[CSS] 纯文本查看 复制代码
body{background:#ffffff}.clock{position:absolute;opacity:1}.fill .clock{left:50%;top:50%}.centre{position:absolute;top:50%;left:50%;width:0;height:0}.expand{position:absolute;top:0;left:0;transform:translate(-50%,-50%)}.anchor{position:absolute;top:0;left:0;width:0;height:0}.element{position:absolute;top:0;left:0}.round{border-radius:296px}.circle-1{background:#000000;width:12px;height:12px}.circle-2{background:#fa9f22;width:8px;height:8px}.circle-3{background:#ffffff;width:4px;height:4px}.second{transform:rotate(180deg)}.minute{transform:rotate(54deg)}.second-hand{width:2px;height:164px;background:#fa9f22;transform:translate(-50%,-100%) translateY(24px)}.hour{transform:rotate(304.5deg)}.thin-hand{width:4px;height:50px;background:#ff0000;transform:translate(-50%,-100%)}.fat-hand{width:10px;height:57px;border-radius:10px;background:#000000;transform:translate(-50%,-100%) translateY(-18px)}.minute-hand{height:112px}.hour-text{position:absolute;font:40px Hei,Helvetica,Arial,sans-serif;color:#000000;transform:translate(-50%,-50%)}.hour-10{padding-left:.4ex}.hour-11{padding-left:.25ex}.minute-text{position:absolute;font:12px Avenir Next,Helvetica,Arial,sans-serif;color:#000000;transform:translate(-50%,-50%)}.minute-line{background:#000000;width:1px;height:9px;transform:translate(-50%,-100%) translateY(-131px);opacity:1}


index.js内容：
[JavaScript] 纯文本查看 复制代码
var clock = document.querySelector('#utility-clock')
utilityClock(clock)

if (clock.parentNode.classList.contains('fill')) autoResize(clock, 295 + 32)

function utilityClock(container) {
    var dynamic = container.querySelector('.dynamic')
    var hourElement = container.querySelector('.hour')
    var minuteElement = container.querySelector('.minute')
    var secondElement = container.querySelector('.second')
    var minute = function(n) {
        return n % 5 == 0 ? minuteText(n) : minuteLine(n)
    }
    var minuteText = function(n) {
        var element = document.createElement('div')
        element.className = 'minute-text'
        element.innerHTML = (n < 10 ? '0' : '') + n
        position(element, n / 60, 135)
        dynamic.appendChild(element)
    }
    var minuteLine = function(n) {
        var anchor = document.createElement('div')
        anchor.className = 'anchor'
        var element = document.createElement('div')
        element.className = 'element minute-line'
        rotate(anchor, n)
        anchor.appendChild(element)
        dynamic.appendChild(anchor)
    }
    var hour = function(n) {
        var element = document.createElement('div')
        element.className = 'hour-text hour-' + n
        element.innerHTML = n
        position(element, n / 12, 105)
        dynamic.appendChild(element)
    }
    var position = function(element, phase, r) {
        var theta = phase * 2 * Math.PI
        element.style.top = (-r * Math.cos(theta)).toFixed(1) + 'px'
        element.style.left = (r * Math.sin(theta)).toFixed(1) + 'px'
    }
    var rotate = function(element, second) {
        element.style.transform = element.style.webkitTransform = 'rotate(' + (second * 6) + 'deg)'
    }
    var animate = function() {
        var now = new Date()
        var time = now.getHours() * 3600 +
                    now.getMinutes() * 60 +
                    now.getSeconds() * 1 +
                    now.getMilliseconds() / 1000
        rotate(secondElement, time)
        rotate(minuteElement, time / 60)
        rotate(hourElement, time / 60 / 12)
        requestAnimationFrame(animate)
    }
    for (var i = 1; i <= 60; i ++) minute(i)
    for (var i = 1; i <= 12; i ++) hour(i)
    animate()
}

function autoResize(element, nativeSize) {
    var update = function() {
        var scale = Math.min(window.innerWidth, window.innerHeight) / nativeSize
        element.style.transform = element.style.webkitTransform = 'scale(' + scale.toFixed(3) + ')'
    }
    update()
    window.addEventListener('resize', update)
}


可以使用iframe在其它页面引用使用，例如：
[HTML] 纯文本查看 复制代码
<div class="shizhong widget-text"><iframe src="https://www.cdsy.xyz/tools/shizhong/" width="310" height="310"></iframe></div>

Great works are not done by strength, but by persistence! 历尽艰辛的飞升者，成了围剿孙悟空的十万天兵之一。
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号


免责声明：
本站所发布的第三方软件及资源（包括但不仅限于文字/图片/音频/视频等仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。本站信息来自网络，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢某程序或某个资源，请支持正版软件及版权方利益，注册或购买，得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To: admin@cdsy.xyz

QQ|Archiver|手机版|小黑屋|城东书院 ( 湘ICP备19021508号-1|湘公网安备 43102202000103号 )

GMT+8, 2024-4-25 22:31 , Processed in 0.042910 second(s), 30 queries .

Powered by Discuz! CDSY.XYZ

Copyright © 2019-2023, Tencent Cloud.

快速回复 返回顶部 返回列表