驗證碼是常見的網頁安全措施,通過驗證用戶輸入的字符或數字是否與驗證碼相匹配來判斷用戶是否為人類。其中一種實現方式是通過CSS代碼生成驗證碼。
首先,我們需要一個包含所有可能字符或數字的字符串。例如:
var code = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
接著,通過CSS代碼生成一個div元素,并將其中的內容設置為隨機的四個字符或數字:
div { width: 80px; height: 30px; border: 1px solid #ccc; text-align: center; line-height: 30px; font-size: 18px; font-weight: bold; background-color: white; overflow: hidden; } div:before { content: ""; display: inline-block; width: 20px; height: 100%; margin-right: 5px; vertical-align: middle; background-image: url(data:image/png;base64,iVBORw0KG...); background-size: cover; } div:after { content: ""; display: inline-block; width: 55px; height: 100%; text-align: center; vertical-align: middle; font-family: Arial; color: #333; content: ""; letter-spacing: 10px; } div[data-code]:after { content: attr(data-code); }
其中,div:before可以用來設置驗證碼圖標,div:after用來設置驗證碼字符或數字,div[data-code]:after用來動態地將div元素的內容設置為data-code屬性中存儲的四個字符或數字。
最后,我們需要編寫JS代碼來隨機生成四個字符或數字,并將它們存儲在data-code屬性中:
var code = ""; for (var i = 0; i< 4; i++) { code += code.charAt(Math.floor(Math.random() * code.length)); } document.querySelector("div").setAttribute("data-code", code);
這樣,一個使用CSS代碼生成的驗證碼就完成了。用戶每次訪問頁面時,都會生成一個隨機的驗證碼,有效地防止了惡意攻擊。