Membangunkan aplikasi memo web berdasarkan JavaScript

Membangunkan aplikasi memo web berdasarkan JavaScript

Memo adalah bahagian penting dalam kehidupan kita dan digunakan untuk merekodkan perkara yang perlu dilakukan, tarikh penting, rancangan, dsb. Dengan perkembangan Internet, permintaan untuk aplikasi memo web juga semakin meningkat. Dalam artikel ini, kami akan menggunakan JavaScript untuk membangunkan aplikasi memo web mudah.

Sebelum kita mula, kita perlu menyediakan beberapa kod HTML dan CSS asas. Pertama, kami memerlukan senarai untuk memaparkan memo:

<ul id="memos"></ul>

Kemudian, kami memerlukan kotak input dan butang untuk menambah memo baharu:

<input id="memoInput" type="text" placeholder="输入备忘录">
<button id="addButton">添加</button>

Seterusnya, kami perlu menulis beberapa kod CSS untuk mencantikkan memo web kami Aplikasi:

body {
  font-family: Arial, sans-serif;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  margin-bottom: 10px;
}

input {
  padding: 5px;
  font-size: 16px;
}

button {
  padding: 5px 10px;
  background-color: #428bca;
  color: white;
  border: none;
  cursor: pointer;
}

Di atas adalah kod HTML dan CSS asas yang kami perlukan. Seterusnya, kami akan menggunakan JavaScript untuk menambah kefungsian pada aplikasi memo web kami.

Pertama, kita perlu mendapatkan rujukan kotak input dan butang:

var memoInput = document.getElementById('memoInput');
var addButton = document.getElementById('addButton');

Kemudian, kita perlu menambah pendengar acara klik untuk butang Apabila butang diklik, fungsi yang menambah memo akan dicetuskan:

addButton.addEventListener('click', addMemo);

Seterusnya, Kita perlu menentukan fungsi untuk menambah memo. Fungsi ini akan mendapat nilai kotak input dan menambahnya pada senarai memo:

function addMemo() {
  var memoText = memoInput.value;
  var memoList = document.getElementById('memos');
  
  if (memoText) {
    var memoItem = document.createElement('li');
    memoItem.textContent = memoText;
    memoList.appendChild(memoItem);
    memoInput.value = '';
  }
}

Dalam kod di atas, kita mula-mula mendapat nilai kotak input dan semak sama ada ia kosong. Jika tidak kosong, buat elemen <li> baharu dan tetapkan nilai kotak input kepada kandungan teksnya. Kemudian, tambahkan item memo baharu pada senarai memo dan tetapkan semula nilai kotak input kepada kosong.

Akhir sekali, kami perlu memulakan aplikasi memo web kami selepas halaman dimuatkan dan menambah beberapa memo awal pada senarai memo:

window.onload = function() {
  var initialMemos = ['购买礼物', '完成报告', '约会晚餐'];
  var memoList = document.getElementById('memos');
  
  for (var i = 0; i < initialMemos.length; i++) {
    var memoItem = document.createElement('li');
    memoItem.textContent = initialMemos[i];
    memoList.appendChild(memoItem);
  }
}

Dalam kod di atas, kami menggunakan tatasusunan untuk menyimpan beberapa memo awal. Kemudian, gunakan gelung untuk mengulang setiap nota dalam tatasusunan dan tambahkannya pada senarai nota secara bergilir-gilir.

Melalui langkah di atas, kami telah menyelesaikan pembangunan aplikasi memo web mudah. Pengguna boleh memasukkan kandungan dalam kotak input dan klik butang untuk menambah memo. Semua memo akan dipaparkan dalam senarai memo.

Melalui mendengar acara JavaScript dan manipulasi DOM, kami boleh melaksanakan fungsi interaktif aplikasi web dengan mudah. Saya harap kod contoh dalam artikel ini boleh membantu anda dalam memahami dan mempelajari JavaScript untuk membangunkan aplikasi web!

Atas ialah kandungan terperinci Membangunkan aplikasi memo web berdasarkan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!