page_javascript 기술에 현재 클라이언트 시간 javascript 예제 코드를 출력합니다.-JS 튜토리얼-php.cn

page_javascript 기술에 현재 클라이언트 시간 javascript 예제 코드를 출력합니다.

WBOY

풀어 주다： 2016-05-16 15:12:46

원래의

1552명이 탐색했습니다.

시간 객체(Date())는 비교적 간단합니다. 이 글은 초보자가 시작하기 위한 글입니다.

이 기사에서는 기본 지식의 예를 다루며 예의 요구 사항에 대해 설명합니다.

페이지에 현재 클라이언트 시간을 출력합니다(2015년 1월 1일 월요일 10:10:10 형식). 페이지가 매초 새로 고쳐지지 않고 시간이 자동으로 업데이트됩니다(두 가지 타이머 방법을 사용하면 가능). 달성), 마우스 클릭 시간, 원래 움직임이 멈춘 경우, 멈춘 경우 움직임이 계속됩니다

요구 사항은 기본적으로 두 부분으로 나눌 수 있습니다. 하나는 새로 고치지 않고 자동으로 시간을 업데이트하는 것이고, 다른 하나는 시간을 클릭하여 시간을 중지하거나 업데이트하는 것입니다.

자, 이전 규칙을 단계별로 따르겠습니다. 이제 시간 개체 new Date()를 사용하겠습니다.

var nowDate = new Date();
var time = {
year : nowDate.getFullYear(),
month : nowDate.getMonth(),
day : nowDate.getDate(),
week : nowDate.getDay(),
hour : nowDate.getHours(),
minute : nowDate.getMinutes(),
second : nowDate.getSeconds()
};

로그인 후 복사

시간 객체를 객체 형태로 구하는데, 호출하기 편리하고 구조가 명확하여 일일이 정의할 필요도 없으므로 매우 편리합니다. 연도 가져오기와 같은 해당 값을 가져옵니다.

얻어야 할 데이터를 얻은 후에는 요일 문제를 처리해야 합니다. 현재 얻은 요일의 값은 여전히 1,2,3,4,5,6,7이기 때문입니다. . 여기서는 이를 변환하여 다음과 같이 변경해야 합니다. 우리가 볼 수 있는 텍스트 정보를 보려면 여기에서 함수로 래핑합니다.

function Week(num){
switch(num){
case 1 :
return '星期一';
break;
case 2 :
return '星期二';
break;
case 3 :
return '星期三';
break;
case 4 :
return '星期四';
break;
case 5 :
return '星期五';
break;
case 6 :
return '星期六';
break;
case 7 :
return '星期日';
break; 
};
}

로그인 후 복사

여기서는 swic 케이스 조합을 사용합니다. 이 판단 조건은 요일과 유사한 판단을 내리는 데 특히 적합합니다. 물론 여기서는 if else 조합을 사용하여 판단할 수도 있습니다. , 개인 습관에 따라 해결해야 할 문제가 있습니다. 획득한 분과 초가 0에서 9 사이의 숫자로 표시됩니다.

은 00-09의 일반적인 표시가 아닙니다. 이 시간을 우리에게 익숙한 것으로 변경하려면 이를 변환하는 함수를 작성할 수도 있습니다.

function twoNum(num){
return num = num<10 &#63; '0'+num : num; 
}

로그인 후 복사

여기서는 삼항 산술을 사용하고 있습니다. 삼항 산술에 대해 잘 모르신다면 다음 코드를 보시면 같은 의미입니다.

function twoNum(num){
if(num<10){
num = '0'+num; 
}
return num; 
}

로그인 후 복사

모든 것이 준비되었습니다. 필요한 것은 동풍뿐입니다. 먼저 이러한 코드를 통합하여 더욱 편리하게 사용할 수 있도록 하겠습니다.

function Timer(obj){
var nowDate = new Date();
var time = {
year : nowDate.getFullYear(),
month : nowDate.getMonth(),
day : nowDate.getDate(),
week : nowDate.getDay(),
hour : nowDate.getHours(),
minute : nowDate.getMinutes(),
second : nowDate.getSeconds()
};
function Week(num){
switch(num){
case 1 :
return '星期一';
break;
case 2 :
return '星期二';
break;
case 3 :
return '星期三';
break;
case 4 :
return '星期四';
break;
case 5 :
return '星期五';
break;
case 6 :
return '星期六';
break;
case 7 :
return '星期日';
break; 
};
}
function twoNum(num){
return num = num<10 &#63; '0'+num : num; 
}
obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second);
}

로그인 후 복사

이 함수를 이해해야 합니다. obj 객체를 전달하는 목적은 이 객체에 시간을 출력하는 것입니다. 그러나 이때 출력되는 시간은 정적 시간이 아닐 경우에만 페이지가 이동하지 않습니다. 따라서 계속해서 시간을 자동으로 업데이트하는 기능을 구현해 보겠습니다.

<div id="box"></div>

로그인 후 복사

자동 시간 업데이트를 수행하려면 타이머(setInterval() 또는 setTimeout())를 사용해야 합니다. 이 두 메서드는 타이머가 지워지지 않는 한 항상 실행되고 두 번째 메서드는 약간 다릅니다. 한 번만 실행되지 않습니다. 항상 실행되도록 하려면 재귀 호출 방법을 사용하는 것이 좋습니다.

첫 번째 항목을 사용하기로 선택합니다.

var oBox = document.getElementById("box"); //获取元素
Timer(oBox); //这里需要先执行一下，因为如果不先执行，定时器会有一个延迟1秒执行，看上去就感觉慢了一秒出来一样
oBox.timer = setInterval(function(){ //oBox.timer这种写法是为了减少外面全局变量对定时器的影响，用元素的自定义属性还可以避免命名冲突
Timer(oBox);
},1000);

로그인 후 복사

이 시점에서 페이지에 표시되는 시간은 자동으로 업데이트되어 표시될 수 있습니다. 그러나 시간을 클릭하면 시간이 중지되고 다시 클릭하면 시간 업데이트가 재개됩니다. 그럼 어떻게 해야 할까요? 이해하기 쉽도록 예를 들어 설명하겠습니다. 예를 들어 조명의 스위치를 누르면 조명이 다시 켜집니다. 빛이 꺼질 것입니다. 우리의 요구 사항과 매우 유사하므로 스위치를 설정하여 원하는 효과를 얻을 수 있습니다.

var offOn = true;
oBox.onclick = function(){
if(offOn){
clearInterval(oBox.timer);
offOn=false;
}else{
oBox.timer = setInterval(function(){
Timer(oBox);
},1000);
offOn = true;
}
}

로그인 후 복사

이제 모든 기능이 구현됐다고 생각하시나요? 틀림없이. . . 아니요, 코드에 대한 우리 프로그래머의 엄격한 태도로 인해 많은 부분이 최적화될 수 있습니다. 모든 코드는 다음과 같이 구성되고 최적화됩니다.

var oBox = document.getElementById("box");
var offOn = true;
Timer(oBox);
function showTime(){
oBox.timer = setInterval(function(){
Timer(oBox);
},1000);
}
showTime();
oBox.onclick = function(){
offOn ? clearInterval(oBox.timer) : showTime();
offOn=!offOn;
}
function Timer(obj){
var nowDate = new Date();
var time = {
year : nowDate.getFullYear(),
month : nowDate.getMonth(),
day : nowDate.getDate(),
week : nowDate.getDay(),
hour : nowDate.getHours(),
minute : nowDate.getMinutes(),
second : nowDate.getSeconds()
};
function Week(num){
switch(num){
case 1 :
return '星期一';
break;
case 2 :
return '星期二';
break;
case 3 :
return '星期三';
break;
case 4 :
return '星期四';
break;
case 5 :
return '星期五';
break;
case 6 :
return '星期六';
break;
case 7 :
return '星期日';
break; 
};
}
function twoNum(num){
return num = num<10 &#63; '0'+num : num; 
}
obj.innerHTML = time.year+'年'+time.month+'月'+time.day+'日 '+Week(time.week)+' '+time.hour+':'+twoNum(time.minute)+':'+twoNum(time.second);
}

로그인 후 복사

여기에 사용되는 여러 삼항 연산과 부정 연산을 이해해 보세요!

이쯤 되면 끝났다고 생각하시나요? 틀림없이. . . 아니요, 시간 표시에 관해서는 이것은 시간 개체 응용 프로그램의 버킷에 불과합니다. 인증 코드 카운트 다운과 같은 공동 구매 웹 사이트와 같은 카운트 다운 응용 프로그램이 더 많아야합니다. 그러나 오늘의 시간은 제한되어 있습니다. 그래서 이번에는 카운트다운 기능에 대해 자세히 다루지 않겠습니다. 참고 및 학습을 위해 카운트다운의 몇 가지 적용 방법을 설명하기 위해 별도의 블로그를 개설하겠습니다. 오늘은 그게 다야!

현재 클라이언트 시간 자바스크립트 예제 코드 출력에 대한 관련 지식을 페이지에 소개하겠습니다. 모든 분들께 도움이 되길 바랍니다!