js实现时钟Clock

js实现时钟Clock

目录

  • js实现时钟Clock
    • 目录
      • 思路
      • 源代码
          • js部分
          • css部分
          • html部分

思路

本着忐忑的心,写下自己在闲时利用js写的一个时钟。

  • Date( ) 获取当前时间
  • getHours( ) 获取当前时
  • getMinutes( ) 获取当前分
  • getSeconds( ) 获取当前秒
  • oHours = (hour + min/60) * 30 将时转换为角度
  • oMin = (min + sec/60) * 6 将分转换为角度
  • oSec = sec * 6 将秒转换为角度
  • 函数 draw(dom, angle) 画出指针

源代码

下面就是利用js实现时钟Clock的源代码:

js部分
function frame() {
    var date = new Date();
    var hour = date.getHours();
    var min = date.getMinutes();
    var sec = date.getSeconds();
    var oHours = (hour + min/60) * 30;
    var oMin = (min + sec/60) * 6;
    var oSec = sec * 6;

    var $sec = document.getElementsByClassName('second')[0];
    var $min = document.getElementsByClassName('minute')[0];
    var $hour = document.getElementsByClassName('hour')[0];

    function draw(dom, angle) {
        dom.style.transform = 'rotate(' + angle + 'deg)';   
    }

    draw($hour, oHours);
    draw($min, oMin);
    draw($sec, oSec);

}
frame();
var timer = setInterval(frame, 1000);
css部分
* {
    padding: 0;
    margin: 0;
}
html {
    font-size: 16px;
}
body {
    font-size: 100%;
}

.outring {
    position: relative;
    margin: 2em auto;
    width: 20em;
    height: 20em;
    border: 8px solid #888;
    border-radius: 20em;
}

.number span {
    width: 10%;
    height: 10%;
    font-size: 1.6em;
}
.nine {
    position: absolute;
    top: 45%;
    left: 3%;
}
.ten {
    position: absolute;
    top: 25.5%;
    left: 9.3%;
}
.eleven {
    position: absolute;
    top: 9.3%;
    left: 24.5%;
}
.twelve {
    position: absolute;
    top: 3%;
    left: 45%;
}
.one {
    position: absolute;
    top: 9.3%;
    right: 23.2%;
}
.two {
    position: absolute;
    top: 25.5%;
    right: 7.3%;

}
.three {
    position: absolute;
    top: 45%;
    right: -2%;
}
.four {
    position: absolute;
    bottom: 25.5%;
    right: 7.3%; 
}
.five {
    position: absolute;
    bottom: 9.3%;
    right: 22.2%;
}
.six {
    position: absolute;
    bottom: 3%;
    right: 42.5%;
}
.seven {
    position: absolute;
    bottom: 9.3%;
    left: 26.5%;
}
.eight {
    position: absolute;
    bottom: 25.5%;
    left: 12.5%;
}

.word {
    position: absolute;
    top: 60%;
    left: 30%;
    height: 10%;
    width: 40%;
    font-size: 0.6em;
    font-family: cursive;
    text-align: center;
}

.point {
    position: absolute;
    top: 48%;
    left: 48%;
    width: 4%;
    height: 4%;
    background-color: black;
    border-radius: 4em;
}
.hour {
    position: absolute;
    top: 20%;
    left: 48.5%;
    width: 3%;
    height: 30%;
    background-color: #888;
    border-radius: 25px;
    transform-origin: center bottom;
/*  transform: rotate(-90deg);*/
}
.minute {
    position: absolute;
    top: 10%;
    left: 49%;
    width: 2%;
    height: 40%;
    background-color: #555;
    border-radius: 25px;
    transform-origin: center bottom;
/*  transform: rotate(-90deg);*/
}
.second {
    position: absolute;
    top: 4%;
    left: 49.5%;
    width: 1%;
    height: 46%;
    background-color: rgb(200,100,100);
    border-radius: 25px;
    transform-origin: center bottom;
/*  transition: all 1s linear;
    transform: rotate(0deg);*/
}
html部分

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/clock.css">

    <title>Clocktitle>
head>
<body>

    <audio autoplay="autoplay" loop>
        <source src="miao.mp3" type="audio/mpeg">
    audio>

    <div class="outring">
        <div class="clock">
            <div class="number">
                <span class="nine">9span>
                <span class="ten">10span>
                <span class="eleven">11span>
                <span class="twelve">12span>
                <span class="one">1span>
                <span class="two">2span>
                <span class="three">3span>
                <span class="four">4span>
                <span class="five">5span>
                <span class="six">6span>
                <span class="seven">7span>
                <span class="eight">8span>
            div>
            <div class="word">Design By Qundiv>
            <div class="hour">div>
            <div class="minute">div>
            <div class="second">div>
            <div class="point">div>
        div>
    div>


    <script type="text/javascript" src="js/clock.js">script>
body>
html>

你可能感兴趣的:(js,前端)