简单js实现
以下是一个简单的 JavaScript 实现示例，展示如何创建一个交互式按钮并处理点击事件：
基础交互按钮
HTML 部分需包含一个按钮元素：
<button id="myButton">点击我</button>JavaScript 部分实现点击计数功能：
// 获取DOM元素
const button = document.getElementById('myButton');
let count = 0;
// 添加事件监听器
button.addEventListener('click', () => {
count++;
button.textContent = `已点击 ${count} 次`;
});动态内容修改
通过 JavaScript 修改页面内容：
const header = document.createElement('h1');
header.textContent = '动态创建的标题';
document.body.appendChild(header);简单表单验证
实现基本的表单验证功能：
<input type="text" id="userInput" placeholder="输入内容">
<button id="submitBtn">提交</button>
<p id="errorMsg" style="color:red;"></p>const submitBtn = document.getElementById('submitBtn');
const userInput = document.getElementById('userInput');
const errorMsg = document.getElementById('errorMsg');
submitBtn.addEventListener('click', () => {
if (userInput.value.trim() === '') {
errorMsg.textContent = '输入不能为空';
} else {
errorMsg.textContent = '';
alert(`你输入的内容是: ${userInput.value}`);
}
});定时器示例
使用 setTimeout 实现延迟执行：
setTimeout(() => {
console.log('这段代码将在3秒后执行');
}, 3000);数组操作
展示基本的数组操作方法：
const fruits = ['苹果', '香蕉', '橙子'];
fruits.push('葡萄'); // 添加元素
const removedItem = fruits.pop(); // 移除最后一个元素
const newArray = fruits.map(item => item.toUpperCase());这些示例涵盖了 JavaScript 的常见基础用法，包括 DOM 操作、事件处理、动态内容创建和基本逻辑控制。可以根据具体需求进行组合和扩展。
