在现代网站开发中，JavaScript 动作越来越受欢迎，并且被广泛应用于界面交互、数据验证、动态效果、异步请求、组件开发等场景。JavaScript 动作基于文档对象模型（DOM），可以控制页面元素的显示、隐藏、移动、缩放、旋转等，从而增强了用户体验。以下是几个常用的 JavaScript 动作示例。

第一种示例是悬停效果，即在鼠标移动到某个元素上时触发相应的动作。这种效果可以通过事件绑定和样式修改来实现。例如，当鼠标悬停在一个图片上时，图片会放大并显示阴影效果。

const img = document.querySelector('.image');img.addEventListener('mouseenter', () =>{img.style.transform = 'scale(1.2)';img.style.boxShadow = '0 0 10px rgba(0,0,0,0.6)';});img.addEventListener('mouseleave', () =>{img.style.transform = 'scale(1)';img.style.boxShadow = 'none';});

第二种示例是下拉菜单，即在鼠标点击某个元素时弹出一个菜单列表。这种效果可以通过事件绑定和样式修改来实现。例如，当点击一个按钮时，会下拉显示一个选项列表，再次点击则会收回。

const button = document.querySelector('.button');const menu = document.querySelector('.menu');button.addEventListener('click', () =>{if (menu.classList.contains('show')) {menu.classList.remove('show');} else {menu.classList.add('show');}});

第三种示例是表单验证，即在提交表单时验证表单中的数据是否合法。这种效果可以通过事件绑定和条件判断来实现。例如，在登录页面中，如果用户名和密码为空或不符合格式要求，则会提示用户重新输入。

const form = document.querySelector('.form');const username = document.querySelector('#username');const password = document.querySelector('#password');form.addEventListener('submit', (event) =>{if (!username.value || !password.value) {event.preventDefault();alert('用户名或密码不能为空');} else if (username.value.length< 6 || password.value.length< 6) {event.preventDefault();alert('用户名或密码长度不能少于6位');} else {// submit form}});

以上是三个常用的 JavaScript 动作示例，它们分别展示了悬停效果、下拉菜单和表单验证的实现方式。除此之外，还有很多其他的 JavaScript 动作可以使用，例如轮播图、导航菜单、遮罩层、搜索框提示等，开发者可以结合具体场景和需求，自由运用 JavaScript 动作。