【免费】网页版翻页时钟，精美翻页时钟，HTML翻页时钟

共1个文件

html：1个

需积分: 0 8 浏览量 2023-04-06 15:24:41 上传评论收藏 47KB ZIP 举报

网页版翻页时钟是一种基于HTML、CSS和JavaScript技术实现的动态时钟展示方式，它以其独特的翻页动画效果，为网页增添了别致的时间显示功能。这种时钟的设计灵感来源于传统机械翻页钟，每过一分钟，数字就会通过翻页的方式更新，给人一种直观且富有动态美感的时间体验。在HTML翻页时钟的实现中，HTML主要负责构建页面的基本结构，通过`<div>`标签创建时钟的各个组件，如小时、分钟和秒钟的翻页框。每个翻页框内再用更多的HTML元素表示数字，通常是`<span>`标签，通过CSS定位和隐藏/显示来实现翻页动画。 CSS在其中起着美化和布局的作用。通过设置样式，可以控制翻页时钟的外观，比如字体、颜色、大小、边框以及动画效果。CSS3的过渡（transition）和动画（animation）属性是实现翻页动画的关键，它们可以定义元素在特定时间内的状态变化，从而实现数字翻转的效果。此外，CSS还用于设定各个数字的位置，确保翻页时钟的正确对齐和视觉平衡。 JavaScript则是网页版翻页时钟的核心，它负责实时更新时间并驱动翻页动画。通常，会使用`setInterval`函数来定期调用一个更新时间的函数，该函数根据当前系统时间更新HTML元素的内容，并触发CSS动画。JavaScript还需要处理细节，例如确保翻页在正确的时间点发生，以模拟真实翻页钟的流畅感。在名为"flip-clock-master"的压缩包中，可能包含了以下文件和目录： 1. `index.html`: 主要的HTML文件，包含了时钟的基本结构。 2. `style.css`: CSS文件，用于定义翻页时钟的样式和动画效果。 3. `script.js`或`flipclock.js`: JavaScript文件，包含实现翻页时钟逻辑的代码。 4. 可能还有其他辅助文件，如图片资源或字体文件，用于增强时钟的视觉表现。要运行这个网页版翻页时钟，你需要将这些文件放在同一目录下，然后通过Web浏览器打开`index.html`。浏览器将解析HTML，应用CSS，并执行JavaScript，最终呈现出动态翻页的时钟效果。制作一个网页版翻页时钟涉及到前端开发的三个基础技术：HTML、CSS和JavaScript，它们共同协作，让数字以逼真的翻页动画形式在网页上呈现时间的流逝，为用户带来独特的视觉体验。这样的时钟不仅在实用性上满足了查看时间的需求，还在设计上体现了创新和艺术性。

资源推荐

资源详情

资源评论

收起资源包目录

flip-clock-master.zip （1个子文件）

flip-clock-master

index.html 125KB

<!DOCTYPE html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="https://avatar.52pojie.cn/data/avatar/000/82/44/05_avatar_small.jpg"><title>Clock</title><style>.clock{width:240px;height:240px}.clock_canva{width:100%;height:100%}.setbox{width:200px;height:200px}.setbox:hover .pic_set{opacity:1}.set-warp{display:inline-block;padding:20px 20px 12px 24px;margin-top:94px;margin-left:78px}.setting{width:36px;height:36px;padding:8px}.setting:hover>div{transform:rotate(120deg)}.pic_set{width:36px;height:36px;background-image:url("data:image/png;base64,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");transition:all .5s ease-in-out;opacity:0}.set_item{top:-208px;left:-256px;width:432px;height:312px;box-sizing:border-box;border-radius:20px}.set_item,.set_item:before{position:absolute;background-color:#262729;border:1px solid #666}.set_item:before{content:"";bottom:0;right:36px;width:20px;height:20px;border-top-color:transparent;border-left-color:transparent;transform:translateY(50%) rotate(45deg)}.setLoad{display:block!important;visibility:hidden}.slider{position:relative;width:220px;cursor:pointer}.bar-line{left:0;background:-webkit-linear-gradient(#fff,#fff) no-repeat,hsla(0,0%,100%,.25);background-size:0 100%}.bar-line,.bar-line-right{position:absolute;top:50%;transform:translateY(-50%)}.bar-line-right{right:0;background-color:hsla(0,0%,100%,.25)}.bar-handle{position:absolute;top:50%;transform:translateY(-50%);box-sizing:border-box;border:4px solid #fff;background-color:#262729;border-radius:50%;box-shadow:0 0 0 4px #262729}.time-panel-box{height:24px;padding:16px 0;margin-right:4px}.time-panel-box:hover .time-panel{overflow:visible}.time-panel{position:relative;background-color:#666;width:48px;height:24px;border-radius:4px;line-height:24px;text-align:center;overflow:hidden}.panel-down,.panel-up{position:absolute;left:50%;width:100%;transform:translateX(-50%);font-weight:900;cursor:pointer}.panel-down:hover,.panel-up:hover{display:block}.panel-up{top:-100%;background-image:linear-gradient(0deg,rgba(38,39,41,0),#262729 100%)}.panel-down{bottom:-100%;background-image:linear-gradient(180deg,rgba(38,39,41,0),#262729)}.scroll-box{position:relative;top:-16px;height:56px;overflow-y:scroll;color:#fff}.scroll-box::-webkit-scrollbar{display:none}.panel-item:after,.panel-item:before{content:"";display:block;height:16px}body{margin:0}ul{list-style:none}button,ul{margin:0;padding:0}button{border:none;outline-style:none}.bg{position:fixed;top:0;bottom:0;left:0;right:0;background-color:#000}.timer{position:absolute;top:50%;width:100%;transform:translateY(-50%);display:flex;justify-content:space-evenly}.timer_hm{width:47.5vw;height:47.5vw}.timer_hms{width:30vw;height:30vw}.watchBtn{position:absolute;width:100%;height:100%;background-color:hsla(0,0%,100%,.1);text-align:center;opacity:0;transition:all .3s;cursor:pointer}.watchBtn:hover{opacity:1}.watchBtn:active{background-color:hsla(0,0%,100%,0)}.watchBtn>div{position:absolute;left:50%;transform:translate(-50%,-50%)}.watchBtn>div:first-child{font-size:180px;top:46%}.watchBtn>div:last-child{top:90%}.set_box{position:fixed;bottom:0;right:0}.set_box_inner{padding:20px;padding-bottom:0;color:#fff;font-size:18px}.set_box_inner>li{display:flex;align-items:center;margin-bottom:8px}.setName{width:116px;margin-right:12px;text-align:right}.pickItem{display:flex;text-align:center;border-radius:6px;cursor:pointer}.pickItem>li{box-sizing:border-box;width:60px;height:24px;line-height:22px;border:1px solid #666;border-right:0}.pickItem>li:first-child{border-top-left-radius:inherit;border-bottom-left-radius:inherit}.pickItem>li:last-child{border-right:1px solid #666;border-top-right-radius:inherit;border-bottom-right-radius:inherit}.pick-active{color:#333;background-color:#fff}.timerBtn{box-sizing:border-box;width:60px;height:24px;border-radius:4px;margin-right:6px;background-color:#fff;color:#1c1c1c;font-size:16px;cursor:pointer}.timerBtn:active{background-color:#ddd}.startBtn{background-color:#666;color:#fff}.startBtn:active{background-color:#555}.iconCancel,.iconTime,.iconTomato{display:inline-block;width:20px;height:20px;vertical-align:middle;background-size:contain}.iconTime{background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAADTUlEQVRYR8XXR6glVRAG4G/MoCCKKAZMiIJpM+a4EhMqKujCjaPO4AyDCRUDoohgQlTMgmEnKAbEuBJMiIoLc8KAAbOCCbP8j7rSr+d2376+B692955z6vynqv6/qhdZYFu0wPebK4DbsAW+wCd4BC9P86i5AFgLv4257DVcj7vx1yQwcwGwHn7En/gKm7Uuexdn4PE+EPMB4FtshC1xOE7Cbo1Lby0g46LVWQOrYz+80BHm+B9FYASg+dADcRN2qj9fwr74ox2NrghciXNxPq7oCGEfgBzJI67GmXX+Bpw2BMBeeJ6Z6CxHQjjO1sVP+Bob9+T5QlxW60nRY8297QgE9dvYDs9hf/yDTSqvj7YuSqV/hEt6AOSOp5C0vI8dm6loA1iGcPt3bFX8ju99CtB9OBXfTaJXa30bvFdpSUquG623AXyIrXELVrSc5NDp+AYn4+EpQaQo4zM6ses4ANvjnVrYfYyiRXhexQ61555y+MNAIGHVM7U3EUnqZtEwBXcz4nDDyn3b9y4FLGBiX2LJJLGpvWvg+6Jv0phUzwJwOc4rlAf0vOosXNNav7NqYxWet/a9iET3UlzcBnAXTkQK7biBVd3cFu3IA/rsIRyFO3BKG0D+jIzei+MnONoUb2CDxr6ni2p9R+/HMV0AIhYRjSGOcskReLCold9Ruahdnz1bkpy7Luoqwo+LikOKe08chA8QVkS0uiyUTxGuX+wJ1WcVYfgfHYil2l8fgmCKPXuXxOdI1PCtNoD8jkjsjCEFNcXdM1tvx1J8js1Hh9tKmDxmmvm5pDitdj5sW2RASa8Jhc/uArBmaXb6QKRz5TzcnkemAx5SE1R8pxZmbNw8cDCeqPVj8cAcQVyFc8pHROzapr+ugSRpSDp+wQmIgExr8R26XVAHMzEf2WZKF4BofRrHHnU4Q0l4m044xFJk0YSja/MrNeL92j7cN5SuU+FK44glGjfWuD1DoZaF35kbDkXmirVr/clSv5xfxYZMxYcVkLTrkUUj3sRn1d0yxmUAXa2xJ0NN8p0U/N0VtiEAcjb0SaPKQBKR6rNQOIUbWc/XUq8NBdB0srg6Wj5E8lmWr598mn1aY1vmv0lt+T9//wfApEdNtb7gAP4FyRimIUFX3cMAAAAASUVORK5CYII=")}.iconTomato{margin-top:-3px;background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEnElEQVRYR71XbUybVRR+zi2F0Q/o2IBiyYBg1B+6j8QfOpeJoZhFVuzix0wwDHRZYoiBGRJN/CExxj+aAFGXbJoMfmhEMy3r5hLBrBgCxAwzNkeo24BNwY0NKG35avu+17yFt+v315zvz/c85znPOffcc+8lJPlpTzXXu15q74wH13z3dj5TsM+cmStvwHRiORlqSgYkYbTdjdOeyxN71z46dz2aj/aHpj0EnOLOpSlX169TOP/nwWS4k

评论收藏

内容反馈