教你五步制作精美的HTML时钟

学了一段时间的HTML、CSS和JS后,给大家做一款漂亮的不像实力派的HTML时钟,先看图:


涉及到的知识点有: CSS3动画、DOM操作、定时器、圆点坐标的计算(好多人是不是已经还给自己的老师了~)
 接下来,我们用5步来制作它

 

step1、准备HTML

首先,我们需要准备HTML结构,背景、表盘、指针(时针、分针、秒针)、数字。

<div id="clock">
    <div class="bg">
        <div class="point">
            <div id="hour"></div>
            <div id="minute"></div>
            <div id="second"></div>
            <div class="circle"></div>
        </div>
    </div>
< /div>

step2、准备CSS

定义好指针的颜色和大小,需要说明的是transform: rotate(-90deg); 用来旋转指针,transform-origin:0 6px; 用来设置旋转中心点。
<style>
    *{
        margin: 0;
        padding: 0;
    }
    #clock{
        margin: 5% auto;
        width: 400px;
        height: 400px;
        border-radius: 10px;
        background: #aaa;
        position: relative;
        transform: rotate(-90deg);
    }
    #clock .bg{
        width: 360px;
        height: 360px;
        border-radius: 50%;
        background: #fff;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -180px;
        margin-top: -180px;
    }
    #clock .point{
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -14px;
        margin-top: -14px;
    }
    #clock #hour{
        width: 80px;
        height: 16px;
        background: #000;
        margin: 6px 0 0 14px;
        /*transform: rotate(30deg);*/
        transform-origin:0 8px;
        /*animation: hour 3s linear 100!* alternate*!;*/
        border-radius: 16px;
    }

    #clock #minute{
        width: 120px;
        height: 12px;
        background: #000;
        margin: -14px 0 0 14px;
        transform-origin:0 6px;
        border-radius: 12px;
    }
    #clock #second{
        width: 160px;
        height: 6px;
        background: #f00;
        margin: -9px 0 0 14px;
        transform-origin:0 3px;
        border-radius: 6px;
    }
    #clock .point .circle{
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: #000;
        position: absolute;
        left: 0;
        top: 0;
    }
    @keyframes hour {
        from {transform: rotate(0deg);}
        to {transform: rotate(360deg);}
    }

    #clock .number{
        position: absolute;
        font-size: 34px;
        width: 50px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        transform: rotate(90deg);
    }
< /style>

step3、计算时针位置

JS通过Date对象获取当前时间,getHours获取小时、getMinutes获取分钟、getSeconds获取秒。时针转动一周是12格,每格角度就是360°/12,分钟和秒都是60格,每格角度360°/60。
function clock(){
    var date = new Date();//获取当前时间
    //时(0-23) 分(0-59)秒(0-59)
    //计算转动角度
    var hourDeg = date.getHours()*360/12;
    var minuteDeg = date.getMinutes()*360/60;
    var secondDeg = date.getSeconds()*360/60;
    //console.log(hourDeg, minuteDeg, secondDeg);
    //设置指针
    hour.style.transform = 'rotate('+hourDeg+'deg)';
    minute.style.transform = 'rotate('+minuteDeg+'deg)';
    second.style.transform = 'rotate('+secondDeg+'deg)';
}

step4、时钟转动

通过setInterval设置定时器,每秒刷新一次。注意,需要初始化执行一次,否则会在1s后才能看到效果。
//初始化执行一次
clock();
setInterval(clock,1000);

step5、绘制数字时间

数字时间也是在一个圆周上,我们只用确定好半径,然后得到半径上的坐标。通过左边来定位每个数字就好了。看一下圆坐标系的计算规则:


 
* 圆半径坐标计算:
* x = pointX + r*cos(angle);
* y = pointY + r*sin(angle);
但是注意,我们计算的坐标是圆弧上点的坐标,当定位每个数字时,都是以元素的左上角点进行定位,这样我们的数字就会存在偏移。也就是说数字的中心点不在圆弧上,解决办法就是把坐标点(x,y)平移自身的一半(x-w/2, y-h/2)
,这样数字的中心点就在圆弧上了。
var pointX = 200;
var pointY = 200;
var r = 150;
function drawNumber(){
    var deg = Math.PI*2/12;//360°
    for (var i = 1; i <= 12; i++) {
        //计算每格的角度
        var angle = deg*i;
        //计算圆上的坐标
        var x = pointX + r*Math.cos(angle);
        var y = pointY + r*Math.sin(angle);
        //创建div,写入数字
        var number = document.createElement('div');
        number.className = 'number';
        number.innerHTML = i;
        //减去自身的一半, 让div的中心点在圆弧上
        number.style.left = x - 25 + 'px';
        number.style.top = y - 25  + 'px';
        //添加到页面
        myClock.appendChild(number);
    }
}
完整JS代码:
<script>
    /***
     * 时钟:
     * 1> 旋转: rotate(90deg)
     * 2> 旋转中心点: transform-origin
     * */
    //TODO step1: 获取时钟的指针
    var hour = document.getElementById('hour');//时针
    var minute = document.getElementById('minute');//分针
    var second = document.getElementById('second');//秒针
    var myClock = document.getElementById('clock');//时钟

    //TODO step2: 获取当前时间,把指针放在正确的位置
    function clock(){
        var date = new Date();//获取当前时间
        //时(0-23) 分(0-59)秒(0-59)
        //计算转动角度
        var hourDeg = date.getHours()*360/12;
        var minuteDeg = date.getMinutes()*360/60;
        var secondDeg = date.getSeconds()*360/60;
        //console.log(hourDeg, minuteDeg, secondDeg);
        //设置指针
        hour.style.transform = 'rotate('+hourDeg+'deg)';
        minute.style.transform = 'rotate('+minuteDeg+'deg)';
        second.style.transform = 'rotate('+secondDeg+'deg)';
    }
    //初始化执行一次
    clock();
    //TODO step3: 设置定时器
    setInterval(clock,1000);

    /***
     * 圆半径坐标计算:
     * x = pointX + r*cos(angle);
     * y = pointY + r*sin(angle);
     * */
    var pointX = 200;
    var pointY = 200;
    var r = 150;
    //TODO step4: 画时钟数字
    function drawNumber(){
        var deg = Math.PI*2/12;//360°
        for (var i = 1; i <= 12; i++) {
            //计算每格的角度
            var angle = deg*i;
            //计算圆上的坐标
            var x = pointX + r*Math.cos(angle);
            var y = pointY + r*Math.sin(angle);
            //创建div,写入数字
            var number = document.createElement('div');
            number.className = 'number';
            number.innerHTML = i;
            //减去自身的一半, 让div的中心点在圆弧上
            number.style.left = x - 25 + 'px';
            number.style.top = y - 25  + 'px';
            //添加到页面
            myClock.appendChild(number);
        }
    }
    drawNumber();
< /script>

怎么样,会了吗?

转载于:https://www.cnblogs.com/shsxt/p/7852477.html

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: HTML制作抖音罗盘时钟可以通过以下步骤实现: 1. 首先,在HTML文档中增加一个canvas标签,设定其宽度和高度。 2. 在JavaScript中编写函数来绘制罗盘外框和表盘刻度。罗盘外框可以使用arc()方法绘制,表盘刻度可以使用rotate()方法旋转canvas并使用线条或文字绘制。 3. 编写函数来计算罗盘指针的位置,可以使用Date对象获取当前时间,通过计算角度来确定指针位置。 4. 定时调用指针位置计算函数并清除canvas,重新绘制罗盘外框和表盘刻度,以及指针位置。 5. 可以添加CSS样式来美化罗盘时钟的外观,例如设置背景颜色、字体样式和字号等。 通过以上步骤,我们可以实现一个简单的抖音罗盘时钟效果。随着对canvas和JavaScript的深入理解,还可以添加更多自定义功能,例如设置动态背景、添加闹钟功能等,以适应不同的需求。 ### 回答2: HTML制作抖音罗盘时钟的主要思路是将罗盘时钟分为两个部分:一个是罗盘指针,另一个时钟刻度。其中罗盘指针包括罗盘底盘和指针本身,时钟刻度则是在罗盘底盘外部绕行的刻度线。 首先,我们需要将罗盘时钟放置在一个html页面中的canvas元素上,这个canvas元素作为整个罗盘的基座,罗盘指针和时钟刻度都是在这个canvas元素上进行绘制的。 接着,我们需要用JavaScript代码来控制罗盘指针和时钟刻度的运动。具体地,我们可以定义一个函数用于获取当前时间,并将其转换为具体的度数。这个度数可以用来控制罗盘指针和时钟刻度的旋转。 然后,我们可以使用canvas元素提供的API来绘制罗盘底盘、指针和刻度线。对于罗盘底盘和指针,我们可以分别使用canvas的圆形和路径绘制方法来实现。对于刻度线,我们可以使用canvas的线性绘制方法,通过旋转画布的方式让刻度线绕着罗盘底盘外部旋转。 最后,我们需要使用定时器来控制罗盘指针和时钟刻度的持续运动。在每个定时周期内,我们可以调用前面定义的时间获取函数,计算出新的罗盘指针和时钟刻度应该旋转的度数,并通过canvas的API来重新绘制罗盘时钟即可。 综上所述,通过HTML和JavaScript的结合,我们可以实现抖音罗盘时钟制作。这不仅可以作为一个有趣的网页小玩意儿来提升页面的趣味性,还可以为我们展示HTML和JavaScript的动态图像处理能力。 ### 回答3: 抖音罗盘时钟是一款很有趣的应用,许多人都想学习如何制作它。HTML是一种非常适合制作网页的语言,它可以将网页中的内容和效果呈现得十分生动。下面我将详细介绍一下HTML制作抖音罗盘时钟的步骤。 首先,我们需要新建一个HTML文件,并在文件中添加必要的HTML代码。接着,我们需要定义页面中的样式,包括字体、颜色、大小等等。然后,我们需要添加JS代码实现罗盘的效果。在JS中,我们需要计算罗盘指针的角度,以及每秒钟指针需要旋转的角度。 在计算角度时,我们需要使用Math库中的sin和cos函数,以及一个时间变量。通过不断更新时间变量,我们可以得到一个不断变化的角度值,并将其应用于罗盘指针。在每秒钟定时器中,我们需要更新罗盘指针的旋转角度,并将其应用于页面元素。 最后,为了让罗盘时钟更加生动,我们还可以添加动画效果和音效。 总体来说,制作抖音罗盘时钟需要掌握HTMLCSS和JavaScript的基础知识,需要花费一定的时间和精力。但是,一旦制作完成,可以得到一个非常有趣的网页应用,让人们可以在休闲时间里玩耍和娱乐。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值