現在のクライアント時間の JavaScript サンプルコードを page_javascript スキルに出力します。

時間オブジェクト (Date()) は比較的単純です。この記事は、初心者が始めることを目的としています。

この記事では、基本的な知識の例を取り上げ、例の要件について説明します。

現在のクライアント時刻をページに出力します (2015 年 1 月 1 日月曜日の 10:10:10 の形式)。ページは毎秒更新されませんが、時刻は自動的に更新されます (2 つのタイマー メソッドを使用できます)。達成)、マウスのクリック時間、元の動きが停止した場合、停止した場合は動きは継続します。

要件は基本的に 2 つの部分に分けることができます。1 つは更新せずに時刻を自動的に更新することであり、もう 1 つは時刻をクリックして時刻を停止または更新することです

それでは、古いルールに従って段階的に進めていきましょう。時間なので、時間オブジェクト 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()
}; 

時刻オブジェクトをオブジェクト形式で取得するので、いちいち定義する必要がなく、非常に便利です。 year:time の取得など、対応する値を取得します。

取得する必要のあるデータを取得した後、曜日の問題に対処する必要があります。これは、現在取得されている曜日の値がまだ 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; 
};
}

ここでは、swicth case の組み合わせを使用します。この判定条件は、曜日と同様の判定を行うのに特に適しています。もちろん、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; 
}

obj オブジェクトを渡す目的は、このオブジェクトに時刻を出力することです。ただし、このときに出力される時刻は、そうでない場合はまったく動きません。次に、時刻を自動的に更新する関数を実装しましょう。まず、コンテナを指定します。

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);
}

自動時刻更新を実現するには、タイマー (setInterval() または setTimeout()) を使用する必要があります。最初のメソッドはタイマーがクリアされない限り常に実行され、2 番目のメソッドは少し異なります。一度のみ実行されます。常に実行したい場合は、再帰呼び出しメソッドの使用を検討できます。このメソッドはここでは記述しません。

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

最初のものを使用することを選択します:

この時点で、ページに表示される時刻は自動的に更新されて表示されますが、時刻をクリックすると時刻が停止し、再度時刻の更新が再開されます。では、どうやってこれを行うのでしょうか?分かりやすいように例をあげますと、例えば、照明のスイッチを押すと、もう一度スイッチを押すと、照明が点灯します。ライトが消えます。これは私たちの要件と非常に似ていますので、スイッチを設定することで目的の効果を実現できます。

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;
}
} 

そこで使用されるいくつかの三項演算と否定演算を理解してください。

この時点で、もう終わったと思いますか?確かに。 。 。いいえ、時間の表示に関して言えば、これは時間オブジェクト アプリケーションのほんの一部に過ぎません。共同購入 Web サイトなど、確認コードのカウントダウンなどのカウントダウン アプリケーションをもっと増やす必要があります。しかし、今日は時間が限られています。カウントダウン機能については、今回は詳しく説明しません。カウントダウンの応用方法については別のブログで説明しますので、参考にしてください。今日はここまでです！

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);
}

現在のクライアント時間のJavaScriptサンプルコードをページに出力する際の関連知識を紹介しますので、皆様のお役に立てれば幸いです。