Rumah >hujung hadapan web >tutorial js >Membina Alat Pengukur dengan API Pemerhati Ubah Saiz

Membina Alat Pengukur dengan API Pemerhati Ubah Saiz

Barbara Streisandasal: 2024-12-21 06:56:13827semak imbas

Building a Measuring Tool with the Resize Observer API

API Web - wilayah yang sangat menarik dan jarang diterokai dengan baik. Namun begitu, terdapat sejumlah besar API unik dan sangat berguna yang boleh membantu anda mencipta alatan untuk projek anda.

Sebagai contoh, perubahan saiz penjejakan adalah kunci untuk mencipta pengalaman yang dinamik dan responsif. Di sinilah Resize Observer API masuk.

Dalam artikel ini, kami akan membina alat pengukur yang memaparkan lebar dan ketinggian kotak boleh ubah saiz dalam masa nyata. Ini ialah projek yang menunjukkan kuasa Resize Observer API dan API Penyemak Imbas secara umum secara praktikal dan interaktif.

Apakah itu Resize Observer API?

Resize Observer API ialah ciri penyemak imbas yang membolehkan anda mengesan perubahan pada saiz elemen. Ubah Saiz Pemerhati berfungsi pada elemen individu. Ia berfungsi di luar kotak dan boleh menjadi tambahan hebat pada set alat anda untuk membina reka bentuk responsif dan UI dinamik.

Inilah yang menjadikannya hebat:

Ia ringan dan mudah digunakan
Anda boleh menjejaki perubahan dalam saiz untuk elemen tertentu, bukan hanya keseluruhan port pandangan
Ia sesuai untuk membina komponen responsif atau widget boleh ubah saiz

Apa yang Kami Bina

Kami akan mencipta kotak yang boleh diubah saiz dengan dimensi dipaparkan di dalamnya. Apabila pengguna mengubah saiz kotak, dimensi yang dipaparkan akan dikemas kini dalam masa nyata.

Langkah 1: Menyediakan Projek

Pertama, mari sediakan struktur asas untuk projek kami:

resize-tool/
├── index.html
├── styles.css
├── script.js

Langkah 2: Penanda

Berikut ialah reka letak ringkas untuk apl kami. Kotak boleh ubah saiz termasuk rentang teks untuk memaparkan dimensinya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Measuring Tool with Resize Observer API</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div>



<h2>
  
  
  Step 3: Styling the App
</h2>

<p>We’ll add some styles to make the resizable box more visually appealing:<br>
</p>

<pre class="brush:php;toolbar:false">body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #f0f0f0;
}

.container {
  position: relative;
  width: 80%;
  height: 80%;
}

.resizable {
  position: absolute;
  width: 300px;
  height: 200px;
  border: 2px dashed #007bff;
  background: rgba(0, 123, 255, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  resize: both;
  overflow: auto;
}

 .resizable span {
  background: white;
  padding: 5px;
  border-radius: 4px;
  font-size: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

Langkah 4: Menambah Penjejakan Ubah Saiz Masa Nyata

Sekarang mari hidupkan projek menggunakan API Pemerhati Ubah Saiz:

resize-tool/
├── index.html
├── styles.css
├── script.js

Langkah 5: Menguji Alat

Buka fail index.html dalam penyemak imbas anda.
Seret penjuru kotak untuk mengubah saiznya.
Tonton semasa dimensi dikemas kini dengan serta-merta!

Bagaimana Ia Berfungsi

Resize Observer API dimulakan untuk memantau perubahan saiz untuk elemen resizableBox. Ia mencetuskan panggilan balik apabila saiz elemen yang diperhatikan berubah.
Entri Pemerhati Ubah Saiz menyediakan dimensi yang dikemas kini melalui sifat borderBoxSize.
Nilai lebar dan ketinggian yang dikemas kini diekstrak dan dipaparkan secara dinamik dengan mengubah suai kandungan teks elemen di dalam kotak boleh ubah saiz.
Kesimpulan

Dalam tutorial ini, kami membina alat pengukur yang menyeronokkan dan interaktif menggunakan Resize Observer API. Projek ini menunjukkan cara API penyemak imbas boleh memudahkan tugas yang rumit.
Jika anda mencuba ini atau melanjutkannya lagi, sila kongsikan ciptaan anda dalam ulasan!
Juga, lihat blog CKEditor untuk artikel mengenai editor teks kaya, dan mulakan perjalanan anda dengan CKEditor 5 dengan mendaftar untuk percubaan percuma hari ini!

Atas ialah kandungan terperinci Membina Alat Pengukur dengan API Pemerhati Ubah Saiz. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

html if for try using Property number this display viewport

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimanakah Kari Berfungsi dengan Berbilang Fungsi Anak Panah dalam JavaScript?Artikel seterusnya：Bagaimanakah Kari Berfungsi dengan Berbilang Fungsi Anak Panah dalam JavaScript?

Artikel berkaitan

Lihat lagi