课程速达

<!-- HTML部分 -->
<button class="color-button">点击我变色</button>

<!-- CSS部分 -->
<style>
.color-button {
  padding: 12px 24px;
  font-size: 16px;
  border: none;
  border-radius: 8px;
  background-color: #6366f1;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

.color-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}
</style>

<!-- JavaScript部分 -->
<script>
const button = document.querySelector('.color-button');
const colors = ['#6366f1', '#a855f7', '#ec4899', '#10b981', '#3b82f6'];

button.addEventListener('click', function() {
  const randomColor = colors[Math.floor(Math.random() * colors.length)];
  this.style.backgroundColor = randomColor;
});
</script>

<!-- HTML部分 -->
<input type="text" id="name-input" placeholder="请输入你的名字">
<button id="greet-button">打招呼</button>
<p id="greeting-message"></p>

<!-- JavaScript部分 -->
<script>
const nameInput = document.getElementById('name-input');
const greetButton = document.getElementById('greet-button');
const greetingMessage = document.getElementById('greeting-message');

// 打招呼的不同方式
const greetings = [
  '你好，{name}！欢迎来到编程世界！',
  '嗨，{name}！今天过得怎么样？',
  '你好呀，{name}！很高兴见到你！',
  '嘿，{name}！准备好学习编程了吗？',
  '哈喽，{name}！编程很有趣，对吧？'
];

greetButton.addEventListener('click', function() {
  const name = nameInput.value.trim();
  if (name) {
    // 随机选择一种打招呼的方式
    const randomGreeting = greetings[Math.floor(Math.random() * greetings.length)];
    // 替换名字占位符
    greetingMessage.textContent = randomGreeting.replace('{name}', name);
    // 添加动画效果
    greetingMessage.classList.add('animate-fade-in');
    setTimeout(() => {
      greetingMessage.classList.remove('animate-fade-in');
    }, 800);
  } else {
    greetingMessage.textContent = '请先输入你的名字哦！';
  }
});
</script>

<!-- HTML部分 -->
<input type="text" id="todo-input" placeholder="添加新的待办事项...">
<button id="add-todo">添加</button>
<ul id="todo-list"></ul>

<!-- JavaScript部分 -->
<script>
const todoInput = document.getElementById('todo-input');
const addTodoButton = document.getElementById('add-todo');
const todoList = document.getElementById('todo-list');

addTodoButton.addEventListener('click', addTodo);
todoInput.addEventListener('keypress', function(e) {
  if (e.key === 'Enter') {
    addTodo();
  }
});

function addTodo() {
  const todoText = todoInput.value.trim();
  if (todoText) {
    // 创建新的待办事项元素
    const todoItem = document.createElement('li');
    todoItem.className = 'todo-item';
    todoItem.innerHTML = `
      <span>${todoText}</span>
      <button class="delete-btn">删除</button>
    `;
    
    // 添加删除功能
    const deleteButton = todoItem.querySelector('.delete-btn');
    deleteButton.addEventListener('click', function() {
      todoItem.classList.add('fade-out');
      setTimeout(() => {
        todoList.removeChild(todoItem);
      }, 300);
    });
    
    // 添加点击切换完成状态
    todoItem.addEventListener('click', function(e) {
      if (e.target !== deleteButton) {
        this.classList.toggle('completed');
      }
    });
    
    // 添加到列表中
    todoList.appendChild(todoItem);
    
    // 清空输入框
    todoInput.value = '';
    
    // 自动聚焦到输入框
    todoInput.focus();
  }
}
</script>