Keluarkan kod contoh javascript masa klien semasa dalam kemahiran page_javascript

Objek masa (Tarikh()) agak mudah. ​​Artikel ini bertujuan untuk pemula untuk memulakannya.

Artikel ini menjalankan contoh pengetahuan asas dan membincangkan keperluan contoh:

Output masa klien semasa pada halaman (dalam format 10:10:10 pada hari Isnin, 1 Januari 2015 Halaman tidak dimuat semula setiap saat, tetapi masa dikemas kini secara automatik (menggunakan dua kaedah pemasa boleh). dicapai), masa klik tetikus, jika pergerakan asal dihentikan, jika ia dihentikan, pergerakan diteruskan

Keperluan pada dasarnya boleh dibahagikan kepada 2 bahagian: satu ialah mengemas kini masa secara automatik tanpa menyegarkan, dan satu lagi ialah mengklik pada masa untuk berhenti atau mengemas kini masa

Baiklah, mari ikut peraturan lama, langkah demi langkah Memandangkan sudah tiba masanya, kita akan menggunakan objek masa 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()
}; 

Saya memperoleh objek masa dalam bentuk objek, yang mudah dipanggil dan mempunyai struktur yang jelas Ia tidak perlu ditakrifkan satu persatu dapatkan nilai yang sepadan, seperti mendapatkan tahun: masa;

Setelah mendapat data yang perlu kami dapatkan, kami perlu menangani masalah hari dalam seminggu, kerana nilai hari dalam seminggu yang diperoleh sekarang masih 1,2,3,4,5,6,7 . Di sini kita perlu menukarnya dan menukarnya kepada Untuk maklumat teks yang boleh kita lihat, di sini kita membungkusnya dengan fungsi:

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

Di sini saya menggunakan kombinasi kes swicth. Syarat penghakiman ini amat sesuai untuk membuat penghakiman yang serupa dengan hari dalam seminggu. Sudah tentu, anda juga boleh menggunakan kombinasi if else untuk menilai , bergantung pada tabiat peribadi anda Terdapat masalah yang perlu diselesaikan Apabila minit dan saat yang diperoleh adalah antara 0 dan 9, nombor dari 0 hingga 9 dipaparkan

bukan paparan biasa kami 00-09 Untuk menukar masa ini menjadi sesuatu yang biasa kami gunakan, kami juga boleh menulis fungsi untuk menukarnya:

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

Di sini saya menggunakan aritmetik ternary Jika anda tidak tahu banyak tentang aritmetik ternary, lihat kod berikut, ia bermaksud perkara yang sama:

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

Semuanya sudah sedia, yang kita perlukan hanyalah angin timur Mari kita integrasikan kod ini terlebih dahulu untuk menjadikannya lebih mudah digunakan:

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

Anda harus memahami fungsi ini Tujuan menghantar objek obj adalah untuk mengeluarkan masa dalam objek ini Namun, output masa pada masa ini hanyalah masa statik disegarkan. Oleh itu, kita teruskan Seterusnya, mari kita laksanakan fungsi mengemas kini secara automatik Pertama, kita memberikan bekas:

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

Untuk mencapai kemas kini masa automatik, anda perlu menggunakan pemasa (setInterval() atau setTimeout() Kedua-dua kaedah ini yang pertama sentiasa dilaksanakan melainkan pemasa dikosongkan, dan yang kedua adalah hanya dilaksanakan Ia tidak akan dilaksanakan sekali Jika anda mahu ia dilaksanakan sepanjang masa, anda boleh mempertimbangkan untuk menggunakan kaedah panggilan rekursif Kaedah ini tidak akan ditulis di sini

Kami memilih untuk menggunakan yang pertama:

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

Pada ketika ini, masa yang dipaparkan pada halaman boleh dikemas kini dan dipaparkan secara automatik Namun, kami masih mempunyai keperluan lain, iaitu klik pada masa dan masa akan berhenti dan masa akan disambung semula. Jadi bagaimana untuk melakukan ini? Untuk memudahkan pemahaman, saya akan berikan satu contoh, dan anda sepatutnya dapat memahaminya. Contohnya, jika saya menekan suis lampu, lampu akan menyala. lampu akan padam. Adakah ia sangat serupa dengan keperluan kita, jadi kita boleh mencapai kesan yang kita inginkan dengan menetapkan suis:

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

Pada ketika ini, semua fungsi telah dilaksanakan. Adakah anda fikir ini adalah penamat? sudah tentu. . . Tidak, disebabkan sikap ketat pengaturcara kami terhadap kod, banyak tempat boleh dioptimumkan Semua kod disusun dan dioptimumkan seperti berikut:

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

Sila cuba fahami beberapa operasi ternary dan operasi penolakan yang digunakan di dalamnya!

Pada ketika ini, adakah anda fikir ia sudah berakhir? sudah tentu. . . Tidak, apabila ia datang untuk memaparkan masa, ini hanyalah penurunan dalam baldi aplikasi objek masa Lebih banyak aplikasi haruslah aplikasi kira detik, seperti tapak web pembelian kumpulan, seperti kira detik kod pengesahan, dll. Walau bagaimanapun, masa hari ini adalah terhad. jadi saya tidak akan pergi secara terperinci kali ini Mari kita bercakap tentang fungsi kira detik saya akan membuka blog yang berasingan untuk menerangkan beberapa kaedah permohonan untuk rujukan dan kajian anda. itu sahaja untuk hari ini!

Saya akan memperkenalkan anda kepada pengetahuan yang berkaitan tentang mengeluarkan kod contoh javascript masa klien semasa pada halaman.