Cara menggunakan javascript countdown 10 detik

Question

Tutorial ini memandu Anda membuat hitungan mundur 10 detik menggunakan fungsi pengatur waktu JavaScript. Ini menyajikan ikhtisar fungsi pengatur waktu sebelum menunjukkan kepada Anda cara menerapkannya dalam membuat hitungan mundur

Table of Contents Show

Fungsi Timer berbeda dalam JavaScript
Mari jelajahi beberapa contoh praktis
Buat struktur proyek
Contoh 1. Buat timer 10 detik tanpa progress bar
Contoh-2. Buat timer 10 detik dengan progress bar

Mari kita mulai dengan fungsi pengatur waktu

Fungsi Timer berbeda dalam JavaScript

Fungsi pengatur waktu JavaScript seperti

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

_6,

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

7, dan

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

8 berasal dari objek jendela atau Node. js objek global. Mereka mengulangi atau menunda pelaksanaan fungsi lainnya

Misalnya,

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

_7 mengulangi eksekusi fungsi lain setelah waktu yang ditentukan (dalam milidetik)

// create a function
function a() {
  console.log("Print me after every 1 minute.")
}
// execution the function after every 1000 milliseconds.
setInterval(a, 1000)

_

Fungsi

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

6 menunda eksekusi fungsi yang diberikan untuk durasi minimum milidetik yang ditentukan

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

8 fungsi, yang hanya dijamin untuk bekerja di Node. js, mirip dengan menggunakan

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

_6 dengan

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

3 milidetik

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

_

Kami juga dapat menjalankan fungsi anonim di dalam penghitung waktu

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

Atau hapus tindakan yang dimulai oleh pengatur waktu. Untuk mengosongkan waktu, kita perlu mengakses id tindakan yang dikembalikan oleh pengatur waktu. Misalnya, kita dapat menghentikan pencetakan berkelanjutan dari fungsi

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

7 dengan menyimpan id pengembaliannya dan mereferensikan variabel di dalam fungsi

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

5

Periklanan

// Store the setInterval()'s function id in the printId variable
const printId = setInterval(function() {
  console.log("Print me after every 1 minute.")
}, 1000)
// You have cancelled the effect of the setInterval() function. So, you won't console-log the above statement.
clearInterval(printId)

Sekarang setelah Anda memahami cara menggunakan penghitung waktu, mari kita terapkan dalam membuat hitungan mundur penghitung waktu 10 detik

BACA JUGA. Buat fungsi Peta untuk objek (bukan array) - peta Nodejs

Mari jelajahi beberapa contoh praktis

Buat struktur proyek

mkdir timer && cd timer
touch index.html style.css script.js

Buka setiap file dengan editor kode pilihan Anda dan masukkan kode masing-masing di bagian contoh. Saya menggunakan Vim

Contoh 1. Buat timer 10 detik tanpa progress bar

Inilah konten

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

_6 saya

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <script src="script.js" defer></script>
    <title>10 second timer</title>
</head>
<body>
    <main>
        <p class="downloadBegins">Your download begins in <span max="10" id="remainingTime"></span> seconds</p>
    </main>
</body>
</html>

Kami menautkan lembar gaya

<link rel="stylesheet" href="style.css">

dan file skrip

<script src="index.js" defer></script>

di bagian

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

_7. Menggunakan kata kunci

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

_8, kami memprogram file skrip untuk dijalankan setelah DOM selesai memuat

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

9 berisi elemen

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

0, yang menampung

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

1 interaktif. Paragraf, yang berisi

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

_2 dari id

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

3, akan diperbarui saat pengatur waktu 10 detik berubah

Konten dari

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

_4 saya

Periklanan

body {
    background-color: #f7f8fc;
}
main {
    margin: 3rem auto;
    width: 50%;
    text-align: center;
}

Kami menata

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

_9 dalam warna putih. Elemen

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

_0 menutupi separuh halaman

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

7, dan kontennya berada di

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

8 halaman

Konten dari

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

_9 saya

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

0

Menggunakan metode

// Store the setInterval()'s function id in the printId variable
const printId = setInterval(function() {
  console.log("Print me after every 1 minute.")
}, 1000)
// You have cancelled the effect of the setInterval() function. So, you won't console-log the above statement.
clearInterval(printId)

_0, kami mengambil

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

3 id dan menyimpannya dalam variabel

// Store the setInterval()'s function id in the printId variable
const printId = setInterval(function() {
  console.log("Print me after every 1 minute.")
}, 1000)
// You have cancelled the effect of the setInterval() function. So, you won't console-log the above statement.
clearInterval(printId)

2. Kami juga menetapkan timer

// Store the setInterval()'s function id in the printId variable
const printId = setInterval(function() {
  console.log("Print me after every 1 minute.")
}, 1000)
// You have cancelled the effect of the setInterval() function. So, you won't console-log the above statement.
clearInterval(printId)

_3 sebagai nilai default 10

BACA JUGA. Bagaimana cara menambahkan Node. js fungsi tidur [Contoh Praktis]

Kami kemudian memperbarui waktu setelah setiap 1 detik dan berhenti menghitung ketika detik yang tersisa turun di bawah nol (

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

3). Jika tidak, kami terus mengurangi detik yang tersisa setelah 1 detik sambil memperbarui nilai yang disimpan di elemen

// Store the setInterval()'s function id in the printId variable
const printId = setInterval(function() {
  console.log("Print me after every 1 minute.")
}, 1000)
// You have cancelled the effect of the setInterval() function. So, you won't console-log the above statement.
clearInterval(printId)

2 masing-masing di file skrip dan DOM

Kita dapat melihat implementasi kode dengan menyalin jalur direktori saat ini,

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

_1

membuka bilah pencarian browser dan mencari jalur file yang disalin setelah menambahkan file

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

6

Periklanan

Timer mulai dari 10 dan terus turun setiap detik hingga pembacaan nol dan berhenti

Misi selesai. Tapi, bisakah kita membuat proyek lebih baik? . Mari perkenalkan bilah kemajuan untuk meniru lingkungan pengunduhan file biasa

Contoh-2. Buat timer 10 detik dengan progress bar

Perbarui ketiga file tersebut dengan konten berikut

Diperbarui

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

_6 dari contoh sebelumnya

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

_2

Kami memperkenalkan elemen

// Store the setInterval()'s function id in the printId variable
const printId = setInterval(function() {
  console.log("Print me after every 1 minute.")
}, 1000)
// You have cancelled the effect of the setInterval() function. So, you won't console-log the above statement.
clearInterval(printId)

_8 dengan kelas yang disebut

// Store the setInterval()'s function id in the printId variable
const printId = setInterval(function() {
  console.log("Print me after every 1 minute.")
}, 1000)
// You have cancelled the effect of the setInterval() function. So, you won't console-log the above statement.
clearInterval(printId)

9

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

_3

// Store the setInterval()'s function id in the printId variable
const printId = setInterval(function() {
  console.log("Print me after every 1 minute.")
}, 1000)
// You have cancelled the effect of the setInterval() function. So, you won't console-log the above statement.
clearInterval(printId)

_8 menampung

// Store the setInterval()'s function id in the printId variable
const printId = setInterval(function() {
  console.log("Print me after every 1 minute.")
}, 1000)
// You have cancelled the effect of the setInterval() function. So, you won't console-log the above statement.
clearInterval(printId)

8 lain dari kelas

mkdir timer && cd timer
touch index.html style.css script.js

2 yang berisi bilah kemajuan

BACA JUGA. Bagaimana Nodejs single threaded? .

Sampel saya

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

_4 file

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

_4

Kami membuat induk

// Store the setInterval()'s function id in the printId variable
const printId = setInterval(function() {
  console.log("Print me after every 1 minute.")
}, 1000)
// You have cancelled the effect of the setInterval() function. So, you won't console-log the above statement.
clearInterval(printId)

8 putih, sedangkan yang menampung bilah kemajuan berwarna hijau. Dengan menggunakan JavaScript, kami memperbesar lebar hijau untuk mengisi latar belakang putih, sehingga memperbarui kemajuan unduhan pengguna

Contoh saya

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

_9 file

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

5

Segera setelah nilai

// Store the setInterval()'s function id in the printId variable
const printId = setInterval(function() {
  console.log("Print me after every 1 minute.")
}, 1000)
// You have cancelled the effect of the setInterval() function. So, you won't console-log the above statement.
clearInterval(printId)

3 mencapai nol, kami menyembunyikan paragraf dan menampilkan bilah progres sebagai gantinya. Kami memperkenalkan fungsi

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

_6 yang mulai berjalan 2 detik setelah hitungan mundur 10 detik berakhir

Periklanan

Sementara itu, kami secara dinamis memperbarui konten teks dari elemen

setTimeout( () => { console.log("Print me after a delay of 3 minutes.") }, 3000)

2 (menampung persentase bilah kemajuan dan lebar bilah kemajuan) hingga nilai

mkdir timer && cd timer
touch index.html style.css script.js

9 turun menjadi

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

3

Terakhir, segarkan jalur file

function a() {
    console.log("You can as well use setTimeout with 0 milliseconds")
 }
 setImmediate(a)

_6 di browser

Kali ini, hitungan mundur penghitung waktu 10 detik berhenti, lalu bilah progres berwarna hijau mengisi latar belakang putih hingga pembacaan mencapai 100%

BACA JUGA. Masing-masing JavaScript vs Dalam [Dengan Contoh]

Kesimpulan

Anda dapat membuat penghitung waktu mundur 10 detik dalam JavaScript menggunakan fungsi

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

7. Seperti yang dijelaskan dalam tutorial ini, akan lebih baik untuk membedakan fungsi

// create a function
function a() {
  console.log("Print me after a delay of 3 minutes.")
}
// execute the function after a delay of 3000 milliseconds.
setTimeout(a, 3000)

7 dari fungsi pengatur waktu lainnya untuk memungkinkan Anda menerapkannya secara efektif

kode javascript