JavaScript秘技：15个惊艳功能

目录

• 1. 获取操作系统信息
• 2. 使用void(0)防止页面刷新
• 3. 重定向到新页面
• 4. 电子邮件地址验证
• 5. 获取当前URL
• 6. 使用正则表达式检测移动浏览器
• 7. 不使用正则表达式检测移动浏览器
• 8. 检测页面上的JavaScript是否被禁用
• 9. 获取模块的元数据
• 10. 获取日期的时区偏移
• 11. 将鼠标光标设置为等待状态
• 12. 获取复选框的状态
• 13. 为控制台消息添加 CSS 样式
• 14. 禁用网页右键点击
• 15. 捕获浏览器的后退按钮事件

1. 获取操作系统信息

使用简单的JavaScript就能获取操作系统的详细信息。window.navigator对象包含了访问者浏览器的操作系统详情。一些操作系统属性可以在platform属性中找到。

您可以使用以下代码片段来获取这些信息：

const os = navigator.platform
console.log(os)

这段代码会输出用户的操作系统平台信息。例如，对于Windows用户可能显示"Win32"，而对于Mac用户可能显示"MacIntel"。

除了platform属性，navigator对象还提供了其他有用的信息：

1. navigator.userAgent: 返回浏览器的用户代理字符串，包含了更多关于浏览器和操作系统的信息。
2. navigator.appVersion: 返回浏览器的版本信息。
3. navigator.language: 返回浏览器的首选语言。

需要注意的是，虽然这些方法可以提供有用的信息，但它们并不总是100%可靠，因为一些用户可能会修改他们的浏览器设置或使用特殊的隐私保护工具。因此，在实际应用中，这些信息应该仅作为参考，不应过度依赖。

这个技巧在进行网站分析、用户体验优化或者针对特定操作系统提供定制化内容时特别有用。

2. 使用void(0)防止页面刷新

void(0)是一个非常实用的JavaScript技巧，它可以用来防止页面刷新。这在消除不必要的效果时非常有帮助，因为它会返回一个未定义的原始值。

这个技巧常用于包含锚点元素（anchor elements）的HTML文档中。通常情况下，当你点击一个链接时，浏览器会加载一个新页面或刷新当前页面。但使用void(0)可以阻止这种默认行为。

例如，以下链接会在不重新加载页面的情况下显示一个警告框：

<a href="javascript:void(0);" onclick="alert('click!');">Click</a>

这段代码的工作原理如下：

1. href="javascript:void(0);"告诉浏览器在点击链接时执行JavaScript代码，而不是导航到新页面。
2. void(0)返回undefined，这意味着没有返回值，因此不会触发页面刷新。
3. onclick属性定义了点击链接时要执行的JavaScript代码。

这个技巧在以下场景中特别有用：

• 创建纯装饰性的链接
• 实现单页应用（SPA）中的导航
• 在不刷新页面的情况下触发JavaScript事件

需要注意的是，虽然这是一个有用的技巧，但在现代Web开发中，我们通常更倾向于使用事件监听器和preventDefault()方法来实现类似的效果。例如：

document.querySelector('a').addEventListener('click', function (event) {
  event.preventDefault()
  alert('click!')
})

这种方法可以更好地分离HTML和JavaScript，提高代码的可维护性。

无论如何，了解void(0)的作用仍然是很有价值的，特别是在处理遗留代码或需要快速实现的情况下。

3. 重定向到新页面

在原生JavaScript中，您可以通过设置window对象的location属性的href值来将用户重定向到一个新页面。这是一个简单而强大的功能，可以在不同场景下灵活使用。

以下是实现重定向的语法：

function redirect() {
  window.location.href = 'newPage.html'
}

当您调用redirect函数时，浏览器将导航到newPage.html。

让我们深入解释一下这个过程：

1. window：指的是浏览器窗口。这是JavaScript中的全局对象，代表了当前的浏览上下文。

2. location：这是window对象的一个属性，包含了当前URL的信息。它不仅可以用来获取当前页面的URL信息，还可以用来改变当前页面的URL。

3. href：这是location对象的一个属性，包含了完整的URL。通过修改这个属性，您可以改变URL，从而使浏览器加载新的页面。

这个技巧在很多场景中都非常有用，例如：

• 用户登录后自动跳转到主页
• 根据用户的操作跳转到相应的页面
• 实现简单的单页应用导航

除了使用href，还有其他几种方法可以实现页面重定向：

// 方法1：使用assign方法
window.location.assign('newPage.html')

// 方法2：直接改变location
window.location = 'newPage.html'

// 方法3：使用replace方法（不会在浏览历史中留下记录）
window.location.replace('newPage.html')

需要注意的是，虽然这些方法都可以实现页面重定向，但它们在浏览器历史记录的处理上有所不同。例如，replace方法不会在浏览历史中留下记录，这意味着用户不能通过浏览器的"后退"按钮返回到之前的页面。

在现代Web开发中，特别是在单页应用（SPA）中，我们通常会使用前端路由库（如React Router或Vue Router）来处理页面导航，而不是直接操作window.location。但是，理解和掌握这个基本的JavaScript重定向技巧仍然很有价值，尤其是在处理传统网站或需要进行服务器端重定向时。

4. 电子邮件地址验证

在Web开发中，电子邮件地址的验证是一个常见而重要的任务。虽然很多库（如Zod）提供了默认的验证函数，但了解如何使用原生JavaScript进行邮箱验证仍然很有价值。以下是两种验证电子邮件地址的方法，各有其优点：

完整的电子邮件验证

这个正则表达式提供了一个相对严格的电子邮件验证：

function validateEmail(email) {
  var re =
    /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return re.test(String(email).toLowerCase())
}

这个函数的特点：

• 严格匹配大多数标准的电子邮件格式
• 不接受Unicode字符
• 可能会拒绝一些不常见但有效的电子邮件地址

简化版（支持Unicode）

如果你需要一个更简单的版本，并且希望支持Unicode字符，可以使用以下函数：

function validateEmailUnicode(email) {
  var re = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return re.test(String(email).toLowerCase())
}

这个简化版本的特点：

• 匹配大多数有效的电子邮件地址
• 支持Unicode字符，适用于国际化的应用
• 避免了过于复杂的正则表达式的一些陷阱
• 可能会接受一些技术上无效但格式正确的地址

使用建议

1. 选择适合你需求的版本。如果你的应用需要支持国际用户，第二个函数可能更合适。

2. 记住，客户端的验证只是第一道防线。始终在服务器端进行二次验证。

3. 考虑使用HTML5的type="email"输入字段，这可以提供基本的浏览器级别验证。

4. 对于关键应用，考虑使用电子邮件验证服务或发送验证邮件来确保地址的有效性。

5. 正则表达式虽然强大，但也可能变得难以维护。在团队开发中，确保对复杂的正则表达式进行良好的文档说明。

这些JavaScript技巧可以帮助你快速实现电子邮件验证，提高用户体验和数据质量。但要记住，没有一个正则表达式可以捕获所有可能的有效电子邮件地址，所以在实际应用中要根据具体需求和上下文来选择合适的验证方法。

5. 获取当前URL

确实，使用原生JavaScript就能轻松获取当前页面的URL！这个功能在许多场景下都非常有用，比如分析用户行为、动态调整页面内容或实现导航功能。让我们深入了解一下这两种方法：

使用 window.location.href

console.log('location.href', window.location.href) // 返回完整URL

window.location.href 是最常用且最可靠的获取当前URL的方法。它的优点包括：

• 可读可写：不仅可以获取URL，还可以通过赋值来改变URL，实现页面跳转。
• 跨浏览器兼容性好：在所有现代浏览器中都能一致工作。
• 返回完整的URL：包括协议、域名、路径、查询参数和片段标识符。

例如，您可以这样使用它：

// 获取当前URL
const currentURL = window.location.href
console.log('当前页面URL:', currentURL)

// 跳转到新页面
window.location.href = 'https://example.com'

使用 document.URL

console.log('document.URL', document.URL) // 返回完整URL（只读）

document.URL 是另一种获取当前URL的方法，但它有一些限制：

• 只读：不能用于改变URL或导航到新页面。
• 在某些浏览器（特别是旧版Firefox）中可能存在兼容性问题。

尽管如此，在只需要读取URL的场景中，document.URL 仍然是一个有效的选择。

使用建议

1. 首选 window.location.href：它更加通用，既可以读取也可以修改URL。

2. 如果您的项目需要兼容旧版浏览器，特别是Firefox，最好避免使用 document.URL。

3. 除了完整URL，window.location 对象还提供了其他有用的属性：

   • window.location.pathname: 返回URL的路径部分
   • window.location.search: 返回URL的查询字符串部分
   • window.location.hash: 返回URL的片段标识符部分

4. 在单页应用（SPA）中，可能需要使用专门的路由库来处理URL，而不是直接操作 window.location。

5. 如果您只需要URL的特定部分，可以考虑使用 URL 对象：

   const url = new URL(window.location.href)
   console.log(url.hostname) // 输出域名
   console.log(url.pathname) // 输出路径
   

通过掌握这些JavaScript技巧，您可以轻松地在您的Web应用中实现URL相关的功能，无论是简单的当前页面URL获取，还是更复杂的URL解析和操作。这对于开发动态网页、实现网站分析或创建响应式用户界面都是非常有用的。

6. 使用正则表达式检测移动浏览器

使用正则表达式检测移动浏览器是一个非常巧妙的技巧。这种方法可以快速判断用户是否正在使用移动设备浏览网页。让我们来看看这个令人惊叹的代码片段：

window.mobilecheck = function () {
  var mobileCheck = false
  ;(function (a) {
    if (
      /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(
        a
      ) ||
      /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(
        a.substr(0, 4)
      )
    )
      mobileCheck = true
  })(navigator.userAgent || navigator.vendor || window.opera)
  return mobileCheck
}

这个巧妙的代码片段确实展示了JavaScript和正则表达式的强大之处。它是一个优秀的例子，说明了如何用简单的代码解决实际问题。

7. 不使用正则表达式检测移动浏览器

确实，这种不使用正则表达式的方法来检测移动浏览器更加直观和易于理解。让我们深入探讨一下这个技巧：

function detectmob() {
  if (
    navigator.userAgent.match(/Android/i) ||
    navigator.userAgent.match(/webOS/i) ||
    navigator.userAgent.match(/iPhone/i) ||
    navigator.userAgent.match(/iPad/i) ||
    navigator.userAgent.match(/iPod/i) ||
    navigator.userAgent.match(/BlackBerry/i) ||
    navigator.userAgent.match(/Windows Phone/i)
  ) {
    return true
  } else {
    return false
  }
}

这个函数的工作原理如下：

1. 它检查navigator.userAgent字符串是否包含特定的移动设备关键词。
2. 使用match()方法和/i标志进行不区分大小写的匹配。
3. 如果找到任何匹配项，函数返回true，表示用户正在使用移动设备；否则返回false。

这种方法的优点：

1. 代码更加清晰，易于阅读和理解。
2. 容易修改和扩展，可以轻松添加或删除设备类型。
3. 对于不熟悉复杂正则表达式的开发者来说更友好。

使用建议：

1. 可以根据需要轻松添加新的设备类型，例如：

   navigator.userAgent.match(/Samsung/i) || navigator.userAgent.match(/LG/i)
   

2. 考虑将设备列表提取为一个数组，使代码更加模块化：

   const mobileDevices = [
     'Android',
     'webOS',
     'iPhone',
     'iPad',
     'iPod',
     'BlackBerry',
     'Windows Phone',
   ]
   
   function detectmob() {
     return mobileDevices.some((device) => navigator.userAgent.match(new RegExp(device, 'i')))
   }
   

3. 可以结合使用，返回具体的设备类型：

   function getDeviceType() {
     const devices = {
       Android: /Android/i,
       iOS: /iPhone|iPad|iPod/i,
       WindowsPhone: /Windows Phone/i,
       // 添加更多设备类型
     }
   
     for (let device in devices) {
       if (navigator.userAgent.match(devices[device])) {
         return device
       }
     }
     return 'Desktop' // 如果都不匹配，假定为桌面设备
   }
   

需要注意的是，这种方法虽然直观，但仍然有一些局限性：

1. 它仍然依赖于userAgent字符串，which可能被修改或伪装。
2. 可能需要定期更新设备列表以包含新的移动设备。
3. 对于一些不常见的设备可能无法识别。

总的来说，这种方法提供了一个很好的平衡点，在简单性和有效性之间取得了平衡。它特别适合那些需要快速实现移动设备检测，而又不想深入研究复杂正则表达式的开发者。在实际应用中，可以根据项目的具体需求来选择使用这种方法还是之前讨论的正则表达式方法。

8. 检测页面上的JavaScript是否被禁用

这是一个非常实用的技巧，可以帮助我们为那些禁用了JavaScript的用户提供替代内容或警告。让我们深入探讨一下这个方法：

<script type="javascript">
  // JavaScript代码放在这里
</script>
<noscript>
  <a href="next_page.html?noJS=true">页面上的JavaScript已被禁用。请尽快启用它！</a>
</noscript>

这个技巧的工作原理如下：

1. <script> 标签包含正常的JavaScript代码，这些代码只有在JavaScript启用时才会执行。

2. <noscript> 标签内的内容只有在浏览器不支持JavaScript或JavaScript被禁用时才会显示。

3. 在这个例子中，当JavaScript被禁用时，用户会看到一个链接，提醒他们启用JavaScript。

这个方法的优点：

1. 简单直接：不需要复杂的JavaScript代码来检测。
2. 兼容性好：几乎所有的浏览器都支持<noscript>标签。
3. 即时反馈：用户立即就能看到相关提示。

使用建议：

1. 提供有意义的替代内容：

   <noscript>
     <p>为了获得最佳体验，请启用JavaScript。</p>
     <p>如果您无法启用JavaScript，以下是网站的基本版本链接：</p>
     <a href="/basic-version">访问基本版本</a>
   </noscript>
   

2. 结合服务器端检测：

   <noscript>
     <meta http-equiv="refresh" content="0; url=/no-js-version" />
   </noscript>
   

   这会在JavaScript被禁用时自动重定向到一个特定的页面。

3. 添加样式以提高可见度：

   <noscript>
     <style>
       .js-disabled-message {
         background-color: #ffeeee;
         border: 1px solid #ff0000;
         padding: 10px;
         margin: 10px 0;
       }
     </style>
     <div class="js-disabled-message">JavaScript已被禁用。某些功能可能无法正常工作。</div>
   </noscript>
   

4. 在复杂的单页应用（SPA）中，考虑提供一个完全不依赖JavaScript的简化版本：

   <noscript>
     <p>此网站需要JavaScript才能正常运行。</p>
     <p>请启用JavaScript或使用我们的<a href="/static-version">静态版本</a>。</p>
   </noscript>
   

需要注意的是：

1. 不要过度依赖这种方法。尽量设计出在没有JavaScript的情况下也能基本工作的网站。

2. 记住，一些用户可能是出于安全或隐私考虑而禁用JavaScript，所以提供的替代内容应该尊重这一选择。

3. 在现代Web开发中，完全禁用JavaScript的用户相对较少，但仍然存在。提供良好的降级体验可以提高网站的整体可访问性。

这个技巧展示了如何优雅地处理JavaScript被禁用的情况，是构建健壮且包容性网站的重要部分。它提醒我们要考虑到各种用户场景，确保网站对所有用户都是可用的。

9. 获取模块的元数据

import.meta对象是ES模块系统中一个非常有用但可能不太为人所知的特性。它允许我们访问当前模块的上下文特定元数据。让我们深入探讨这个强大的功能：

;<script type="module" src="welcome-module.js"></script>

// 在welcome-module.js中
console.log(import.meta) // { url: "file:///home/user/welcome-module.js" }

这个特性的工作原理：

1. import.meta是一个只读的对象，包含了当前模块的元数据。
2. 在浏览器中，它通常包含url属性，表示模块的URL。
3. 在Node.js等其他环境中，可能会包含不同的或额外的信息。

import.meta的主要用途：

1. 获取模块的URL：

   const moduleURL = new URL('./', import.meta.url)
   console.log(moduleURL.pathname)
   

2. 构建相对路径：

   const imagePath = new URL('./images/logo.png', import.meta.url)
   

3. 环境检测：

   if (import.meta.url.startsWith('file:')) {
     console.log('This module is running locally')
   } else {
     console.log('This module is running on a server')
   }
   

4. 在不同环境中提供不同的行为：

   const config = import.meta.env === 'production' ? productionConfig : developmentConfig
   

使用建议：

1. 动态导入资源：

   const response = await fetch(new URL('./data.json', import.meta.url))
   const data = await response.json()
   

2. 在Web Workers中使用：

   const worker = new Worker(new URL('./worker.js', import.meta.url))
   

3. 结合import()动态导入模块：

   const module = await import(new URL('./dynamic-module.js', import.meta.url))
   

4. 在构建工具中使用： 某些构建工具（如Vite）扩展了import.meta，添加了额外的属性，如import.meta.env。

需要注意的是：

1. import.meta只在ES模块中可用，不能在普通的脚本中使用。

2. 不同环境（浏览器、Node.js等）可能提供不同的import.meta属性。

3. 在使用import.meta.url时，要注意URL的编码问题，特别是在处理包含特殊字符的路径时。

4. 虽然import.meta是只读的，但它的属性可能是可写的。在某些情况下，这可能导致意外的行为。

示例：创建一个通用的资源加载器

export async function loadResource(relativePath) {
  const resourceUrl = new URL(relativePath, import.meta.url)
  const response = await fetch(resourceUrl)
  if (!response.ok) {
    throw new Error(`Failed to load resource: ${resourceUrl}`)
  }
  return response
}

// 使用方法
const textContent = await loadResource('./data.txt').then((res) => res.text())
const jsonData = await loadResource('./config.json').then((res) => res.json())

这个技巧展示了现代JavaScript模块系统的强大功能。通过import.meta，我们可以编写更加动态和环境感知的模块，这在构建大型、复杂的应用程序时特别有用。它为模块提供了更多的上下文信息，使得模块可以更智能地适应不同的运行环境。

10. 获取日期的时区偏移

您提到的这个技巧确实非常实用，特别是在处理跨时区的应用程序时。让我们深入探讨一下这个方法：

var offset = new Date().getTimezoneOffset()
console.log(offset) // 例如：-330

这个方法的工作原理：

1. getTimezoneOffset() 是 Date 对象的一个方法。
2. 它返回当前本地时间与协调世界时(UTC)之间的差值，以分钟为单位。
3. 返回值是负数表示本地时间早于UTC，正数表示晚于UTC。

解读返回值：

• 例如，-330 表示本地时间比 UTC 早 5 小时 30 分钟（即 UTC+5:30）。
• 330 则表示本地时间比 UTC 晚 5 小时 30 分钟（即 UTC-5:30）。

这个方法的一些重要用途：

1. 时区转换：

   function convertToUTC(date) {
     return new Date(date.getTime() + date.getTimezoneOffset() * 60000)
   }
   
   let localDate = new Date()
   let utcDate = convertToUTC(localDate)
   console.log('本地时间：', localDate.toLocaleString())
   console.log('UTC时间：', utcDate.toLocaleString())
   

2. 显示用户友好的时区信息：

   function getTimeZoneString() {
     const offset = new Date().getTimezoneOffset()
     const hours = Math.abs(Math.floor(offset / 60))
     const minutes = Math.abs(offset % 60)
     const sign = offset > 0 ? '-' : '+'
     return `UTC${sign}${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`
   }
   
   console.log('您当前的时区是：', getTimeZoneString())
   

3. 在日期计算中考虑时区：

   function addDays(date, days) {
     let result = new Date(date)
     result.setDate(result.getDate() + days)
     let offsetDiff = result.getTimezoneOffset() - date.getTimezoneOffset()
     result.setMinutes(result.getMinutes() - offsetDiff)
     return result
   }
   
   let currentDate = new Date()
   let futureDate = addDays(currentDate, 30)
   console.log('30天后的日期：', futureDate.toLocaleString())
   

需要注意的几点：

1. 时区偏移可能会因夏令时而变化。在某些地区，一年中的不同时期可能会有不同的偏移值。

2. 这个方法返回的是系统设置的时区偏移，而不一定是用户当前所在的实际地理位置的时区。

3. 在处理跨时区的日期时间问题时，考虑使用专门的库（如 Moment.js 或 date-fns）可能会更加方便和可靠。

4. 现代 JavaScript 还提供了 Intl.DateTimeFormat API，它可以提供更丰富的本地化日期时间信息：

   const formatter = new Intl.DateTimeFormat('en-US', {
     timeZone: 'America/New_York',
     timeZoneName: 'long',
   })
   console.log(formatter.format(new Date())) // 例如：7/6/2024, Eastern Daylight Time
   

这个技巧展示了 JavaScript 内置的日期处理能力。虽然看似简单，但在处理国际化应用、跨时区通信或者需要精确时间计算的场景中，它可以发挥重要作用。理解并正确使用时区信息可以帮助开发者创建更加健壮和用户友好的应用程序。

11. 将鼠标光标设置为等待状态

这是一个非常实用的技巧，特别是在需要向用户指示正在进行处理或加载操作时。让我们深入探讨这个功能：

function myFunction() {
  window.document.body.style.cursor = 'wait'
}

这个函数的工作原理：

1. 它通过 window.document.body.style 访问整个页面的 body 元素的样式。
2. 将 cursor 属性设置为 "wait"，这会将鼠标光标变为等待状态（通常是一个沙漏或旋转圆圈）。

这个技巧的扩展用法和注意事项：

1. 恢复默认光标：

   function resetCursor() {
     window.document.body.style.cursor = 'default'
   }
   

2. 对特定元素应用等待光标：

   function setElementWait(elementId) {
     document.getElementById(elementId).style.cursor = 'wait'
   }
   

3. 使用不同的光标类型：

   // 指针
   document.body.style.cursor = 'pointer'
   // 文本
   document.body.style.cursor = 'text'
   // 移动
   document.body.style.cursor = 'move'
   // 不允许
   document.body.style.cursor = 'not-allowed'
   

4. 在异步操作中使用：

   async function loadData() {
     document.body.style.cursor = 'wait'
     try {
       await fetchDataFromServer()
     } finally {
       document.body.style.cursor = 'default'
     }
   }
   

5. 结合 CSS 类使用：

   // CSS
   .waiting {
     cursor: wait !important;
   }
   
   // JavaScript
   function setWaitingState(isWaiting) {
     document.body.classList.toggle('waiting', isWaiting);
   }
   

6. 自定义光标：

   document.body.style.cursor = "url('path/to/custom-cursor.png'), auto"
   

使用建议：

1. 在开始长时间操作前设置等待光标，操作结束后务必恢复默认光标。

2. 考虑使用更现代的加载指示器，如进度条或加载动画，尤其是对于可能需要较长时间的操作。

3. 对于局部操作，最好只改变相关元素的光标，而不是整个页面。

4. 结合其他视觉反馈，如禁用按钮或显示加载信息，以提供更好的用户体验。

示例：创建一个通用的加载状态管理器

const loadingManager = {
  activeLoadings: 0,

  startLoading() {
    this.activeLoadings++
    this.updateCursor()
  },

  endLoading() {
    this.activeLoadings = Math.max(0, this.activeLoadings - 1)
    this.updateCursor()
  },

  updateCursor() {
    document.body.style.cursor = this.activeLoadings > 0 ? 'wait' : 'default'
  },
}

// 使用示例
async function fetchData() {
  loadingManager.startLoading()
  try {
    await someAsyncOperation()
  } finally {
    loadingManager.endLoading()
  }
}

这个技巧虽然简单，但在提升用户体验方面非常有效。它为用户提供了直观的反馈，表明系统正在处理他们的请求。结合其他加载指示器，可以创建更加丰富和友好的用户界面。在开发现代 Web 应用时，合理使用光标状态可以显著提高用户对应用响应性的感知。

12. 获取复选框的状态

这个技巧确实非常实用，尤其是在处理表单和用户输入时。让我们深入探讨这个方法，并扩展一些相关的用法：

<input type="checkbox" id="checkboxname" value="Agree" /> 同意条款<br />

<script>
  console.log(document.getElementById('checkboxname').checked) // true 或 false
</script>

这个方法的工作原理：

1. 使用 document.getElementById() 获取复选框元素。
2. 访问该元素的 checked 属性，它返回一个布尔值。
3. 如果复选框被选中，返回 true；否则返回 false。

让我们看看一些扩展用法和相关技巧：

1. 监听复选框状态变化：

document.getElementById('checkboxname').addEventListener('change', function () {
  console.log('复选框状态：', this.checked)
})

2. 设置复选框状态：

document.getElementById('checkboxname').checked = true // 选中复选框
document.getElementById('checkboxname').checked = false // 取消选中

3. 处理多个复选框：

<input type="checkbox" name="fruit" value="apple" /> 苹果
<input type="checkbox" name="fruit" value="banana" /> 香蕉
<input type="checkbox" name="fruit" value="orange" /> 橙子

<script>
  function getSelectedFruits() {
    const checkboxes = document.getElementsByName('fruit')
    const selectedFruits = Array.from(checkboxes)
      .filter((checkbox) => checkbox.checked)
      .map((checkbox) => checkbox.value)
    console.log('选中的水果：', selectedFruits)
  }
</script>

4. 使用复选框控制其他元素：

<input type="checkbox" id="toggleVisibility" /> 显示密码
<input type="password" id="passwordField" />

<script>
  document.getElementById('toggleVisibility').addEventListener('change', function () {
    document.getElementById('passwordField').type = this.checked ? 'text' : 'password'
  })
</script>

5. 创建一个全选/取消全选功能：

<input type="checkbox" id="selectAll" /> 全选 <input type="checkbox" name="item" /> 项目1
<input type="checkbox" name="item" /> 项目2 <input type="checkbox" name="item" /> 项目3

<script>
  document.getElementById('selectAll').addEventListener('change', function () {
    const items = document.getElementsByName('item')
    items.forEach((item) => (item.checked = this.checked))
  })
</script>

6. 使用复选框状态进行表单验证：

function validateForm() {
  const agreeCheckbox = document.getElementById('agreeTerms')
  if (!agreeCheckbox.checked) {
    alert('请同意服务条款')
    return false
  }
  return true
}

7. 结合localStorage保存复选框状态：

const rememberMeCheckbox = document.getElementById('rememberMe')

// 加载保存的状态
rememberMeCheckbox.checked = localStorage.getItem('rememberMe') === 'true'

// 保存状态
rememberMeCheckbox.addEventListener('change', function () {
  localStorage.setItem('rememberMe', this.checked)
})

使用建议：

1. 始终为复选框提供一个唯一的ID或name，这样可以轻松地在JavaScript中引用它们。

2. 考虑使用label元素与复选框关联，以改善可访问性和用户体验。

3. 在处理复选框状态时，记得考虑表单的整体验证逻辑。

4. 对于复杂的表单，考虑使用现代的表单处理库或框架，它们通常提供更强大和方便的表单状态管理功能。

5. 在使用复选框控制重要功能（如隐私设置）时，确保还有服务器端的验证。

这个技巧展示了如何简单高效地与HTML表单元素交互。正确使用这种方法可以创建更具交互性和响应性的web应用，提高用户体验。在开发过程中，灵活运用这些技巧可以大大简化表单处理和用户输入管理的复杂性。

13. 为控制台消息添加 CSS 样式

这确实是一个非常酷的技巧！它允许开发者在浏览器的控制台中创建更具视觉吸引力和信息量的日志消息。让我们深入探讨这个功能：

console.log(
  '%c 这段文字有紫色字体，大号字体，白色背景',
  'color: purple; font-size: x-large; background: white'
)

这个技巧的工作原理：

1. %c 是一个特殊的格式说明符，它告诉 console.log 接下来的文本应该使用 CSS 样式。
2. 第二个参数是一个包含 CSS 样式的字符串，用于格式化 %c 后面的文本。

让我们探索一些更高级的用法和创意：

1. 多种样式在一条消息中：

console.log('%c红色 %c绿色 %c蓝色', 'color: red;', 'color: green;', 'color: blue;')

2. 创建警告和错误样式：

console.log('%c警告!', 'color: yellow; background: black; font-size: 2em; font-weight: bold;')
console.log('%c错误!', 'color: red; background: yellow; font-size: 2em; font-weight: bold;')

3. 添加图标和表情符号：

console.log('%c👍 成功!', 'color: green; font-size: 1.5em;')
console.log('%c⚠️ 警告!', 'color: orange; font-size: 1.5em;')

4. 创建盒子和边框：

console.log('%c盒子', 'border: 1px solid black; padding: 5px; background-color: lightblue;')

5. 使用渐变背景：

console.log(
  '%c彩虹文字',
  'background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); -webkit-background-clip: text; color: transparent; font-size: 2em;'
)

6. 创建表格样式的输出：

console.log('%c列1 | 列2 | 列3\n-----+------+-----\n  A  |  B   |  C  ', 'font-family: monospace')

7. 结合 console.group 使用：

console.group('%c分组标题', 'color: #bada55; font-size: 1.2em;')
console.log('分组内容 1')
console.log('分组内容 2')
console.groupEnd()

8. 创建自定义日志函数：

function customLog(message, style = 'color: black;') {
  console.log(`%c${message}`, style)
}

customLog('普通消息')
customLog('重要消息', 'color: red; font-weight: bold;')

使用建议：

1. 在开发环境中使用这些样式来突出重要信息，但在生产环境中要谨慎使用，因为它们可能会增加日志的大小。

2. 使用这种技术来区分不同类型的日志，如调试信息、警告和错误。

3. 在团队中创建一个统一的日志样式指南，以保持一致性。

4. 记住，不是所有的浏览器控制台都支持这些 CSS 样式，所以要进行适当的测试。

5. 对于复杂的日志需求，考虑使用专门的日志库，它们可能提供更强大和一致的功能。

这个技巧展示了如何将 Web 开发中的视觉元素带入调试过程。通过创意地使用这个功能，开发者可以使控制台输出更加清晰、有组织，从而提高调试效率和代码可读性。在开发复杂应用时，这种技术可以成为一个强大的工具，帮助快速识别和分类不同类型的日志信息。

14. 禁用网页右键点击

这个技巧确实可以禁用网页上的右键点击功能。让我们深入探讨这个方法，并考虑其应用场景和潜在的影响：

<body oncontextmenu="return false;"></body>

这个方法的工作原理：

1. oncontextmenu 是一个事件处理属性，它在用户尝试打开上下文菜单（通常通过右键点击）时触发。
2. 返回 false 会阻止默认的上下文菜单显示。

虽然这个方法简单有效，但我们还可以通过 JavaScript 来实现更灵活的控制：

document.addEventListener('contextmenu', function (e) {
  e.preventDefault()
})

扩展用法和注意事项：

1. 仅在特定元素上禁用右键点击：

document.getElementById('protectedArea').addEventListener('contextmenu', function (e) {
  e.preventDefault()
})

2. 提供自定义右键菜单：

document.addEventListener('contextmenu', function (e) {
  e.preventDefault()
  var customMenu = document.getElementById('customMenu')
  customMenu.style.display = 'block'
  customMenu.style.left = e.pageX + 'px'
  customMenu.style.top = e.pageY + 'px'
})

3. 根据条件禁用右键点击：

let isRightClickDisabled = true

document.addEventListener('contextmenu', function (e) {
  if (isRightClickDisabled) {
    e.preventDefault()
  }
})

4. 禁用右键的同时显示提示信息：

document.addEventListener('contextmenu', function (e) {
  e.preventDefault()
  alert('右键点击已被禁用')
})

5. 结合其他事件一起使用：

document.addEventListener('contextmenu', handleContextMenu)
document.addEventListener('copy', handleCopy)
document.addEventListener('selectstart', handleSelect)

function handleContextMenu(e) {
  e.preventDefault()
}

function handleCopy(e) {
  e.preventDefault()
}

function handleSelect(e) {
  e.preventDefault()
}

使用建议和注意事项：

1. 谨慎使用这个功能。禁用右键可能会影响用户体验，特别是那些习惯使用右键功能的用户。

2. 考虑只在特定区域（如受版权保护的内容）禁用右键，而不是整个页面。

3. 如果禁用右键，最好提供替代方法让用户访问通常通过右键获得的功能。

4. 记住，技术熟练的用户总能找到绕过这种限制的方法。不要依赖这种方法来保护敏感信息。

5. 在移动设备上，长按通常等同于右键点击，所以也要考虑处理触摸事件。

6. 对于需要保护的内容，服务器端的安全措施更为重要和有效。

7. 如果你的目的是防止内容被复制，记住还有其他方法可以获取页面内容（如查看源代码）。

示例：提供友好的用户反馈

document.addEventListener('contextmenu', function (e) {
  e.preventDefault()
  const feedback = document.createElement('div')
  feedback.textContent = '抱歉，此内容不允许右键操作'
  feedback.style.cssText =
    'position: fixed; background: #333; color: #fff; padding: 10px; border-radius: 5px;'
  feedback.style.left = e.pageX + 'px'
  feedback.style.top = e.pageY + 'px'
  document.body.appendChild(feedback)
  setTimeout(() => feedback.remove(), 2000)
})

这个技巧展示了如何控制用户与网页的交互方式。虽然它可以用来保护内容或创建特定的用户体验，但应该谨慎使用，并始终考虑可访问性和用户友好性。在实际应用中，最好权衡禁用右键点击的必要性与可能带来的用户体验影响。

15. 捕获浏览器的后退按钮事件

这确实是一个令人惊讶的功能！捕获浏览器后退按钮的能力为开发者提供了更多控制用户导航体验的机会。让我们深入探讨这个技巧：

window.addEventListener('beforeunload', (event) => {
  console.log('即将离开页面')
  // 显示确认对话框
  event.preventDefault() // 取消事件的默认行为
  event.returnValue = '' // 兼容旧版本浏览器
})

这个方法的工作原理：

1. beforeunload 事件在页面即将被卸载（unload）时触发。这包括刷新、关闭标签页或使用后退按钮等情况。
2. 通过阻止默认行为并设置 returnValue，我们可以显示一个确认对话框，询问用户是否真的要离开页面。

需要注意的是，出于用户体验和安全考虑，现代浏览器通常不允许自定义 beforeunload 事件的消息内容。

扩展用法和注意事项：

1. 仅在数据未保存时显示警告：

let isDataSaved = false

window.addEventListener('beforeunload', (event) => {
  if (!isDataSaved) {
    event.preventDefault()
    event.returnValue = ''
  }
})

2. 结合 popstate 事件更精确地检测后退按钮：

window.addEventListener('popstate', (event) => {
  console.log('检测到后退按钮点击')
  // 在这里处理后退操作
})

3. 使用 History API 来管理浏览历史：

// 添加一个新的历史记录
history.pushState({ page: 1 }, 'title 1', '?page=1')

// 监听 popstate 事件
window.addEventListener('popstate', (event) => {
  if (event.state) {
    console.log('返回到页面：', event.state.page)
  }
})

4. 在单页应用（SPA）中处理导航：

window.addEventListener('popstate', (event) => {
  const currentPage = location.pathname
  updateContent(currentPage)
})

function updateContent(page) {
  // 根据页面路径更新内容
  console.log('更新内容为：', page)
}

5. 提供自定义的返回行为：

window.addEventListener('popstate', (event) => {
  event.preventDefault()
  customBackFunction()
})

function customBackFunction() {
  console.log('执行自定义的返回操作')
  // 实现自定义的返回逻辑
}

使用建议：

1. 谨慎使用 beforeunload 事件。过度使用可能会影响用户体验。

2. 确保只在真正需要防止数据丢失的情况下使用这个事件。

3. 在单页应用中，考虑使用 popstate 事件来处理导航，而不是 beforeunload。

4. 记住，用户始终可以选择忽略警告并离开页面。不要依赖这种方法来保存关键数据。

5. 在移动应用中，要特别注意这种行为可能带来的用户体验问题。

6. 使用 History API 可以提供更细粒度的导航控制，特别是在复杂的单页应用中。

7. 考虑使用自动保存功能，减少用户丢失数据的风险，从而减少对 beforeunload 事件的依赖。

示例：结合表单状态管理

let formChanged = false

document.querySelector('form').addEventListener('change', () => {
  formChanged = true
})

window.addEventListener('beforeunload', (event) => {
  if (formChanged) {
    event.preventDefault()
    event.returnValue = ''
  }
})

document.querySelector('form').addEventListener('submit', () => {
  formChanged = false
})

这个技巧展示了如何增强网页的导航控制。它可以用来防止意外的数据丢失，改善单页应用的用户体验，或实现自定义的导航行为。然而，重要的是要平衡这种控制与用户的预期和网页的可用性。过度使用这些技术可能会让用户感到困惑或受限，所以应该谨慎且有策略地应用这些方法。