以下列举了一些典型的JavaScript网页设计实例,它们展示了多样化的功能和交互体验,非常适合初学者及中级开发者学习借鉴如下
目录
以下列举了一些典型的JavaScript网页设计实例，它们展示了多样化的功能和交互体验，非常适合初学者及中级开发者学习借鉴如下:
- 动态导航栏
功能描述：创建响应导航栏，当用户滚动页面时，导航栏固定在页面顶部，并显示当前页面部分。
技术点：
window.scroll事件监控页面滚动。classList动态添加/移除 CSS 类。IntersectionObserver检测元素是否进入视口。示例代码：
window.addEventListener('scroll', () => {
const nav = document.querySelector('nav');
if (window.scrollY > 50) {
nav.classList.add('fixed-nav');
} else {
nav.classList.remove('fixed-nav');
} }); ```
---
2. 图片轮播（Carousel）
- 功能描述：用户可以手动切换图片，实现自动播放的图片轮播组件。
- 技术点：
- `setInterval` 实现自动播放。
- `transform: translateX` 实现图片切换动画。
- 监控事件(点击按钮切换图片)。
- 示例代码：
```javascript
let currentIndex = 0;
const slides = document.querySelectorAll('.carousel img');
const totalSlides = slides.length;
function showSlide(index) {
slides.forEach((slide, i) => {
slide.style.transform = `translateX(${100 * (i - index)}%)`;
}); }
document.querySelector('.next').addEventListener('click', () => {
currentIndex = (currentIndex 1) % totalSlides;
showSlide(currentIndex);
});
document.querySelector('.prev').addEventListener('click', () => {
currentIndex = (currentIndex - 1 totalSlides) % totalSlides;
showSlide(currentIndex);
}); ```
#### ﹉
3. 模态框（Modal）
- 功能描述：单击按钮弹出模态框，单击关闭按钮或背景区域关闭模态框。
- 技术点：
- `display: none/block` 显示和隐藏控制模态框。
- 委托事件(点击背景关闭模态框)。
- 示例代码：
```javascript
const modal = document.getElementById('modal');
const openBtn = document.getElementById('open-modal');
const closeBtn = document.getElementById('close-modal');
openBtn.addEventListener('click', () => {
modal.style.display = 'block';
});
closeBtn.addEventListener('click', () => {
modal.style.display = 'none';
});
window.addEventListener('click', (e) => {
if (e.target === modal) {
modal.style.display = 'none';
} }); ```
---
4. 表单验证
- 功能描述：实时验证用户输入的表单数据，如邮箱格式、密码强度等。
- 技术点：
- `input` 监控用户输入事件。
- 正则表达式验证格式。
- 动态显示错误提示。
- 示例代码：
```javascript
const emailInput = document.getElementById('email');
const errorMsg = document.getElementById('error-msg');
emailInput.addEventListener('input', () => {
const email = emailInput.value;
if ()/**[^\^\^s@] @[^\s@] [^\s@] $/.test(email)) {
errorMsg.textContent = 请输入有效的邮箱地址;
} else {
errorMsg.textContent = '';
} }); ```
---
5. 无限滚动加载
- 功能描述：当用户滚动到页面底部时，会自动加载更多内容。
- 技术点：
- `window.scroll` 监控滚动事件。
- `fetch` 动态加载数据。
- `IntersectionObserver` 检测页面底部。
- 示例代码：
```javascript
let page = 1;
const loadMore = document.getElementById('load-more');
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
fetch(`/api/data?page=${page}`)
.then(response => response.json())
.then(data => {
// 渲染新数据
page ;
}); } });
observer.observe(loadMore);- 拖拽功能
功能描述：实现元素的拖动功能，用户可将页面上的元素拖动到指定区域。
技术点：
dragstart、dragend事件。draggable属性。示例代码：
const draggable = document.getElementById('draggable');
const dropzone = document.getElementById('dropzone');
draggable.addEventListener('dragstart', (e) => {
e.dataTransfer.setData('text/plain', e.target.id);
});
dropzone.addEventListener('dragover', (e) => {
e.preventDefault();
});
dropzone.addEventListener('drop', (e) => {
e.preventDefault();
const id = e.dataTransfer.getData('text/plain');
const element = document.getElementById(id);
dropzone.appendChild(element);
}); ```
---
7. 黑暗模式切换
- 功能描述：用户点击按钮切换页面的黑暗模式和亮色模式。
- 技术点：
- `localStorage` 保留用户偏好。
- `classList.toggle` 切换 CSS 类。
- 示例代码：
```javascript
const toggleBtn = document.getElementById('toggle-mode');
const body = document.body;
toggleBtn.addEventListener('click', () => {
body.classList.toggle('dark-mode');
localStorage.setItem('theme', body.classList.contains('dark-mode') ? 'dark' : 'light');
});
// 加载主题的初始化
const savedTheme = localStorage.getItem('theme');
if (savedTheme === 'dark') {
body.classList.add('dark-mode'); } ```
---