当前位置：首页 > JavaScript

简单js实现

2026-04-06 03:18:22JavaScript

以下是一个简单的 JavaScript 实现示例，展示如何创建一个交互式按钮并处理点击事件：

基础交互按钮

HTML 部分需包含一个按钮元素：

<button id="myButton">点击我</button>

JavaScript 部分实现点击计数功能：

简单js实现

// 获取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);

简单表单验证

实现基本的表单验证功能：

简单js实现

<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 操作、事件处理、动态内容创建和基本逻辑控制。可以根据具体需求进行组合和扩展。