受控时钟
受控时钟
受控时钟免费下载 在 HTML、CSS 和 JavaScript 中
HTML：
<!-- svg making up the clock -->
<svg viewBox="0 0 100 100" width="100" height="100">
<defs>
<!-- filters describing the shadows, applied on the larger and smaller shapes -->
<filter id="shadow-large">
<feDropShadow dx="0" dy="0" stdDeviation="4"/>
</filter>
<filter id="shadow-small">
<feDropShadow dx="0" dy="0" stdDeviation="0.2"/>
</filter> <!-- mask used to cut out a sliver of the overlaid circle -->
<mask
id="掩码">
<g transform="translate(50 50)">
<!-- starting at -15, incrementing by 30 for each hour -->
<g
类=“小时”转换=“旋转（-15）”>
<circle
cx="0"
cy="0"
r="50"
填充="#fff">
</circle>
<path
d="M 0 -50 v 50 l 28.86 -50"
填充="#000">
</path>
</g>
</g>
</mask>
</defs> <!-- circle making up the bottom of the clock -->
<circle
cx="50"
cy="50"
r="46"
填充="#303335">
</circle> <!-- circle with the accent color, overlaid before the text elements -->
<circle
cx="50"
cy="50"
r="42"
填充="#EA3F3F"
filter="url(#shadow-large)">
</circle> <!-- text elements, positioned from the center around the clock -->
<g
类=“时钟--面”
字体大小="8px"
变换=“翻译（50 50）”
文本锚=“中间”
主导基线=“中间”>
<!-- the elements are included through the script, at intervals of 30 degrees -->
<!--
<text
变换=“旋转（-90）平移（35 0）旋转（90）”>
12
</text> <text
变换=“旋转（-0）平移（35 0）旋转（0）”>
03
</text>
-->
</g> <!-- circle overlaid on the accent circle and text elements -->
<circle
掩码=“网址（#掩码）”
cx="50"
cy="50"
r="50"
填充="#303335">
</circle> <!-- smaller circle on which the hands sit -->
<circle
cx="50"
cy="50"
r="4"
过滤器=“url（#shadow-small）”
填充="#303335">
</circle> <!-- clock's hands -->
<!-- centered in the clock and rotated according to the passage of time in the 0-360 range -->
<g
类=“手”
变换=“翻译（50 50）”
>
<g
类=“分钟”
变换="旋转(240)"><!-- change rotation of this group to affect both clock's hand -->
<path
填充="#fff"
d="M -0.4 8 h 0.8 v -33 h -0.8 z">
</path>
<circle
填充="#303335"
cx="0"
cy="0"
r="0.6">
</circle>
</g> <g
类=“秒”
变换="旋转(80)"><!-- change rotation of this group to affect both clock's hand -->
<path
填充="#EA3F3F"
d="M -0.4 10 h 0.8 v -45 h -0.8 z">
</path>
<circle
笔画宽度=“0.4”
中风=“#EA3F3F”
填充="#303335"
cx="0"
cy="0"
r="0.8">
</circle>
</g>
</g>
</svg> <!-- div wrapping the controls to change the number of hours/minutes/seconds -->
<div class="controls">
<div class="controls__control" data-control="hours">
<button>+</button>
<span class="control--hours">H</span>
<button>-</button>
</div> <div class="controls__control" data-control="minutes">
<button>+</button>
<span class="control--minutes">米</span>
<button>-</button>
</div> <div class="controls__control" data-control="seconds">
<button>+</button>
<span class="control--seconds">s</span>
<button>-</button>
</div>
</div>
您可能还想下载： HTML、CSS 和 JavaScript 中的 WebGL Apple Cards
CSS：
@import url("https://fonts.googleapis.com/css?family=Barlow|Barlow+Condensed&display=swap"); * {
box-sizing：边框框；
填充：0；
边距：0；
}
/* 将包裹控件的 svg 和 div 放置在另一个之上 */
身体 {
最小高度：100vh；
显示：弯曲；
弹性方向：列；
对齐项目：居中；
证明内容：中心；
背景：#262728；
字体家族：“巴洛”，无衬线；
}
/* 让描述 svg 的时钟扩展到覆盖视口的相当大一部分 */
SVG {
上边距：1rem；
宽度：60vmin；
高度：自动；
过滤器：url（#shadow-large）；
}
SVG文本{
font-family: "Barlow Condensed", sans-serif;
} /* 并排显示控件 */
. 控制 {
显示：弯曲；
弹性包装：换行；
边距顶部：2rem；
}
/* 在列中显示 button+span 元素 */
. 控制 div {
文本对齐：居中；
显示：弯曲；
弹性方向：列；
保证金：1rem；
}
/* 使用与时钟相同的颜色设置按钮的样式 */
.controls div 按钮 {
边框：无；
边界半径：50%；
背景：#ea3f3f；
填充：0.25rem；
颜色：#fff;
宽度：48px；
高度：48px；
显示：弯曲；
证明内容：中心；
对齐项目：居中；
字体大小：1.5rem；
过滤器：url（#shadow-large）；
保证金：0.5rem 0；
}
.controls div 跨度 {
颜色：#fff;
}
JavaScript：
/* 脚本用途
1. 包括时钟中的 12 个数字，围绕 SVG 圆圈
1. 旋转时钟的指针以及遮罩以在 svg 中显示当前时间
1. 在描述控件的跨度中包含当前时间
1. 对单击按钮做出反应，以更新时钟和按钮上的时间
*/ // 实用函数
// 函数将输入数字作为字符串返回 _and_ 将 0 添加到小于 10 的数字
const zeroPadded = number => ((number >= 10) ? number.toString() : `0${number}`); // 函数将 [0-23] 范围内的小时值作为输入并返回 12 小时格式
常量十二时钟 = (二十四时钟) => {
如果 (twentyFourClock === 0) {
返回 12；
} if (twentyFourClock > 12) {
返回二十四时钟 - 12；
}
返回二十四钟；
}; // 1. SVG钟面
const clockFace = document.querySelector('svg g.clock--face');
// 通过旋转、平移和旋转文本元素来添加十二个数字
// !通过效用函数为小于 10 的数字加零
for (让 i = 0; i < 12; i += 1) {
clockFace.innerHTML += `
<text
变换="旋转(${-90 + 30 * (i + 1)}) 翻译(34 0) 旋转(${90 - 30 * (i + 1)})" >
${zeroPadded(i + 1)}
</text>
`;
}
// SVG & BUTTONS 当前时间
// 检索当前的小时数、分钟数和秒数
const now = new Date();
const hours = now.getHours();
常量分钟 = now.getMinutes();
常量秒 = now.getSeconds(); // 作为 0-23 范围内的小时，标准化 1-12 范围内的值
常量时间 = {
小时：十二时钟（小时），// 1-12
分钟，// 0-59
秒，// 0-59
}; // 创建另一个描述时间值的对象，用于手的旋转
// 这是为了避免在时间回到 0（或小时数回到 1）时发生故障
常量旋转 = {
小时：十二时钟（小时），
分钟，
秒，
}; // 使用这些值来更新 svg 和 span 元素的文本
常量条目 = Object.entries(time);
entry.forEach(([key, value]) => {
日本动画片（{
目标：`g.${key}`，
转换：（键 === '小时'）？ `rotate(${-15 + value * 30})` : `rotate(${value * 6})`,
持续时间：2000，
}); const span = document.querySelector(`span.control--${key}`);
span.textContent = zeroPadded(value);
});
// 按钮点击事件
常量按钮 = document.querySelectorAll('button'); // 函数根据输入指令返回时间和旋转对象的新值
函数更新值（指令）{
/* 解构必要的信息
键：小时、分钟或秒
操作：+ 或 -
timeValue：[1-12] 或 [0-59] 范围内的数字
旋转值：数字
*/
const { key, operation } = 指令；
const { timeValue, rotationValue } = 指令； // 根据前一个值和当前操作创建度数
常数度=操作==='+'？旋转值 + 1 ：旋转值 - 1；
// 根据操作创建小时/分钟/秒数
让值 = 操作 === '+' ？ timeValue + 1 : timeValue - 1; // 将值格式化为在规定范围内
如果（键==='小时'）{
价值 = 价值 > 12 ？ 1：价值=== 0？ 12：值；
} 别的 {
价值 = 价值 > 59 ？ 0 : 值 < 0 ? 59：价值；
} // 返回更新的时间和旋转值
返回{值，度}；
}
// 在按钮元素上注册单击时调用的函数
函数句柄点击（）{
// 从包装容器和当前元素中检索必要的信息
const key = this.parentElement.getAttribute('data-control');
常量操作 = this.textContent;
// 取回之前的值
常量时间值=时间[键]；
常量旋转值=旋转[键]； // 根据 set 指令调用函数更新时间和旋转值
常量指令 = {
钥匙，
手术，
时间值，
旋转值，
};
常量 { 值，度 } = updateValues（指令）； // 更新对象
时间[键] = 值；
旋转[键] = 度； // 更新匹配手的位置
日本动画片（{
目标：`g.${key}`，
转换：（键 === '小时'）？ `rotate(${-15 + degree * 30})` : `rotate(${degrees * 6})`,
持续时间：400，
// 从输入按钮中移除事件监听器，直到动画完成
开始： () => buttons.forEach(button => button.removeEventListener('click', handleClick)),
完成： () => buttons.forEach(button => button.addEventListener('click', handleClick))
}); // 更新匹配范围的文本
const span = document.querySelector(`span.control--${key}`);
span.textContent = zeroPadded(value);
} button.forEach(button => button.addEventListener('click', handleClick));
HTML、CSS 和 JavaScript 代码片段开启， AllWebCodes.com
完毕！享受 受控时钟片段
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明
