本文將介紹如何使用瀏覽器提供的 prompt() API，讓使用者做出選擇。 prompt() 函式可讓我們從使用者獲取輸入。 這個 API 已經存在於網頁的早期，並且獲得各大瀏覽器的支援。 它非常簡單易用，特別適用於快速原型開發，你可以直接調用 prompt() 函式來獲取使用者輸入，而不需要建立表單。 下面是使用方法：調用 prompt() 函式，並傳入一個字符串作為問題的描述： prompt("你的年齡是多少？") 在 Chrome 瀏覽器中的效果如下： 在 Safari 瀏覽器中的效果如下： 在 Firefox 瀏覽器中的效果如下： 可以看到，每個瀏覽器的外觀有所不同，但運作原理是相同的。 需要呼叫 window.prompt() 函式，但由於 window 是隱含的，因此也可以直接呼叫 prompt() 瀏覽器會阻塞腳本的執行，直到使用者輸入內容並按下確定或取消按鈕。除非點擊按鈕，否則無法退出該操作。 輸入的值將從該函式返回，因此我們可以將其賦值給一個變數： const age = prompt("你的年齡是多少？") 你還可以傳入第二個參數作為預設值： const age = prompt("你的年齡是多少？", 18) 如果使用者未輸入任何內容並點擊確定，將返回一個空字符串。 如果使用者點擊取消按鈕，prompt() 函式將返回 null。

當你將Arduino連接到網絡時，與之一起建立的電子設備將變得非常酷。 讓我們來看看如何將Arduino連接到WiFi網絡。 Arduino必須具備WiFi連接功能，例如我使用的Arduino MKR WiFi 1010，或者其他Arduino Uno WiFi Rev2等。 我們將使用庫WiFiNINA。這個庫非常方便，可以讓我們連接到WiFi網絡，還可以創建WiFi網絡。 在你的Arduino sketch中加入以下代碼： #include <SPI.h> #include <WiFiNINA.h> WiFiNINA庫使用了SPI庫，因此也要加載SPI庫。SPI代表串行外設接口。 WiFiNINA庫為我們提供了訪問WiFi對象的功能，我們將使用它。 現在讓我們來編寫setup()函數的主體部分，這是我們需要實現的唯一的Arduino核心函數（我們將保持loop()函數空）。 void setup() { } 首先，我們將定義兩個字符串變量來存儲網絡名稱（SSID）和網絡密碼。 我使用的是Arduino Create，所以我只是使用在Secret選項卡中單獨填充的常量。 char ssid[] = SECRET_SSID; char pass[] = SECRET_PASS; 接下來，我們將初始化串口接口，以便將來自Arduino的信息傳回Arduino Create。 Serial.begin(9600); 然後，我們使用以下代碼等待串口就緒： while (!Serial); 然後，我們將WiFi.begin()放入一個循環中，檢查其返回值是否為WL_CONNECTED，如果不是，則每隔2秒重試一次： int status = WL_IDLE_STATUS; while (status != WL_CONNECTED) { Serial.print("Connecting to "); Serial.println(ssid); status = WiFi.begin(ssid, pass); delay(2000); } 首先，我們將其初始化為WL_IDLE_STATUS，這是WiFiNINA的另一個常量，但我們也可以將其初始化為空字符串。 一旦退出此循環，表示已成功連接，我們可以調用WiFi.localIP()方法獲取設備的IP地址並將其打印到串口： Serial.print("IP address: "); Serial.println(WiFi.localIP()); 以下是完整的程式碼： #include <SPI.h> #include <WiFiNINA....

結合async/await和map()的使用可能有點棘手。了解如何使用。 您想在map()調用中執行一個異步函數，對數組的每個元素執行操作並取回結果。 該如何做到這一點？ 這是正確的語法： const list = [1, 2, 3, 4, 5] //... 填充了數值的數組 const functionThatReturnsAPromise = item => { //返回一個Promise的函數 return Promise.resolve('ok') } const doSomethingAsync = async item => { return functionThatReturnsAPromise(item) } const getData = async () => { return Promise.all(list.map(item => doSomethingAsync(item))) } getData().then(data => { console.log(data) }) 主要要注意的是Promise.all()的使用，當所有的Promise都被解析時，它才會被解析。 list.map()返回一個Promise列表，所以在result中，我們將得到當我們運行的所有內容都被解析時的值。 請記住，在調用await的任何代碼周圍都必須包裹在一個async函數中。 有關Promise的詳細信息，請參見Promises文章，以及async/await指南。 使用這些占位符函數名稱來展示示例可能很難理解，所以這是一個簡單的例子，展示了如何使用這種技巧，這是我為Twitter克隆版本編寫的Prisma數據刪除函數，首先刪除推文，然後刪除用戶： export const clearData = async (prisma) => { const users = await prisma.user.findMany({}) const tweets = await prisma....

学习如何使用Axios发送授权头部 在Axios的POST请求中设置头部，只需要将第三个对象传递给axios.post()方法。 你可能已经在使用第二个参数发送数据了，如果你在URL字符串之后传递了2个对象，第一个对象是数据，第二个对象是配置对象，其中需要添加一个headers属性，它是另一个对象。 axios.post(url, { data: { ... } }) axios.post(url, { //...data }, { headers: { ... } }) 要设置授权头部，请按照以下方式调用： const token = '..你的令牌..' axios.post(url, { //...data }, { headers: { 'Authorization': `Basic ${token}` } }) （授权令牌可能不同，请确定你使用的应用程序） 在Axios的GET请求中设置头部，只需要将第二个对象传递给axios.get()方法，例如下面是一个对GitHub的GET请求 /user： axios.get('https://api.github.com/user', { headers: { 'Authorization': `token ${access_token}` } }) .then((res) => { console.log(res.data) }) .catch((error) => { console.error(error) }) 我正在使用WordPress API进行一些工作，需要进行POST请求进行身份验证。 对我来说最简单的方式是使用基本身份验证。 我使用Axios，所以我将Authorization头部设置为POST请求，如下所示： const username = '' const password = '' const token = Buffer....

學習如何使用Axios發送url編碼的數據 我遇到了這個問題：我需要從一個Node.js應用程序中調用的API只接受url編碼格式的數據。 我必須找出解決這個問題的方法：如何使用Axios發送url編碼的數據？ 首先，我們需要安裝qs模塊。這是一個很棒的查詢字符串解析和字符串化庫，還帶有一些額外的安全功能： npm install qs 然後，我們需要導入qs模塊以及當然還有Axios的導入語句： const qs = require('qs') const axios = require('axios') 如果你使用的是ES模塊，請使用： import qs from 'qs' import axios from 'axios' 接下來，是Axios代碼。如果你對它不熟悉，請參閱我的完整的Axios教程。 簡而言之，我們需要使用Axios請求的完整形式，而不是axios.post()，而是axios()。 在其中，我們使用了qs提供的stringify()方法，並將數據包裹在其中。然後，我們設置了content-type標頭： axios({ method: 'post', url: 'https://my-api.com', data: qs.stringify({ item1: 'value1', item2: 'value2' }), headers: { 'content-type': 'application/x-www-form-urlencoded;charset=utf-8' } })

如何使用CSS反轉元素和圖片的顏色 我有遇到這個問題。我在頁面上添加了一張“黑底白字”的圖片，卻意識到當使用了暗黑模式時，頁面的背景正確地變為黑色，但圖片仍然是黑底白字。 有點糟糕。 所以我在CSS中添加了以下規則，用於檢測暗黑模式並自動反轉圖片的顏色： @media (prefers-color-scheme: dark) { .my-image { filter: invert(100%); } } 在我的情況下，這並不是100%準確，因為我的暗黑背景顏色不是完全黑色，但這總比沒有好。 要讓事情完美，您還可以使用CSS背景圖片而不是在HTML中使用img標籤添加圖片，這樣我在暗黑模式下就可以輕松替換圖片。

有時候，在設計頁面時，您可能需要調整某個元素的大小，讓它看起來更小或更大。 您可以使用CSS的zoom屬性來縮放任何HTML元素。 使用小於1的值可以使元素變小。例如，將元素的大小縮小一半，可以使用0.5： div { zoom: 0.5; } 使用大於1的值可以使元素變大，例如這個例子中將元素放大2倍： div { zoom: 2; } 注意，這個方法在Firefox瀏覽器中不起作用，您可以使用-moz-transform: scale(NUMBER);代替（如果您選擇使用這種方法，可以在所有瀏覽器上使用transform: scale(NUMBER);）。

使用CSS居中元素，有些元素容易操作，有些则比较困难。下面是完整的如何使用CSS居中的方法，包括现代CSS技术。 在CSS中居中元素的方法在水平和垂直方向上是非常不同的。 在本文中，我将解释最常见的情况以及如何解决它们。如果Flexbox 提供了一种新的解决方案，我将忽略旧的技术，因为我们需要向前发展，而且Flexbox已经得到了浏览器的支持，包括IE10。 水平居中 文本 文本可以通过将text-align属性设置为center来实现水平居中： p { text-align: center; } 块级元素 居中任何非文本块级元素的现代方法是使用Flexbox： #mysection { display: flex; justify-content: center; } #mysection内的任何元素都将水平居中。 以下是不使用Flexbox的替代方法。 任何非文本类型的元素都可以通过为左右自动设置外边距并设置元素的宽度来居中： section { margin: 0 auto; width: 50%; } 上述的margin: 0 auto;是以下缩写方式的简写： section { margin-top: 0; margin-bottom: 0; margin-left: auto; margin-right: auto; } 如果元素是内联元素，请记得将其设置为display: block。 垂直居中 传统上，垂直居中一直是一项困难的任务。通过Flexbox，我们现在可以以最简单的方式实现这一目标： #mysection { display: flex; align-items: center; } #mysection内的任何元素都将垂直居中。 同时垂直和水平居中 垂直和水平居中的Flexbox技巧可以结合在一起，完全将元素居中在页面中： #mysection { display: flex; align-items: center; justify-content: center; } 同样的效果也可以使用CSS Grid来实现：...

使用CSS動畫來持續旋轉圖像 在建立 React Handbook（https://reacthandbook.com） 的登錄頁面時，我需要搜索如何旋轉圖像。我想要旋轉一個 SVG 圖像，但這個方法適用於任何圖像類型，實際上也適用於任何 HTML 元素。 將以下 CSS 指令添加到您想要旋轉的元素中： animation: rotation 2s infinite linear; 您也可以選擇將 rotate 類添加到元素中，而不是直接選擇它： .rotate { animation: rotation 2s infinite linear; } 通過調整 2s 的數值，可以減慢或加快旋轉周期。 然後將以下代碼添加到任何選擇器之外： @keyframes rotation { from { transform: rotate(0deg); } to { transform: rotate(359deg); } } 就這樣！您的元素現在應該旋轉起來了。 請查看CSS動畫和CSS過渡指南： CSS Animations 和 CSS Transitions 以下是在 Codepen 中展示的結果： [在 CodePen 上查看 如何使用 CSS 動畫持續旋轉圖像 ](https://codepen.io/flaviocopes/pen/zyyJpL/) - 作者：Flavio Copes

了解如何使用CSS屬性user-select來禁用文字選擇功能。 預設情況下，瀏覽器允許我們使用鍵盤或滑鼠來選擇網頁中的文字。例如，在Mac上可以使用cmd-A組合鍵。 那麼如何禁用這個功能，使得我們的網頁更像是一個應用程式，而不是一個文件呢？ 使用user-select: none; CSS屬性即可實現。 根據https://caniuse.com/#feat=user-select-none的資訊，需要使用瀏覽器前綴來實現兼容性： -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; 有時，我會通過在body元素上應用user-select: none;來使整個應用程式介面都無法選擇文字，然後可以在特定元素上重新啟用文字選擇，使用以下代碼： user-select: text;