简单侧边栏便签功能 HTML 代码示例
<!DOCTYPE html>
<html>
<head>
<title>侧边栏便签</title>
<style>
body {
font-family: Arial, sans-serif;
}
.sidebar {
width: 250px;
background-color: #f1f1f1;
padding: 20px;
position: fixed;
top: 0;
left: 0;
height: 100%;
}
.sidebar h2 {
margin-top: 0;
}
.note {
background-color: #fff;
border: 1px solid #ddd;
padding: 10px;
margin-bottom: 10px;
}
.note textarea {
width: 100%;
height: 100px;
}
.note button {
margin-top: 10px;
}
</style>
</head>
<body>
<div class='sidebar'>
<h2>便签</h2>
<div class='note'>
<textarea id='note-input' placeholder='输入便签内容'></textarea>
<button onclick='saveNote()'>保存</button>
</div>
<div id='note-list'></div>
</div>
<script>
function saveNote() {
var noteInput = document.getElementById('note-input');
var noteList = document.getElementById('note-list');
var noteText = noteInput.value;
if (noteText) {
var note = document.createElement('div');
note.className = 'note';
note.innerText = noteText;
noteList.appendChild(note);
noteInput.value = '';
}
}
</script>
</body>
</html>
<p>该代码实现了一个简单的侧边栏便签功能。用户可以在文本框中输入便签内容，点击保存按钮后，便签将被添加到便签列表中。</p>
原文地址: https://www.cveoy.top/t/topic/lC4w 著作权归作者所有。请勿转载和采集!