JavaScript实现时钟效果

最新推荐文章于 2022-02-27 20:31:08 发布

manhoho

最新推荐文章于 2022-02-27 20:31:08 发布

阅读量665

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_45742386/article/details/102682996

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

时钟效果

下面是效果展示：
在这里插入图片描述
项目布局如下：

下面就是大家所关心的代码了

clock.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>时钟</title>
    <script src="js/jquery.js" type="text/javascript"></script>
    <script src="js/clock.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/clock.css" type="text/css">
</head>
<body>
<center>
    <div style="width:150px;height:100px;position:relative;left:58px;top:50px;">
        <!-- 1,2,34,5,6,7,8,9,10,11,12的地位-->
        <div style="top: -49.823px; left: 5.6814px;" id="number1" class="number">1</div>
        <div style="top: -35.2232px; left: 20.5112px;" id="number2" class="number">2</div>
        <div style="top: -15.1496px; left: 25.9997px;" id="number3" class="number">3</div>
        <div style="top: 4.96459px; left: 20.6614px;" id="number4" class="number">4</div>
        <div style="top: 19.6749px; left: 5.94126px;" id="number5" class="number">5</div>
        <div style="top: 24.9996px; left: -14.1765px;" id="number6" class="number">6</div>
        <div style="top: 19.4976px; left: -34.2464px;" id="number7" class="number">7</div>
        <div style="top: 4.65796px; left: -48.8363px;" id="number8" class="number">8</div>
        <div style="top: -15.5025px; left: -53.9968px;" id="number9" class="number">9</div>
        <div style="top: -35.527px; left: -48.3314px;" id="number10" class="number">10</div>
        <div style="top: -49.9953px; left: -33.3734px;" id="number11" class="number">11</div>
        <div style="top: -54.9914px; left: -13.1715px;" id="number12" class="number">12</div>
<!--时针的位置-->
        <div style="top: 0px; left: 0px;" id="hourId1" class="hourClass"></div>
        <div style="top: -7.31095px; left: -3.24807px;" id="hourId2" class="hourClass"></div>
        <div style="top: -14.6219px; left: -6.49614px;" id="hourId3" class="hourClass"></div>
<!--分针的位置-->
        <div style="top: 0px; left: 0px;" id="minuteId1" class="minuteClass"></div>
        <div style="top: -2.46608px; left: 7.61042px;" id="minuteId2" class="minuteClass"></div>
        <div style="top: -4.93215px; left: 15.2208px;" id="minuteId3" class="minuteClass"></div>
        <div style="top: -7.39823px; left: 22.8313px;" id="minuteId4" class="minuteClass"></div>
<!--秒针的位置-->
        <div style="top: 0px; left: 0px;" id="secondId1" class="secondClass"></div>
        <div style="top: -5.35778px; left: -5.94089px;" id="secondId2" class="secondClass"></div>
        <div style="top: -10.7156px; left: -11.8818px;" id="secondId3" class="secondClass"></div>
        <div style="top: -16.0733px; left: -17.8227px;" id="secondId4" class="secondClass"></div>
        <div style="top: -21.4311px; left: -23.7636px;" id="secondId5" class="secondClass"></div>
    </div>
</center>
</body>
</html>

clock.css

div.number, div.hourClass, div.minuteClass, div.secondClass
{
    position:absolute;/*设置数字、时针、分针、秒针的位置*/
    /*将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。*/
}
div.hourClass, div.minuteClass, div.secondClass
{
    width:2px;/* 设置宽*/
    height:2px;/* 设置高*/
    font-size:2px;/* 设置字体大小*/
}
div.number
{
    /*设置1，2，3，4，5，6，7，8，9，10，11，12*/
    width:30px;/* 设置宽*/
    height:30px;/* 设置高*/
    font-family: Calibri;/* 设置字体*/
    font-size:10px;/* 设置字体大小*/
    color:black;/* 设置字体颜色*/
    text-align:center;/* 设置为横向居中*/
    padding-top:10px/*设置上内边距*/
}
div.minuteClass
{
    background:green;/*设置分针的背景颜色*/
}
div.hourClass
{
    background:black;/*设置时针的背景颜色*/
}
div.secondClass
{
    background:red;/*设置秒针的背景颜色*/
}

clock.js

var hourNeedle  = '...';       //时针
var hourNeedle = hourNeedle .split(''); //split() 方法用于把一个字符串分割成字符串数组。
var minuteNeedle = '....';     //分针
var minuteNeedle = minuteNeedle.split('');  //split() 方法用于把一个字符串分割成字符串数组。
var secondNeedle = '.....';    //秒针
var secondNeedle = secondNeedle.split('');  //split() 方法用于把一个字符串分割成字符串数组。
var ypos = 0;
var xpos = 0;
var ybase = 8;
var xbase = 8;
var frequency = 12;

function clock() {
    var time = new Date();
    var seconds = time.getSeconds();   // getSeconds()依据当地时间返回时间秒：
    var second = -1.57 + Math.PI * seconds / 30;  //Math.PI 表示一个圆的周长与直径的比例，约为 3.14159
    var minutes = time.getMinutes();   // getMinutes()依据当地时间返回时间分：
    var minute = -1.57 + Math.PI * minutes / 30;
    var hours = time.getHours();   //getHours() 依据当地时间返回时间时：
    var hour = -1.57 + Math.PI * hours / 6 + Math.PI * parseInt(time.getMinutes()) / 360;   //parseInt() 转换成int类型
    for (i = 0; i < frequency; ++i) {
        //sin() 方法可返回一个数字的正弦。
        //Math.cos() 函数返回一个数值的余弦值
        //"number" + (i + 1)是id
        document.getElementById("number" + (i + 1)).style.top = 0 - 15 + 40 * Math.sin(-0.49 + frequency + i / 1.9).toString() + "px";
        document.getElementById("number" + (i + 1)).style.left = 0 - 14 + 40 * Math.cos(-0.49 + frequency + i / 1.9).toString() + "px";
    }
    //通过for（）进行秒针的移动
    for (i = 0; i < secondNeedle.length; i++) {//"secondId" + (i + 1)是id
        document.getElementById("secondId" + (i + 1)).style.top = ypos + i * ybase * Math.sin(second).toString() + "px";//时针上下移的位置
        document.getElementById("secondId" + (i + 1)).style.left = xpos + i * xbase * Math.cos(second).toString() + "px";//时针左右移的位置
    }
    //通过for（）进行分针的移动
    for (i = 0; i < minuteNeedle.length; i++) {//"minuteId" + (i + 1)是id
        document.getElementById("minuteId" + (i + 1)).style.top = ypos + i * ybase * Math.sin(minute).toString() + "px";//分针上下移的位置
        document.getElementById("minuteId" + (i + 1)).style.left = xpos + i * xbase * Math.cos(minute).toString() + "px";//分针左右移的位置
    }
    //通过for（）进行时针的移动
    for (i = 0; i < hourNeedle .length; i++) {//"hourId" + (i + 1)是id
        document.getElementById("hourId" + (i + 1)).style.top = ypos + i * ybase * Math.sin(hour).toString() + "px";//秒针上下移的位置
        document.getElementById("hourId" + (i + 1)).style.left = xpos + i * xbase * Math.cos(hour).toString() + "px";//秒针左右移的位置
    }
    //setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。
    setTimeout('clock()', 50);
}

// window.onload() 方法用于在网页加载完毕后立刻执行的操作
window.onload = clock;

manhoho

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现时钟效果

时钟效果项目布局如下：下面就是大家所关心的代码了clock.html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>时钟</title> <script src="js/jquery.js" t...
复制链接

扫一扫

专栏目录