JavaScript는 'Creative Clock' 프로젝트를 구현합니다.
- 一个新手원래의
- 2018-05-30 14:36:522206검색
"시계 디스플레이 프로젝트" 설명 문서(문서끝에 해당 코드 포함)
1. 최종 효과 표시:
2. 프로젝트 하이라이트
1. 명확하고 명확함
2. 현재 시간과 현재 날짜를 실시간으로 동적으로 표시할 수 있음
3. 인터페이스가 간단하고 아름답고 넉넉함
4. 브라우저 호환성 향상
3. 요약 지식 포인트:
jQuery, 네이티브 자바스크립트, css3, h5
네. 중요하고 어려운 점에 대한 설명
1. 각 포인터의 회전 각도를 구하려면
먼저 다음 개념을 명확히 해야 합니다.
시계 포인터는 원을 그리며 360도 회전합니다
시침:
다이얼에는 총 12시간이 있으며, 1시간이 지날 때마다 30도 회전합니다.
분침:
다이얼에는 60개의 작은 그리드가 있습니다. 분침이 작은 그리드를 지나갈 때마다 6도 회전합니다.
초침:
다이얼에는 1분마다 60개의 작은 그리드가 있습니다. 초침은 작은 격자를 통해 움직이며 6도 회전합니다.
(1) 현재 시간 얻기
예를 들어보세요(시침 회전 각도 계산을 예로 들어): 예 , 현재 시간은 9시 28분입니다.
시침은 9시에서 10시 사이여야 하며, 
메소드를 통해서만 시간을 얻을 수 있으므로 현재 시간을 구하는 것이 필요합니다. 현재 분을 사용하여 시침의 회전 각도를 더 잘 결정하기 위해 다음과 같이 합니다.
(2) 회전 각도 구하기
시침은 매 시간마다 30도씩 회전하므로 회전 각도는
마찬가지로 분침과 초침의 회전 각도는 다음과 같습니다.
분침:
초침:
In 시계를 더 정확하게 만들기 위해 여기에 정확도가 있습니다.
(3) 실행 주파수, 즉 초침 회전 주파수 제어
함수의 실행 시간 간격을 조정하면 초침 회전 주파수가 변경될 수 있습니다. .
5. 최적화할 프로젝트 영역
1. 페이지가 너무 단순하여 추가적인 최적화와 개선이 필요합니다.
2. 그림을 그릴 때 시계에 분과 초를 그릴 시간이 없습니다.
6. 프로젝트의 각 부분에 대한 코드
1.HTML 코드
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery指针时钟（附带日期）</title>
<!--引入外部css样式-->
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
</head>
<body>
<!--引入jQuery库文件-->
<script src="js/jquery-1.6.2.min.js"></script>
<!--引入外部js文件-->
<script src="js/script.js"></script>
<p style="text-align:center;clear:both">
</p>
</body>
</html>2.css 코드
*
{
margin:0;
padding:0;
}
body
{
background:#f9f9f9;
color:#000;
font:15px Calibri, Arial, sans-serif;
text-shadow:1px 2px 1px #FFFFFF;
}
a,
a:visited
{
text-decoration:none;
outline:none;
color:#fff;
}
a:hover
{
text-decoration:underline;
color:#ddd;
}
/*the footer （尾部）*/
footer
{
background:#444 url("../images/bg-footer.png") repeat;
position:fixed;
width:100%;
height:70px;
bottom:0;
left:0;
color:#fff;
text-shadow:2px 2px #000;
/*提高浏览器的兼容性*/
-moz-box-shadow:5px 1px 10px #000;
-webkit-box-shadow:5px 1px 10px #000;
box-shadow:5px 1px 10px #000;
}
footer h1
{
font:25px/26px Acens;
font-weight:normal;
left:50%;
margin:0px 0 0 150px;
padding:25px 0;
position:relative;
width:400px;
}
footer a.orig,
a.orig:visited
{
background:url("../images/demo2.png") no-repeat right top;
border:none;
text-decoration:none;
color:#FCFCFC;
font-size:14px;
height:70px;
left:50%;
line-height:50px;
margin:12px 0 0 -400px;
position:absolute;
top:0;
width:250px;
}
/*styling for the clock（时钟样式）*/
#clock
{
position: relative;
width: 600px;
height: 600px;
list-style: none;
margin: 20px auto;
background: url('../images/clock.png') no-repeat center;
}
#seconds,
#minutes,
#hours
{
position: absolute;
width: 30px;
height: 580px;
left: 270px;
}
#date
{
position: absolute;
top: 365px;
color: #666;
right: 140px;
font-weight: bold;
letter-spacing: 3px;
font-family: "微软雅黑";
font-size: 30px;
line-height: 36px;
}
#hours
{
background: url('../images/hands.png') no-repeat left;
z-index: 1000;
}
#minutes
{
background: url('../images/hands.png') no-repeat center;
width:25px;
z-index: 2000;
}
#seconds
{
background: url('../images/hands.png') no-repeat right;
z-index: 3000;
}코드 보기
3. js 코드
(1) js 참조 패키지를 다운로드해야 합니다(Baidu 또는 Google에서 알 수 있음)
(2) js 코드
$(document).ready(function () {
//动态插入HTML代码，标记时钟
var clock = [
'<ul id="clock">',
'<li id="date"></li>',
'<li id="seconds"></li>',
'<li id="hours"></li>',
'<li id="minutes"></li>',
'</ul>'].join('');
// 逐渐显示时钟，并把它附加到主页面中
$(clock).fadeIn().appendTo('body');
//每一秒钟更新时钟视图的自动执行函数
//也可以使用此方法： setInterval (function Clock (){})();
(function Clock() {
//得到日期和时间
var date = new Date().getDate(), //得到当前日期
hours = new Date().getHours(), //得到当前小时
minutes = new Date().getMinutes(); //得到当前分钟
seconds = new Date().getSeconds(), //得到当前秒
ms = new Date().getMilliseconds();//得到当前毫秒
//将当前日期显示在时钟上
$("#date").html(date);
//获取当前秒数，确定秒针位置
var srotate = seconds + ms / 1000;
$("#seconds").css({
//确定旋转角度
'transform': 'rotate(' + srotate * 6 + 'deg)',
});
//获取当前分钟数，得到分针位置
var mrotate = minutes + srotate / 60;
$("#minutes").css({
'transform': 'rotate(' + mrotate * 6 + 'deg)',
//提高浏览器的兼容性
'-moz-transform': 'rotate(' + mrotate * 6 + 'deg)',
'-webkit-transform': 'rotate(' + mrotate * 6 + 'deg)'
});
//获取当前小时，得到时针位置
var hrotate = hours % 12 + (minutes / 60);
$("#hours").css({
'transform': 'rotate(' + hrotate * 30 + 'deg)',
//提高浏览器的兼容性
'-moz-transform': 'rotate(' + hrotate * 30 + 'deg)',
'-webkit-transform': 'rotate(' + hrotate * 30 + 'deg)'
});
//每一秒后执行一次时钟函数
setTimeout(Clock, 1000);
})();
});4. 일부 필수 그림 자료(c는 나열되거나 표시되지 않습니다. 여기에서 하나씩)
Notes:
1.Transform 속성
2.rotate() 메서드
위 내용은 JavaScript는 'Creative Clock' 프로젝트를 구현합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!