clock (hands)
HTML架構如下(html structure):
css定位如下(number定位放在 jq )
set position:
jq語法如下:
以上為直線思考
數字定位你也可以這樣做:
css基本上沒變
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
上述置中可以省去因width和height的位置誤差
以下jq:
<div class="clock">
<div class="centerDot"></div>
<div class="secHand"></div>
<div class="minuHand"></div>
<div class="hourHand"></div>
<div class="number1 number">1</div>
<div class="number2 number">2</div>
<div class="number3 number">3</div>
<div class="number4 number">4</div>
<div class="number5 number">5</div>
<div class="number6 number">6</div>
<div class="number7 number">7</div>
<div class="number8 number">8</div>
<div class="number9 number">9</div>
<div class="number10 number">10</div>
<div class="number11 number">11</div>
<div class="number12 number">12</div>
</div>
<div class="centerDot"></div>
<div class="secHand"></div>
<div class="minuHand"></div>
<div class="hourHand"></div>
<div class="number1 number">1</div>
<div class="number2 number">2</div>
<div class="number3 number">3</div>
<div class="number4 number">4</div>
<div class="number5 number">5</div>
<div class="number6 number">6</div>
<div class="number7 number">7</div>
<div class="number8 number">8</div>
<div class="number9 number">9</div>
<div class="number10 number">10</div>
<div class="number11 number">11</div>
<div class="number12 number">12</div>
</div>
css定位如下(number定位放在 jq )
set position:
.clock {
position: relative;
border-radius: 50%;
width: 500px;
height: 500px;
background-color: #cba;
}
.centerDot {
position: absolute;
width: 30px;
height: 30px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #c61;
border-radius: 50%;
z-index: 11;
}
.secHand, .minuHand, .hourHand {
position: absolute;
width: 10px;
left: 0;
right: 0;
top: 0;
margin: auto;
transform-origin: center bottom;
box-shadow: 0px 0px 6px #666;
border-radius: 50% 50% 0% 0%;
}
.secHand {
width: 5px;
background-color: #ddd;
border: 1px solid #666;
height: 45%;
bottom: 45%;
z-index: 10;
}
.minuHand {
background-color: #fa2;
height: 35%;
bottom: 35%;
}
.hourHand {
background-color: #e11;
height: 20%;
bottom: 20%;
}
.number {
position: absolute;
width: 20px;
height: 20px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 18px;
}
position: relative;
border-radius: 50%;
width: 500px;
height: 500px;
background-color: #cba;
}
.centerDot {
position: absolute;
width: 30px;
height: 30px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
background-color: #c61;
border-radius: 50%;
z-index: 11;
}
.secHand, .minuHand, .hourHand {
position: absolute;
width: 10px;
left: 0;
right: 0;
top: 0;
margin: auto;
transform-origin: center bottom;
box-shadow: 0px 0px 6px #666;
border-radius: 50% 50% 0% 0%;
}
.secHand {
width: 5px;
background-color: #ddd;
border: 1px solid #666;
height: 45%;
bottom: 45%;
z-index: 10;
}
.minuHand {
background-color: #fa2;
height: 35%;
bottom: 35%;
}
.hourHand {
background-color: #e11;
height: 20%;
bottom: 20%;
}
.number {
position: absolute;
width: 20px;
height: 20px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 18px;
}
jq語法如下:
//秒針
function secMove() {
var seconds = new Date().getSeconds();
var secDegree = seconds * 6;
var miniSecond = new Date().getMilliseconds();
var miniDegree = miniSecond * 6 / 1000;
var secRotate = "rotate(" + (secDegree + miniDegree) + "deg)";
//分針
function minuMove() {
var minutes = new Date().getMinutes();
var minuDegree = minutes * 6;
var minuRotate = "rotate(" + minuDegree + "deg)";
//時針
function hourMove() {
var minutes = new Date().getMinutes();
var hours = new Date().getHours();
var hourDegree = hours * 30 + minutes / 2; //每一分鐘 角度多0.5度
var hourRotate = "rotate(" + hourDegree + "deg)";
//*********************
// 以下數字定位
//*********************
var x1 = Math.sin(Math.PI / 3) * 450; //450為圓半徑的90%
var x2 = Math.cos(Math.PI / 3) * 450;
var x3 = Math.sin(Math.PI / 6) * 450;
var x4 = Math.cos(Math.PI / 6) * 450;
function secMove() {
var seconds = new Date().getSeconds();
var secDegree = seconds * 6;
var miniSecond = new Date().getMilliseconds();
var miniDegree = miniSecond * 6 / 1000;
var secRotate = "rotate(" + (secDegree + miniDegree) + "deg)";
$('.secHand').css({ "transform": secRotate });
setTimeout( secMove, 100 ); //10FPS
}
secMove();
var minutes = new Date().getMinutes();
var minuDegree = minutes * 6;
var minuRotate = "rotate(" + minuDegree + "deg)";
$('.minuHand').css({ "transform": minuRotate });
setTimeout( minuMove, 1000 );
}
minuMove();
var minutes = new Date().getMinutes();
var hours = new Date().getHours();
var hourDegree = hours * 30 + minutes / 2; //每一分鐘 角度多0.5度
var hourRotate = "rotate(" + hourDegree + "deg)";
$('.hourHand').css({ "transform": hourRotate });
setTimeout( hourMove, 1000 );
}
hourMove();
// 以下數字定位
//*********************
var x1 = Math.sin(Math.PI / 3) * 450; //450為圓半徑的90%
var x2 = Math.cos(Math.PI / 3) * 450;
var x3 = Math.sin(Math.PI / 6) * 450;
var x4 = Math.cos(Math.PI / 6) * 450;
$('.number1').css({'bottom': x1,'left': x2});
$('.number2').css({'bottom': x3,'left': x4});
$('.number3').css({'left': 450});
$('.number4').css({'top': x3,'left': x4});
$('.number5').css({'top': x1,'left': x2});
$('.number6').css({'top': 450});
$('.number7').css({'top': x1,'right': x2});
$('.number8').css({'top': x3,'right': x4});
$('.number9').css({'right': 450});
$('.number10').css({'bottom': x3,'right': x4});
$('.number11').css({'bottom': x1,'right': x2});
$('.number12').css({'bottom': 450,'left': 9}); //9是文字size的誤差以上為直線思考
數字定位你也可以這樣做:
<div class="clock">
<div class="centerDot"></div>
<div class="secHand"></div>
<div class="minuHand"></div>
<div class="hourHand"></div>
</div>
稍後用jq去加.number的div<div class="centerDot"></div>
<div class="secHand"></div>
<div class="minuHand"></div>
<div class="hourHand"></div>
</div>
css基本上沒變
.number {
position: absolute;
width: 20px;
height: 20px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 18px;
text-align: center;
}
position: absolute;
width: 20px;
height: 20px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
font-size: 18px;
text-align: center;
}
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
上述置中可以省去因width和height的位置誤差
以下jq:
var degr = Math.PI / 6 ; //單位角度30度
var number ,i ,x ,y ;
for( i =1; i<13; i++){
number = $('<div class="number"></div>');
x = 450 * Math.sin( degr * i ); //水平位移
y = 450 * Math.cos( degr * i ); //垂直位移
number.css({ left : x , 'bottom' : y});
$('.clock').append( number );
var number ,i ,x ,y ;
number = $('<div class="number"></div>');
x = 450 * Math.sin( degr * i ); //水平位移
y = 450 * Math.cos( degr * i ); //垂直位移
number.css({ left : x , 'bottom' : y});
number.text(i);
}
留言
張貼留言