Xử lý sự kiện Time-related Events trong VueJs 2

Trong bài tập VueJS 2 này, mình sẽ tìm hiểu cách xử lý sự kiện liên quan đến thời gian, nơi mình sẽ tạo một tính năng đếm ngược đơn giản bằng VueJS.

Xử lý sự kiện Time-related Events trong VueJS 2

Yêu cầu

Mình sẽ tạo một tính năng liên quan đến thời gian, chẳng hạn như đếm ngược hoặc hiển thị thông báo sau một khoảng thời gian nhất định. Điều này sẽ giúp chúng ta thực hành cách sử dụng setTimeout hoặc setInterval trong VueJS để tạo sự kiện time-related.

Mình sẽ sử dụng VueJS để bắt đầu một đếm ngược khi người dùng nhấp vào một nút. Mỗi giây, mình sẽ cập nhật giao diện người dùng để hiển thị thời gian còn lại và sau khi thời gian kết thúc, hiển thị một thông báo.

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Xử Lý Sự Kiện Time-related - VueJS 2</title>
  <link rel="stylesheet" href="styles.css">
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>

<div id="app" class="container">
  <button @click="startCountdown" class="custom-button">Bắt đầu Đếm Ngược</button>
  <p v-if="countdownMessage" class="event-message">{{ countdownMessage }}</p>
</div>

<script src="main.js"></script>
</body>
</html>

main.js

new Vue({
  el: '#app',
  data: {
    countdownMessage: ''
  },
  methods: {
    startCountdown() {
      // Thiết lập thời gian đếm ngược là 5 giây
      const countdownTime = 5;
      let seconds = countdownTime;

      // Hiển thị thông báo và giảm thời gian mỗi giây
      const countdownInterval = setInterval(() => {
        this.countdownMessage = `Đang đếm ngược: ${seconds} giây`;

        // Giảm thời gian
        seconds--;

        // Khi thời gian đếm ngược hết, hiển thị thông báo và dừng đếm ngược
        if (seconds < 0) {
          this.countdownMessage = 'Đếm ngược đã kết thúc!';
          clearInterval(countdownInterval);
        }
      }, 1000);
    }
  }
});

styles.css

body {
  font-family: 'Arial', sans-serif;
  background-color: #f8f8f8;
  margin: 0;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.custom-button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #3498db;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.custom-button:hover {
  background-color: #2980b9;
}

.event-message {
  margin-top: 20px;
  font-size: 18px;
  color: #333;
}

Giải thích:

Một đối tượng Vue được tạo, liên kết với phần tử có id là "app".

Trong data, có một thuộc tính countdownMessage để lưu thông điệp đếm ngược.

Trong methods, có một phương thức startCountdown, được kích hoạt khi người dùng nhấp vào nút.

Một biến countdownTime được thiết lập để làm thời gian đếm ngược, ở đây là 5 giây.
Một biến seconds được sử dụng để đếm ngược giây.
setInterval được sử dụng để cập nhật thông điệp và giảm giây mỗi giây.
Khi thời gian đếm ngược kết thúc, thông báo thích hợp được hiển thị và clearInterval để dừng đếm ngược.

z5064596772684 6d5ede21da0e9a7b3b8eacf5a93c0d00 jpg z5064595957515 79af0fb24d70b7d7889994f966d3eaaf jpg

Qua bài tập này, mình đã thực hành cách xử lý sự kiện liên quan đến thời gian trong VueJS. Việc tạo một tính năng đếm ngược là một ứng dụng cụ thể của sự kiện time-related, và những khái niệm này có thể mở ra nhiều khả năng tương tác thú vị trong các dự án VueJS của bạn. Hãy tiếp tục thực hành và kết hợp chúng vào các tình huống thực tế!

test php

Bài giải

-------------------- ######## --------------------

Câu hỏi thường gặp liên quan:

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

Xử lý sự kiện Time-related Events trong VueJs 2

Xử lý sự kiện Time-related Events trong VueJS 2

Cùng chuyên mục:

Bài tập VueJS 2: Sử dụng Axios hoặc Fetch API trong VueJS 2

Bài tập VueJS 2: Two-way binding trong VueJS 2

Bài tập VueJS 2: Components trong VueJS 2

Bài tập VueJS 2: Binding dữ liệu trong VueJS 2

Sử dụng directives (v-bind, v-model) để hiển thị và cập nhật dữ liệu bằng VueJS 2

Tạo nút và xử lý sự kiện khi nút được nhấn trong VueJS 2

VueJS 2 Components: Tạo và quản lý ToDo List đơn giản

Các quy tắc trong VueJS 2

Tạo component và binding data trong VueJS 2

Tìm hiểu Scoped CSS trong VueJS 2

Sử dụng forceUpdate trong VueJS 2

Sử dụng v-for trong VueJS 2

10 best practices trong VueJS 2

Các tạo Custom Directives trong VueJS 2

Sử dụng V-for và V-if trong VueJs 2

Sử dụng methods trong VueJS 2

Khác nhau giữa slot và scoped slots trong VueJS 2

Tìm hiểu Slots trong VueJS 2

Xử lý Custom Events trong VueJS 2

Ref và Reactive trong VueJS 2

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

A PHP Error was encountered

Xử lý sự kiện Time-related Events trong VueJs 2

Xử lý sự kiện Time-related Events trong VueJS 2

Cùng chuyên mục:

Bài tập VueJS 2: Sử dụng Axios hoặc Fetch API trong VueJS 2

Bài tập VueJS 2: Two-way binding trong VueJS 2

Bài tập VueJS 2: Components trong VueJS 2

Bài tập VueJS 2: Binding dữ liệu trong VueJS 2

Sử dụng directives (v-bind, v-model) để hiển thị và cập nhật dữ liệu bằng VueJS 2

Tạo nút và xử lý sự kiện khi nút được nhấn trong VueJS 2

VueJS 2 Components: Tạo và quản lý ToDo List đơn giản

Các quy tắc trong VueJS 2

Tạo component và binding data trong VueJS 2

Tìm hiểu Scoped CSS trong VueJS 2

Sử dụng forceUpdate trong VueJS 2

Sử dụng v-for trong VueJS 2

10 best practices trong VueJS 2

Các tạo Custom Directives trong VueJS 2

Sử dụng V-for và V-if trong VueJs 2

Sử dụng methods trong VueJS 2

Khác nhau giữa slot và scoped slots trong VueJS 2

Tìm hiểu Slots trong VueJS 2

Xử lý Custom Events trong VueJS 2

Ref và Reactive trong VueJS 2

Giới thiệu

Thủ thuật

Link hay

Liên kết