js+css钟表

最新推荐文章于 2024-01-19 17:49:20 发布
最新推荐文章于 2024-01-19 17:49:20 发布
阅读量100 收藏
点赞数
分类专栏： 学习项目 文章标签： javascript css 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dreamimport/article/details/128837297
版权

在这里插入图片描述

20230201-164607

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #watch .frame-face {
            position: relative;
            width: 30em;
            height: 30em;
            margin: 2em auto;
            border-radius: 15em;
            background: -webkit-linear-gradient(top, #f9f9f9, #666);
            background: -moz-linear-gradient(top, #f9f9f9, #666);
            background: linear-gradient(top, #f9f9f9, #666);
            box-shadow: 0.5em 0.5em 4em rgba(0, 0, 0, 0.8);
        }

        #watch .frame-face:before {
            content: '';
            width: 29.4em;
            height: 29.4em;
            border-radius: 14.7em;
            position: absolute;
            top: .3em;
            left: .3em;
            background: -webkit-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
            background: -moz-radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
            background: radial-gradient(ellipse at center, rgba(246, 248, 249, 1) 0%, rgba(229, 235, 238, 1) 65%, rgba(205, 212, 217, 1) 66%, rgba(245, 247, 249, 1) 100%);
        }

        #watch .frame-face:after {
            content: '';
            width: 28em;
            height: 28em;
            border-radius: 14.2em;
            position: absolute;
            top: .9em;
            left: .9em;
            box-shadow: inset rgba(0, 0, 0, .2) .2em .2em 1em;
            border: .1em solid rgba(0, 0, 0, .2);
            background: -webkit-linear-gradient(top, #fff, #ccc);
            background: -moz-linear-gradient(top, #fff, #ccc);
            background: linear-gradient(top, #fff, #ccc);
        }

        #minute-marks li {
            z-index: 10;
            display: block;
            width: 0.2em;
            height: 0.6em;
            background: #929394;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -0.4em 0 0 -0.1em;
        }

        #digits {
            width: 30em;
            height: 30em;
            border-radius: 15em;
            position: absolute;
            top: 0;
            left: 50%;
            margin-left: -16em;
        }

        #digits li {
            font-size: 1.6em;
            display: block;
            width: 1.6em;
            height: 1.6em;
            position: absolute;
            top: 50%;
            left: 50%;
            line-height: 1.6em;
            text-align: center;
            margin: -.8em 0 0 -.8em;
            font-weight: bold;
            z-index: 11;
        }

        #digits li:nth-child(1) {
            transform: translate(7em, -0.5em)
        }

        #digits li:nth-child(2) {
            transform: translate(0, 6.5em)
        }

        #digits li:nth-child(3) {
            transform: translate(-7em, -0.5em)
        }

        #digits li:nth-child(4) {
            transform: translate(0, -7.5em)
        }

        #digits:before {
            content: '';
            width: 1.6em;
            height: 1.6em;
            border-radius: .8em;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -.8em 0 0 -.8em;
            background: #121314;
        }

        #digits:after {
            z-index: 10;
            content: '';
            width: 4em;
            height: 4em;
            border-radius: 2.2em;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: -2.1em 0 0 -2.1em;
            border: .1em solid #c6c6c6;
            background: -webkit-radial-gradient(ellipse at center, rgba(200, 200, 200, 0), rgba(190, 190, 190, 1) 90%, rgba(130, 130, 130, 1) 100%);
            background: -moz-radial-gradient(ellipse at center, rgba(200, 200, 200, 0), rgba(190, 190, 190, 1) 90%, rgba(130, 130, 130, 1) 100%);
            background: radial-gradient(ellipse at center, rgba(200, 200, 200, 0), rgba(190, 190, 190, 1) 90%, rgba(130, 130, 130, 1) 100%);
        }

        #watch .hours-hand {
            width: .8em;
            height: 7em;
            border-radius: 0 0 .9em .9em;
            background: #232425;
            position: absolute;
            z-index: 10;
            bottom: 50%;
            left: 50%;
            margin: 0 0 -.8em -.4em;
            box-shadow: #232425 0 0 2px;
            transform-origin: 0.4em 6.2em;
            transform: rotate(-25deg);
        }

        #watch .hours-hand:before {
            content: '';
            background: inherit;
            width: 1.8em;
            height: .8em;
            border-radius: 0 0 .8em .8em;
            box-shadow: #232425 0 0 1px;
            position: absolute;
            top: -.7em;
            left: -.5em;
        }

        #watch .hours-hand:after {
            content: '';
            width: 0;
            height: 0;
            border: .9em solid #232425;
            border-width: 0 .9em 2.4em .9em;
            border-left-color: transparent;
            border-right-color: transparent;
            position: absolute;
            top: -3.1em;
            left: -.5em;
        }

        #watch .minutes-hand {
            z-index: 10;
            width: .8em;
            height: 12.5em;
            border-radius: .5em;
            background: #343536;
            position: absolute;
            bottom: 50%;
            left: 50%;
            margin: 0 0 -1.5em -.4em;
            box-shadow: #343536 0 0 2px;
            transform-origin: 0.4em 11em;
        }

        #watch .seconds-hand {
            z-index: 10;
            width: .2em;
            height: 14em;
            border-radius: .1em .1em 0 0/10em 10em 0 0;
            background: #c00;
            position: absolute;
            bottom: 50%;
            left: 50%;
            margin: 0 0 -2em -.1em;
            box-shadow: rgba(0, 0, 0, .8) 0 0 .2em;
            transform-origin: 0.1em 12em;
        }

        #watch .seconds-hand:after {
            content: '';
            width: 1.4em;
            height: 1.4em;
            border-radius: .7em;
            background: inherit;
            position: absolute;
            left: -.65em;
            bottom: 1.35em;
        }

        #watch .seconds-hand:before {
            content: '';
            width: .8em;
            height: 3em;
            border-radius: .2em .2em .4em .4em/.2em .2em 2em 2em;
            box-shadow: rgba(0, 0, 0, .8) 0 0 .2em;
            background: inherit;
            position: absolute;
            left: -.35em;
            bottom: -3em;
        }

        #watch .digital-wrap {
            width: 9em;
            height: 3em;
            border: .1em solid #222;
            border-radius: .2em;
            position: absolute;
            top: 50%;
            left: 50%;
            margin: 3em 0 0 -4.5em;
            overflow: hidden;
            background: #4c4c4c;
            background: -webkit-linear-gradient(top, #4c4c4c, #0f0f0f);
            background: -moz-linear-gradient(top, #4c4c4c, #0f0f0f);
            background: -ms-linear-gradient(top, #4c4c4c, #0f0f0f);
            background: -o-linear-gradient(top, #4c4c4c, #0f0f0f);
            background: linear-gradient(to bottom, #4c4c4c, #0f0f0f);
        }

        #watch .digital-wrap ul {
            float: left;
            width: 2.9em;
            height: 3em;
            border-right: .1em solid #000;
            color: #ddd;
            font-family: Consolas, monaco, monospace;
            text-align: center;
            line-height: 3em;
        }

        #watch .digital-wrap ul:last-child {
            width: 3em;
            border: none
        }
    </style>
</head>

<body>
    <div id="watch">
        <!-- 表盘 -->
        <div class="frame-face">
            <!-- 刻度 -->
            <ul id="minute-marks"></ul>
            <!-- 刻度的数字标识 -->
            <ul id="digits">
                <li>3</li>
                <li>6</li>
                <li>9</li>
                <li>12</li>
            </ul>
            <!-- 指针 -->
            <div class="hours-hand"></div>
            <div class="minutes-hand"></div>
            <div class="seconds-hand"></div>
            <!-- 数字表盘 -->
            <div class="digital-wrap">
                <ul class="digit-hours"></ul>
                <ul class="digit-minutes"></ul>
                <ul class="digit-seconds"></ul>
            </div>
        </div>
    </div>
    <script>
        window.onload = function () { // 生成刻度 
            let markWrap = document.getElementById('minute-marks')
            for (let index = 0; index < 60; index++) {
                let markItem = document.createElement('li')
                markItem.style.cssText = `transform:rotate(${index * 6}deg) translateY(-12.7em)`
                if (index % 5 == 0) {
                    markItem.style.width = "0.3em";
                    markItem.style.height = "1em";
                }
                markWrap.appendChild(markItem)
            }
        }
        let clockInstance = new Clock(document.querySelector('.frame-face'))
        function Clock(dom) {
            this.hour = 0
            this.minute = 0
            this.second = 0
            this.htmlDom = 0
            this.renderHTML = function() {
                const hourDom = dom.querySelector('.hours-hand')
                const minuteDom = dom.querySelector('.minutes-hand')
                const secondDom = dom.querySelector('.seconds-hand')
                console.log(this.second, '')
                if(this.second !== 0) {
                    !secondDom.style.transition ? secondDom.style.transition="all 0.1s linear": ''
                } else {
                    secondDom.style.transition=""
                }
                hourDom.style.transform = `rotate(${360 / 12 * this.hour}deg)`
                minuteDom.style.transform = `rotate(${360 / 60 * this.minute}deg)`
                secondDom.style.transform = `rotate(${360 / 60 * this.second}deg)`
            }
        }
        Clock.prototype.setTime = function (hour, minute, second) {
            this.hour =  hour% 12 || new Date().getHours() % 12
            this.minute = minute || new Date().getMinutes()
            this.second = second || new Date().getSeconds()
            this.renderHTML()
        }
        Clock.prototype.run = function() {
            let currentTimeFun = () => {
                this.second = new Date().getSeconds()
                this.minute = new Date().getMinutes() + parseInt(this.second / 60 * 100) / 100
                this.hour = new Date().getHours() + parseInt( this.minute / 60 * 100) / 100
                console.log(this.hour, this.minute)
                clockInstance.setTime(this.hour, this.minute)
                setTimeout(() => {
                    currentTimeFun()
                }, 1000)
            } 
            currentTimeFun()
        }
        clockInstance.setTime(18, 24, 38)
        clockInstance.run()
    </script>
</body>

</html>
dreamimport
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS与JS结合完成时钟
lbb111111的博客
09-09 316
通过css与js结合完成时钟，这个时钟显示的是当前的时间，实现的效果是秒针每一秒走一格，即6弧度；分针每一分走一格，即6弧度；时针每10分钟走一格，即一小时旋转30弧度。 效果图如下： 1.Html部分：在html里面写出时钟结构，分别写出时钟的时针、分针和秒针。里面的ul是为了实现钟表上的秒针的指向，秒针每走过一个小方格就是一秒。代码如下： <div id="time"> <ul> </ul> &...
JS+CSS3实现的简易钟表效果示例
10-17
主要介绍了JS+CSS3实现的简易钟表效果,涉及JavaScript结合定时器的页面元素动态设置与数值计算相关操作技巧,需要的朋友可以参考下
CSS+JS实现简单的时钟
willsion_liu的博客
07-08 1048
之前在网站上看到过别人用几行CSS代码就实现了一个简单的时钟，感觉挺有趣的，就自己仿照着也实现了一下。感觉里面用到的知识点都挺适合新手学习的，所以贴出来和大家一起学习学习。下面是实现后的效果图。实现的原理很简单，但是里面也有些需要注意的地方。首先看HTML结构，整个时钟包含在一个div中，在父div中又包含了时钟的圆盘，时钟的各个指针。<body> <div id="circle">
利用HTML+CSS+JS打造炫酷时钟网页的完整指南
最新发布
奇遇少年
01-19 2662
如何使用HTML、CSS和JavaScript来创建一个炫酷的时钟网页。
[HTML]时钟
weixin_30634661的博客
07-05 136
<div class="clock" id="clock"> <!-- 原点 --> <div class="origin"></div> <!-- 时分秒针 --> <div class="clock-line hour-line" id="hour-line"></div> ...
html+css+js 动态时钟
热门推荐
chenxi1025的博客
07-13 1万+
今天我在学习css3的时候，无意间在一个博客好友的文章里看见咯一个纯代码写出的动态时钟，我觉得很有确，我就试着按照他的思路分析自己写咯一个， 不过我写的和他写的还是有区别的，他的好些元素是用js创建的，而我的是直接在html代码里面添加的，练习的过程中，我把以前我不懂怎样使用原型平均分裂div学习到咯，代码如下：  var radius = 180;//大圆半价     var
JavaScript 30 原生项目练习 - html+css+js 实现钟表
yss778的博客
08-03 503
学习基础三件套可以实现的效果-钟表制作，适合新手，培养编程的思维和练习。
JS+CSS 钟表
weixin_30808575的博客
12-06 59
.<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #wrap{ width: 580px; height: 580px; ...
HTML+CSS+JS实现 实时动态钟表
rh1289583756的博客
09-08 538
实现简易 实时时钟效果
使用js+css 实现钟表的功能
10-12
使用js+css 实现钟表的功能简单的一个小例子 大家可以下下下来学习学习 也有博客大家可以参考 http://blog.csdn.net/caofeilong20941/article/details/40026251 大家 共同学习啊
js+css3实现的米老鼠时钟动画效果特效代码
03-20
这是一款基于js+css3实现的米老鼠时钟动画效果源码。画面上米老鼠的双手分别指向时针与分针，且指向分针的手呈动画伸缩效果。动画效果平滑自然。是一款非常经典的JS动画特效源码。该源码兼容目前最新的各类主流...
html+css+js实现时钟
04-14
内容概要：通过html+css2D变换属性绘制时钟表盘，并通过js时间函数获取北京时间并实时更新； 核心内容：css的2d变换、定位；js时间函数。 能学到什么：定位的巧妙应用 阅读建议：本资源原理较为简单，适合初学者借鉴...
点击input框时改变边框颜色和占位符字体颜色
dreamimport的博客
03-17 1894
<input type="text" name="" class="" placeholder="请填写您的姓名"> <input type="text" name="" class="" placeholder="请填写手机号码"> .info_contents_5 .info_con_padding input{ width: 100%; ...
React 中解决组件之间的样式覆盖---CSS IN JS
dreamimport的博客
03-10 1791
推荐使用：CSS Modules （React脚手架已集成，可以直接使用）
使用js写的一个随机分组
dreamimport的博客
02-23 1378
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> body{ width: 100%; ..
用JavaScript写的一个录屏功能简直太香
dreamimport的博客
11-12 1112
用JavaScript写的一个录屏功能简直太香使用JavaScript的API mediaDevices 实现录屏功能，亲测有效直接贴代码 使用JavaScript的API mediaDevices 实现录屏功能，亲测有效 这个不是本人写的，是看了Sunshine_Lin 的文章，发现这么好玩的功能的 直接贴代码 index.html <!DOCTYPE html> <html> <head> <title>录屏功能</title
小程序原生项目搭建
dreamimport的博客
02-25 1026
1.打开微信开发者工具，选择新建项目，填写项目名称，选择目录，填写APPID，其他默认，点击新建。创建完成后，删除 默认页面，app.json页面下的pages里内容清空。 2.重构app.json文件 { "pages": [ "pages/home/home", "pages/cates/cates", "pages/search/sea...
Node.js学习项目---多人博客系统
dreamimport的博客
09-21 966
Node.js学习项目—多人博客系统 初始化准备 1.文件夹初始化 项目名称blog public文件夹–放置静态资源 router文件夹–放置路由功能文件 views文件夹–放置所需模板文件 model文件夹–放置数据库所需文件 2. 打开命令行，开启数据库服务 并创建package.json文件–存储所需下载的包和模块 npm install init-y //先下载所需的 npm inst...
html+js+css+echarts
12-27
JS是JavaScript，用于网页交互和动态效果；CSS是层叠样式表，用于控制网页外观和布局；ECharts是百度开发的一个数据可视化库，用于展示各种图表和图形。 HTML用于创建网页的基本结构和内容，可以通过标签、元素和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值