> 웹 프론트엔드 > JS 튜토리얼 > jQuery로 전자시계 기능을 구현하는 단계에 대한 자세한 설명

jQuery로 전자시계 기능을 구현하는 단계에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-05-15 09:44:22
원래의
2108명이 탐색했습니다.

이번에는 jQuery로 전자시계 기능을 구현하는 단계에 대해 자세히 설명하겠습니다. jQuery에서 전자시계 기능을 구현하기 위한 주의사항은 무엇인가요?

<!DOCTYPE html>
<html>
  <head>
    <title>jQuery电子时钟</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  </head>
  <body>
    <span id="time">haha</span>
    <script type="text/javascript">
    window.onload = function(){
      showTime();
    }
    function showTime(){
    var myDate = new Date();
    var year = myDate.getFullYear();
    var month = myDate.getMonth() + 1;
    var date = myDate.getDate();
    var dayArray = new Array(7);
    dayArray[0] = "星期日";
    dayArray[1] = "星期一";
    dayArray[2] = "星期二";
    dayArray[3] = "星期三";
    dayArray[4] = "星期四";
    dayArray[5] = "星期五";
    dayArray[6] = "星期六";
    var day1 = myDate.getDay();
    var day = dayArray[day1];
    var hour = myDate.getHours();
    var minute = myDate.getMinutes();
    var second = myDate.getSeconds();
    var min = checkTime(minute);
    var sec = checkTime(second);
    var time1 = year + "年" + month + "月" + date + "日";
    var time2 = hour + ":" + min + ":" + sec;
    // document.write(time1+day+time2);
    //用js方法
    // document.getElementById("time").innerHTML = time1+day+time2;
    //用jquery方法
    $('#time').text(time1+day+time2);
    setTimeout("showTime()",500);
    }
    function checkTime(i){
      if(i<10){
        i = "0" + i;
      }
      return i;
    }
    </script>
  </body>
</html>
로그인 후 복사

작동 효과:

예제 요약:

1. 반드시 js 파일 참조를 본문에 선언해야 하며, 다시 명시할 필요가 없습니다. 참조 정보 등
2. 날짜 관련 함수에 주의하세요. 검색할 때 get 및 괄호를 잊지 마세요.
3 window.onload = function(); <code>window.onload = function(){}的写法;
4、月份要注意数组开始顺序,从一月份开始,下标是0,以此类增;
5、注意时、分、秒函数为复数;
6、day表示获取星期几,但是获取的是数字,可以用数组转换(0表示周日,其它一一对应)
7、setTimeout函数:setTimeOut(A,B),注意setTimeout中out为小写
A:函数体 B:函数执行间隔
8、setTimeout执行过程中,不要使用document.write,否则递归调用未实现;
9、JQuery选择器中使用单引号还是双引号?
理论上单双都可以,在嵌套情况下视具体情况而定。
10、关于jQuery获取标签文本内容:方法1:text();方法2:html();
注意,需要改变文本内容时,正确格式为:$('#time').text("content") 错误格式为:$('#time').text() = "content"4. 1월부터 다음 달까지 배열의 시작 순서에 주의하세요. 표시는 0 등입니다.

5.

6. day는 요일을 가져오는 것을 의미하지만, 가져온 것은 배열을 사용하여 변환할 수 있는 숫자입니다. (0은 일요일을 의미하고 나머지는 하나씩 대응)

7.setTimeout 함수: setTimeOut(A,B), setTimeout의 out은 소문자입니다.

A: 함수 본문 B: 함수 실행 간격

8. setTimeout 실행 프로세스 중에는 를 사용하지 마세요. document.write, 그렇지 않으면 재귀 호출이 구현되지 않습니다.

9. JQuery 선택기에서 작은따옴표를 사용해야 합니까, 아니면 큰따옴표를 사용해야 합니까? 이론적으로는 홀수와 짝수 모두 허용됩니다. 중첩의 경우 상황에 따라 다릅니다. 10. jQuery를 사용하여 레이블 텍스트 내용 가져오기: 방법 1: text(); 방법 2: html()
텍스트 내용을 변경해야 하는 경우 올바른 형식은 다음과 같습니다. time').text( "content") 오류 형식은 다음과 같습니다: $('#time').text() = "content"

이 방법을 마스터하신 것 같습니다. 이 기사의 사례를 읽고 나면 더욱 흥미진진해집니다. PHP 중국어 웹사이트에서 다른 관련 기사도 주목해 주세요! 추천 자료:

🎜jQuery 순회 XML 노드 및 속성 구현 단계🎜🎜🎜🎜🎜Vue 리플 버튼 구성 요소 사용에 대한 자세한 설명🎜🎜🎜

위 내용은 jQuery로 전자시계 기능을 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿