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部分
css部分
htmlセクション
目次
構想
ドキドキする心に基づいて、暇な時にjsを利用して書いた時計を書きます.
ソースコード
以下に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>