在现代网页开发中，JavaScript作为一门强大的脚本语言，扮演着至关重要的角色。无论是简单的交互效果还是复杂的动态功能，JavaScript都能轻松实现。为了帮助开发者快速上手和高效工作，这里整理了一份常用的JavaScript代码集合，涵盖从基础到进阶的各种场景。
1. 切换元素显示与隐藏
```javascript
function toggleElementVisibility(elementId) {
var element = document.getElementById(elementId);
if (element.style.display === 'none') {
element.style.display = 'block';
} else {
element.style.display = 'none';
}
}
```
这段代码可以用来切换某个HTML元素的显示状态。只需调用`toggleElementVisibility('elementId')`即可完成操作。
2. 获取当前日期并格式化输出
```javascript
function getCurrentDate() {
var today = new Date();
var day = String(today.getDate()).padStart(2, '0');
var month = String(today.getMonth() + 1).padStart(2, '0');
var year = today.getFullYear();
return `${year}-${month}-${day}`;
}
console.log(getCurrentDate()); // 输出类似 "2023-10-05"
```
此函数能够获取当前日期，并以`YYYY-MM-DD`的形式返回。这对于需要记录时间戳的应用场景非常实用。
3. 验证邮箱格式
```javascript
function validateEmail(email) {
var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
return re.test(String(email).toLowerCase());
}
console.log(validateEmail("test@example.com")); // true
```
该函数通过正则表达式验证输入是否符合标准的电子邮件格式。简单易用，适合表单验证。
4. 滚动到页面顶部
```javascript
function scrollToTop() {
window.scrollTo({ top: 0, behavior: 'smooth' });
}
document.getElementById('scrollTopButton').addEventListener('click', scrollToTop);
```
点击按钮后，页面会平滑滚动至顶部。这为用户提供了一种优雅的方式来回到页面开头。
5. 动态加载外部JavaScript文件
```javascript
function loadScript(src) {
var script = document.createElement('script');
script.src = src;
document.body.appendChild(script);
}
loadScript('https://example.com/script.js');
```
此方法允许你在运行时动态引入外部JavaScript文件，非常适合按需加载资源的情况。
总结
以上仅为部分常用JavaScript代码示例，但它们涵盖了大多数日常开发需求。掌握这些技巧不仅能够提升你的编码效率，还能让你更好地应对各种实际问题。希望这份“网页JS常用代码大全”能成为你编程路上的好帮手！
