JavaScript 의 창의 적 인 시계 항목(인 스 턴 스 설명)

7724 단어 JavaScript창의 시계
"시계 전시 항목"설명 문서(문서 끝부분 에 해당 하 는 코드 가 첨부 되 어 있 음)
1.최종 효과 전시:

2.프로젝트 하 이 라이트
1.코드 구조 가 명료 하 다

2.현재 시간 과 현재 날 짜 를 실시 간 으로 동적 으로 표시 할 수 있 습 니 다.
3.화면 이 간결 하고 아름 다 우 며 대범 하 다
4.브 라 우 저 호환성 향상

3.지식 집합:
jQuery,원생 javascript,css 3,h5
4.어 려 운 해석
1.각 포인터 의 회전 각도 획득
먼저 다음 과 같은 개념 을 명 확 히 해 야 한다.
시계 바늘 이 일주일 에 360 도 회전 하 다.
시계 바늘:
시계 판 에는 모두 12 시간 이 있 는데 한 시간 이 지나 면 30 도 회전 해 야 한다.
분침:
시계 판 에는 모두 60 개의 작은 칸 이 있 고 분침 은 1 분 마다 작은 칸 을 지나 6 도 를 돈다.
초침:
시계 판 에는 모두 60 개의 작은 칸 이 있 고 초침 은 1 분 마다 걸 으 며 작은 칸 을 지나 도 6 도 회전한다.
(1)현재 시간의 획득

예 를 들 어(시침 회전 각도 로 계산 하면):예 를 들 어 현재 시간 은 9:28 이다.
시침 은 9 와 10 사이 에 있어 야 하 며,4.567916 방식 으로 는 정각 만 얻 을 수 있 기 때문에 현재 의 시간 도 얻 고 현재 의 분 도 얻 어야 한다.그래 야 시침 의 회전 각 도 를 더욱 잘 확인 할 수 있다.즉,다음 과 같은 방식 이다.

(2)회전 각도 획득
시계 바늘 이 한 시간 마다 30 도 회전 하기 때문에 시계 바늘 회전 각 도 는 다음 과 같 습 니 다.

마찬가지 로 분침 과 초침 의 회전 각 도 는 다음 과 같다.
분침:

초침:

시 계 를 더욱 정확하게 하기 위해 서 여 기 는 밀리초 까지 정확 하 다.
(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" rel="external nofollow" 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>
 <div style="text-align:center;clear:both">
 </div>
</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 인용 패 키 지 를 다운로드 해 야 한다(바 이 두 나 구 글 은 한 번 에 알 수 있다)
(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.여기 서 일일이 열거 하거나 전시 하지 않 음)
설명:
1.Transform 속성

2.rotate()방법

이상 의 이 자 바스 크 립 트 의 창의 적 인 시계 프로젝트(실례 설명)는 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.여러분 에 게 참고 가 되 고 여러분 들 이 저 희 를 많이 지지 해 주시 기 바 랍 니 다.
tensorflow 는 이미지 의 재단 과 충전 방법 을 실현 합 니 다.
Vue 2.0+Element UI 가 표 페이지 를 넘 기 는 인 스 턴 스 를 실현 합 니 다.

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage