\u00b7\u5982\u679c\u4f60\u8fd8\u5728\u7ea0\u7ed3\uff0c\u90a3\u4e48\u6211\u5efa\u8bae\uff1a<\/p>\n\n\n\n
- \n
- \u00b7\u6709\u4e86\u53d8\u91cf\u5148\u7ed9const\uff0c\u5982\u679c\u53d1\u73b0\u5b83\u540e\u9762\u662f\u8981\u88ab\u4fee\u6539\u7684\uff0c\u518d\u6539\u4e3alet<\/li>\n<\/ul>\n\n\n\n
const arr=['red', 'pink'] \n\narr.push('blue')\n\nconsole.log(arr)<\/code><\/pre>\n\n\n\n
![\"\"](\"https:\/\/eve2333.top\/wp-content\/uploads\/2024\/10\/1729824439-\u5c4f\u5e55\u622a\u56fe-2024-10-25-104704.png\")
<\/figure>\n\n\n\n\u200b<\/p>\n\n\n\n
\u4ee5\u4e0b\u6587\u7ae0\u914c\u60c5\u89c2\u770b<\/strong><\/p>\n\n\n\n
\u00b7DOM \uff08Document Object Model-\u6587\u6863\u5bf9\u8c61\u6a21\u578b\uff09\u662f\u7528\u6765\u5448\u73b0\u4ee5\u53ca\u4e0e\u4efb\u610fHTML\u6216XML\u6587\u6863\u4ea4\u4e92\u7684API<\/p>\n\n\n\n
\u00b7\u767d\u8bdd\u6587\uff1aDOM\u662f\u6d4f\u89c8\u5668\u63d0\u4f9b\u7684\u4e00\u5957\u4e13\u95e8\u7528\u6765\u64cd\u4f5c\u7f51\u9875\u5185\u5bb9\u7684\u529f\u80fd<\/p>\n\n\n\n
\u00b7DOM\u4f5c\u7528<\/p>\n\n\n\n
\u5f00\u53d1\u7f51\u9875\u5185\u5bb9\u7279\u6548\u548c\u5b9e\u73b0\u7528\u6237\u4ea4\u4e92<\/p>\n\n\n\n
DOM\u6811\u662f\u4ec0\u4e48<\/p>\n\n\n\n
\u5c06 HTML \u6587\u6863\u4ee5\u6811\u72b6\u7ed3\u6784\u76f4\u89c2\u7684\u8868\u73b0\u51fa\u6765\uff0c\u6211\u4eec\u79f0\u4e4b\u4e3a\u6587\u6863\u6811\u6216 DOM \u6811<\/p>\n\n\n\n
\u63cf\u8ff0\u7f51\u9875\u5185\u5bb9\u5173\u7cfb\u7684\u540d\u8bcd<\/p>\n\n\n\n
\u4f5c\u7528\uff1a\u6587\u6863\u6811\u76f4\u89c2\u7684\u4f53\u73b0\u4e86\u6807\u7b7e\u4e0e\u6807\u7b7e\u4e4b\u95f4\u7684\u5173\u7cfb<\/p>\n\n\n\n
\u00b7DOM\u5bf9\u8c61\uff1a\u6d4f\u89c8\u5668\u6839\u636ehtml\u6807\u7b7e\u751f\u6210\u7684JS\u5bf9\u8c61<\/p>\n\n\n\n
\u6240\u6709\u7684\u6807\u7b7e\u5c5e\u6027\u90fd\u53ef\u4ee5\u5728\u8fd9\u4e2a\u5bf9\u8c61\u4e0a\u9762\u627e\u5230<\/p>\n\n\n\n
\u4fee\u6539\u8fd9\u4e2a\u5bf9\u8c61\u7684\u5c5e\u6027\u4f1a\u81ea\u52a8\u6620\u5c04\u5230\u6807\u7b7e\u8eab\u4e0a<\/p>\n\n\n\n
\u00b7DOM\u7684\u6838\u5fc3\u601d\u60f3<\/p>\n\n\n\n
<div>123<\/div>\n\n<script>\n\nconst div = document.querySelector('div') \/\/\u6253\u5370\u5bf9\u8c61 \n\nconsole.dir\uff08div\uff09\/\/dom \u5bf9\u8c61-----object \n\n<\/script><\/code><\/pre>\n\n\n\n\u628a\u7f51\u9875\u5185\u5bb9\u5f53\u505a\u5bf9\u8c61\u6765\u5904\u7406<\/p>\n\n\n\n
\u00b7document \u5bf9\u8c61<\/p>\n\n\n\n
\u662fDOM\u91cc\u63d0\u4f9b\u7684\u4e00\u4e2a\u5bf9\u8c61<\/p>\n\n\n\n
\u6240\u4ee5\u5b83\u63d0\u4f9b\u7684\u5c5e\u6027\u548c\u65b9\u6cd5\u90fd\u662f\u7528\u6765\u8bbf\u95ee\u548c\u64cd\u4f5c\u7f51\u9875\u5185\u5bb9\u7684<\/p>\n\n\n\n
\u4f8b\uff1adocument.write\uff08\uff09<\/p>\n\n\n\n
\u7f51\u9875\u6240\u6709\u5185\u5bb9\u90fd\u5728document\u91cc\u9762<\/p>\n\n\n\n
\u83b7\u53d6DOM\u5bf9\u8c61<\/h2>\n\n\n\n
\u5229\u7528CSS\u9009\u62e9\u5668<\/h5>\n\n\n\n
document. querySelector('#nav')<\/code><\/pre>\n\n\n\n\u53c2\u6570\uff1a
\u5305\u542b\u4e00\u4e2a\u6216\u591a\u4e2a\u6709\u6548\u7684css\u9009\u62e9\u5668\u5b57\u7b26\u4e32
\u8fd4\u56de\u503c\uff1a
CSS\u9009\u62e9\u5668\u5339\u914d\u7684\u7b2c\u4e00\u4e2a\u5143\u7d20\uff0c\u4e00\u4e2aHTMLElement\u5bf9\u8c61\u3002
\u5982\u679c\u6ca1\u6709\u5339\u914d\u5230\uff0c\u5219\u8fd4\u56denull\u3002<\/p>\n\n\n\n\u9009\u62e9\u5339\u914d\u7684\u591a\u4e2a\u5143\u7d20<\/h5>\n\n\n\n
document.querySelectorAll('css\u9009\u62e9\u5668')<\/code><\/pre>\n\n\n\n\u53c2\u6570\uff1a
\u5305\u542b\u4e00\u4e2a\u6216\u591a\u4e2a\u6709\u6548\u7684CSS\u9009\u62e9\u5668\u5b57\u7b26\u4e32
\u8fd4\u56de\u503c\uff1a
CSS\u9009\u62e9\u5668\u5339\u914d\u7684NodeList\u5bf9\u8c61\u96c6\u5408<\/p>\n\n\n\ndocument.querySelectorAll('ul li')<\/code><\/pre>\n\n\n\n\u5f97\u5230\u7684\u662f\u4e00\u4e2a\u4f2a\u6570\u7ec4\uff1a
\u6709\u957f\u5ea6\u6709\u7d22\u5f15\u53f7\u7684\u6570\u7ec4
\u4f46\u662f\u6ca1\u6709pop() push()\u7b49\u6570\u7ec4\u65b9\u6cd5
\u60f3\u8981\u5f97\u5230\u91cc\u9762\u7684\u6bcf\u4e00\u4e2a\u5bf9\u8c61\uff0c\u5219\u9700\u8981\u904d\u5386(for)\u7684\u65b9\u5f0f\u83b7\u5f97\u3002<\/p>\n\n\n\n\u54ea\u6015\u53ea\u6709\u4e00\u4e2a\u5143\u7d20\uff0c\u901a\u8fc7querySelectAll()\u83b7\u53d6\u8fc7\u6765\u7684\u4e5f\u662f\u4e00\u4e2a\u4f2a\u6570\u7ec4\uff0c\u91cc\u9762\u53ea\u6709\u4e00\u4e2a\u5143\u7d20\u800c\u5df2<\/p>\n\n\n\n
\u5176\u4ed6\u83b7\u5f97DOM\u65b9\u5f0f<\/h3>\n\n\n\n
\/\/\u6839\u636eid\u83b7\u53d6\u4e00\u4e2a\u5143\u7d20\n\ndocument.getElementById('nav')\n\n\/\/ \u6839\u636e \u6807\u7b7e\u83b7\u53d6\u4e00\u7c7b\u5143\u7d20 \u83b7\u53d6\u9875\u9762 \u6240\u6709\n\ndiv.document.getElementsByTagName('div')\n\n\/\/\u6839\u636e \u7c7b\u540d\u83b7\u53d6\u5143\u7d20 \u83b7\u53d6\u9875\u9762 \u6240\u6709\u7c7b\u540d\u4e3a w\u7684\n\ndocument.getElementsByClassName('w') <\/code><\/pre>\n\n\n\n\u64cd\u4f5c\u5143\u7d20\u5185\u5bb9<\/h2>\n\n\n\n
<body>\n<div class\uff1d\uff02box\uff02>\u6211\u662f\u6587\u5b57\u7684\u5185\u5bb9<\uff0fdiv>\n\n\n<script>\n\nconst obj={ name\uff1a\uff07pink\u8001\u5e08\uff07 }\n\nconsole.Log(obj.name)\n\nobj.name\uff1d'red\u8001\u5e08' \/\/ 1\uff0e\u83b7\u53d6\u5143\u7d20\n\nconst box = document.querySelector('.box') \/\/ 2\uff0e\u4fee\u6539\u6587\u5b57\u5185\u5bb9 \u5bf9\u8c61\uff0einnerText \u5c5e\u6027\n\nconsole.Log\uff08box.innerText\uff09\/\/\u83b7\u53d6\u6587\u5b57\u5185\u5bb9\n\nbox.innerText\uff1d'\u6211\u662f\u4e00\u4e2a\u76d2\u5b50\u201d\/\/\u4fee\u6539\u6587\u5b57\u5185\u5bb9 box\u662f\u4e2a\u5bf9\u8c61\n\nbox.innerText\uff1d'<strong>\u6211\u662f\u4e00\u4e2a\u76d2\u5b50<\uff0fstrong>'\n\n\/\/\u4e0d\u89e3\u6790\u6807\u7b7e\n\n\/\/ 3\uff0e innerHTML \u89e3\u6790\u6807\u7b7e\n\nconsole.log(box.innerHTML) \/\/ box.innerHTML\uff1d'\u6211\u8981\u66f4\u6362'\n\nbox.innerHTML\uff1d'<strong>\u6211\u8981\u66f4\u6362<\uff0fstrong>'\n\n<\/script>\n\n<\/body><\/code><\/pre>\n\n\n\n2\uff0e\u5143\u7d20\uff0einnerHTML \u5c5e\u6027<\/p>\n\n\n\n
\u5c06\u6587\u672c\u5185\u5bb9\u6dfb\u52a0\uff0f\u66f4\u65b0\u5230\u4efb\u610f\u6807\u7b7e\u4f4d\u7f6e\u4f1a\u89e3\u6790\u6807\u7b7e\uff0c\u591a\u6807\u7b7e\u5efa\u8bae\u4f7f\u7528\u6a21\u677f\u5b57\u7b26\u4e3e\u4f8b\u8bf4\u660e<\/p>\n\n\n\n
const info = document.querySelector('.info') \/\/\u83b7\u53d6\u6807\u7b7e\u5185\u90e8\u7684\u6587\u5b57\n\nconsole.Log(info.innerHTML) \/\/ \u6dfb\u52a0\uff0f\u4fee\u6539\u6807\u7b7e\u5185\u90e8\u6587\u5b57\u5185\u5bb9\n\ninfo.innerHTML \uff1d'\u55e8\u55bd\uff0c\u4ffa\u662f<strong>\u5218\u5fb7\u534e<\uff0fstrong>\uff5e'<\/code><\/pre>\n\n\n\n\u5143\u7d20.innerText\u5c5e\u6027 \u53ea\u8bc6\u522b\u6587\u672c\uff0c\u4e0d\u80fd\u89e3\u6790\u6807\u7b7e\u5143\u7d20.innerHTML\u5c5e\u6027<\/p>\n\n\n\n
\u80fd\u8bc6\u522b\u6587\u672c\uff0c\u80fd\u591f\u89e3\u6790\u6807\u7b7e\u5982\u679c\u8fd8\u5728\u7ea0\u7ed3\u5230\u5e95\u7528\u8c01\uff0c\u4f60\u53ef\u4ee5\u9009\u62e9innerHTML<\/p>\n\n\n\n
\u5e74\u4f1a\u62bd\u5956\u6848\u4f8b<\/h5>\n\n\n\n
<script>\n\/\/ 1.\u58f0\u660e\u6570\u7ec4\nconst personArr =['\u5468\u6770\u4f26\uff0c\uff0c\u5218\u50da\u534e\uff0c\uff0c\u5468\u661f\u9a70\u2018\uff0c\u300cink\u8001\u5e08L\uff0c\u5f20\u5b66\n\u53cb\n\/\/ 2.\u5148\u505a\u4e00\u7b49\u5956\n\/\/ 2.2\u5c31%&\u6570\u7ec4\u7684\u4e0b\u6807\nconst random = Math.floor(Math.random() * personArr.length)\n\/\/ const? Le. Log (personA rr[ random J )\n\/\/ 2.2\u83b7\u53d6one\u5143\u5965\nconst one = document*querySelector('#one')\n\/\/ 2.3\u628a\u540d\u5b57\u7ed9one\none* innerHTML = personArr[random]\n\/\/ 2.4\u526f\u9664\u6570\u5f0ai\u4e2a\u540d\u5b57\npersonArr-splice(randomj 1)\n\/\/ consote-LogfpersonArr)\n\/\/ 3.\u4e8c\u7b49\u5956\n\/\/ 2.1\u968f\u673a\u6570\u6570\u7ec4\u7684\u4e0b\u6807\nconst random2 = Math.floor(Math.random() * personArr.length)\n\/\/ consoLe.Log(personArr[random])\n\/\/ 2.2\u83b7\u53d6one\u5143\u7d20\nconst two = document.querySelector('#two')\n\/\/ 2.3\u628a\u540d\u5b57\u7ed9one\ntwo.innerHTML = personArr[random2]\n\/\/ 2.4\u5220\u9664\u6570\u7ec4\u8fd9\u4e2a\u540d\u5b57\npersonArr.splice(random2, 1)\n\/\/ 4. \u4e09\u7b5d\u5956\n\/\/ 2.?\u968f\u673a\u6570\u6570\u7ec4\u7684\u4e0b\u6807\nconst random? = Math.floor(Math.random() * personArr.length)\n\/\/ consoLe. Log(personArr[random])\n\/\/ 2.2\u83b7\u53d6one\u65e0\u4e8b\nconst three = document.querySelector('frthree')\n\/\/ 2.3\u628a\u540d\u5b57\u7ed9one\nthree.innerHTML = personArr[random3]\n\/\/ 2.4\u526f\u9664\u6570\u7ec4\u8fd9\u4e2a\u540d\u5b66\npersonArr.splice(random3j 1)\n<\/script><\/code><\/pre>\n\n\n\n\u64cd\u4f5c\u5143\u7d20\u5c5e\u6027<\/h2>\n\n\n\n
\u8fd8\u53ef\u4ee5\u901a\u8fc7JS\u8bbe\u7f6e\/\u4fee\u6539\u6807\u7b7e\u5143\u7d20\u5c5e\u6027\uff0c\u6bd4\u5982\u901a\u8fc7sfc\u66f4\u6362\u56fe\u7247
\u2022 \u6700\u5e38\u89c1\u7684\u5c5e\u6027\u6bd4\u5982\uff1ahref\u3001title\u3001src\u7b49
\u8bed\u6cd5\uff1a\u5bf9\u8c61.\u5c5e\u6027=\u503c<\/p>\n\n\n\n<body>\n<img src=\".\/images\/1.webp\" alt=\" \">\n<script>\n\/\/1.\u83b7\u53d6\u56fe\u7247\u5143\u7d20\nconst img = document.querySelector('img')\n\/\/ 2.\u4fee\u6539\u56fe\u7247\u5bf9\u8c61\u7684\u5c5e\u6027 \u5bf9\u8c61.\u5c5e\u6027=\nimg.src = '.\/images\/2.webp'\nimg.title = 'pink\u8001\u5e08\u7684\u827a\u672f\u7167'\n| <\/script>\n<\/body><\/code><\/pre>\n\n\n\n\u968f\u673a\u66f4\u6362\u56fe\u7247\u6848\u4f8b<\/h5>\n\n\n\n
\/\/\u51c6\u5907\u597d\u51e0\u5f20\u540d\u5b57\u4e3a\u4e3a1 2 3 4 \u7684\u56fe\u7247\n<body>\n<img src=\".\/images\/1.webp\" alt=\"\">\n<script>\n\/\/\u53d6\u5230N~M\u7684\u968f\u673a\u6574\u6570\nfunction getRandom(N, M){\nreturn Math.floor(Math.random() * (M - N + 1)) + N\n}\n\/\/1.\u83b7\u53d6\u56fe\u7247\u5bf9\u8c61\nconst img = document. querySelector('img')\n\/\/2\u3001\u968f\u673a\u5f97\u5230\u5e8f\u53f7\nconst random = getRandom(1, 6)\n\/3\uff0c\u66f4\u6362\u8def\u5f84\nimg.src = `.\/images\/${random}.webp`\n<\/script>\n<\/body><\/code><\/pre>\n\n\n\n\u64cd\u4f5c\u5143\u7d20\u6837\u5f0f\u5c5e\u6027<\/h5>\n\n\n\n
\u2022\u8fd8\u53ef\u4ee5\u901a\u8fc7js\u8bbe\u7f6e\/\u4fee\u6539\u6807\u7b7e\u5143\u7d20\u7684\u6837\u5f0f\u5c5e\u6027\u3002
\uff1e\u6bd4\u5982\u901a\u8fc7\u8f6e\u64ad\u56fe\u5c0f\u5706\u70b9\u81ea\u52a8\u66f4\u6362\u989c\u8272\u6837\u5f0f
\uff1e\u70b9\u51fb\u6309\u94ae\u53ef\u4ee5\u6eda\u52a8\u56fe\u7247\uff0c\u8fd9\u662f\u79fb\u52a8\u7684\u56fe\u7247\u7684\u4f4d\u7f6eleft\u7b49\u7b49
\u5b66\u4e60\u8def\u5f84\uff1a
1 .\u901a\u8fc7style\u5c5e\u6027\u64cd\u4f5cCSS
2 .\u64cd\u4f5c\u7c7b\u540d(className)\u64cd\u4f5cC5S
3 .\u901a\u8fc7classList\u64cd\u4f5c\u7c7b\u63a7\u5236CSS<\/p>\n\n\n\n1 \u901a\u8fc7style\u5c5e\u6027\u64cd\u4f5cCSS<\/h6>\n\n\n\n
\u8bed\u6cd5\uff1a\u5bf9\u8c61.style.\u6837\u5f0f\u5c5e\u6027=\u503c<\/p>\n\n\n\n
<script>\n\/\/1.\u83b7\u53d6\u5143\u7d20\nconst box = document.querySelector('.box')\n\/\/2.\u4fee\u6539\u6837\u5f0f\u5c5e\u6027 \u5bf9\u8c61.style.\u6837\u5f0f\u5c5e\u6027=' ' \u522b\u5fd8\u4e86\u8ddf\u5355\u4f4d\nbox.style.width = '300px'\n\/\/\u591a\u7ec4\u5355\u8bcd\u7684\u91c7\u53d6\u5c0f\u9a7c\u5cf0\u547d\u540d\u6cd5\nbox.style.backgroundcolor = 'hotpink'\nbox.style.border = '2px solid blue'\nbox.style.borderTop = '2px solid red' \/\/0.025rem\n<\/script><\/code><\/pre>\n\n\n\n\u6ce8\u610f\uff1a
1 .\u4fee\u6539\u6837\u5f0f\u901a\u8fc7style\u5c5e\u6027\u5f15\u51fa
2 .\u5982\u679c\u5c5e\u6027\u6709-\u8fde\u63a5\u7b26\uff0c\u9700\u8981\u8f6c\u6362\u4e3a\u5c0f\u9a7c\u5cf0\u547d\u540d\u6cd5
3 .\u8d4b\u503c\u7684\u65f6\u5019\uff0c\u9700\u8981\u7684\u65f6\u5019\u4e0d\u8981\u5fd8\u8bb0\u52a0css\u5355\u4f4d<\/p>\n\n\n\nelement.style.paddingLeft='300px'<\/p>\n\n\n\n
\u4f8b\u5b50<\/p>\n\n\n\n
<script>\n\/\/ console.Log(document^body)\n\/\/ \u5230N ~ M\u7684\u968f\u673a\u6574\u6570\nfunction getRandom(M, N) {\nreturn Math.floor(Math.random() * (M - N + 1)) + N\n\/\/\nconst random = getRandom(1,10)\ndocument.body.style.backgroundimage = `url(.\/images\/desktop_${random}.jpg)`\n<\/script><\/code><\/pre>\n\n\n\n2. \u64cd\u4f5c\u7c7b\u540d(className)\u64cd\u4f5cCSS<\/h6>\n\n\n\n
\u5982\u679c\u4fee\u6539\u7684\u6837\u5f0f\u6bd4\u8f83\u591a\uff0c\u76f4\u63a5\u901a\u8fc7style\u5c5e\u6027\u4fee\u6539\u6bd4\u8f83\u7e41\u7410\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7\u501f\u52a9\u4e8ecss\u7c7b\u540d\u7684\u5f62\u5f0f\u3002
\u8bed\u6cd5\uff1a<\/p>\n\n\n\n\/\/active\u662f\u4e00\u4e2acss\u7c7b\u540d\n\u5143\u7d20.className = 'active'<\/code><\/pre>\n\n\n\n\u25cf\u6ce8\u610f\uff1a
1.\u7531\u4e8eclass\u662f\u5173\u952e\u5b57\uff0c\u6240\u4ee5\u4f7f\u7528className\u53bb\u4ee3\u66ff
2.className\u662f\u4f7f\u7528\u65b0\u503c\u6362\u65e7\u503c\uff0c\u5982\u679c\u9700\u8981\u6dfb\u52a0\u4e00\u4e2a\u7c7b\uff0c\u9700\u8981\u4fdd\u7559\u4e4b\u524d\u7684\u7c7b\u540d<\/p>\n\n\n\n<style>\ndiv {\nwidth: 200px;\nheight: 200px;\nbackground-color: \u30fbpink;\n}\n.nav{\ncolor: \u25a1 red ; \n}\n.box {\nwidth: 300px;\nheight: 300px;\nbackground-color:skyblue;\nmargin: 100px auto;\npadding: 10px;\nborder: lpx solid \u53e3#000;\n}\n<\/style>\n<\/head>\n<body>\n<div class=\"nav\">123<\/div>\n<script>\n\/\/ 1.\u83b7\u53d6\u5143\u7d20\nconst div = document.queryselector('div')\n\/\/ 2.\u6dfb\u52a0\u7c7b\u540dcLass\u662f\u4e2a\u5173\u952e\u5b57\u6211\u4eec\u7528cLassName\ndiv.className = 'nav box'\n<\/script>\n<\/body><\/code><\/pre>\n\n\n\n
3.\u901a\u8fc7classlist\u4fee\u6539\u6837\u5f0f<\/h6>\n\n\n\n
\u2022\u4e3a\u4e86\u89e3\u51b3className\u5bb9\u6613\u8986\u76d6\u4ee5\u524d\u7684\u7c7b\u540d\uff0c\u6211\u4eec\u53ef\u4ee5\u901a\u8fc7classList\u65b9\u5f0f\u8ffd\u52a0\u548c\u5220\u9664\u7c7b\u540d<\/p>\n\n\n\n
\/\/\u8ffd\u52a0\u4e00\u4e2a\u7c7b\n\u5143\u7d20.classList.add\uff08'\u7c7b\u540d'\uff09\n\/\/\u5220\u9664\u4e00\u4e2a\u7c7b\n\u5143\u7d20.classList.remove\uff08' \u7c7b\u540d'\uff09\n\/\/\u5207\u6362\u4e00\u4e2a\u7c7b\n\u5143\u7d20.classList.toggle\uff08'\u7c7b\u540d'\uff09<\/code><\/pre>\n\n\n\n\u987a\u5e26\u4e00\u63d0\uff0c\u591a\u7c7b\u540d\u60c5\u51b5\u4e0b\u5c5e\u6027\u51b2\u7a81\u662f\u8ddf\u636e style\u8868\u4e2d\u987a\u5e8f\u9760\u540e\u7684\uff0c\u4e0d\u662f\u6839\u636e\u5728html\u4e2d.<\/p>\n\n\n\n
<style>\n\n.box {\n\nwidth: 200px; \n\nheight: 200px; \n\ncolor:#333; \n\n}\n\n.active {\n\ncolor:red; \n\nbackground-color: pink\n\n}\n\n<\/style> \n\n<\/head> \n\n<body>\n\n<div class\uff1d\"box\">\u6587\u5b57<\/div>\n <script>\n\n\/\/\u901a\u8fc7cLassList\u6dfb\u52a0 \n\n\/\/ 1\uff0e\u83b7\u53d6\u5143\u7d20\n\nconst box = document.querySelector('.box') \n\n\/\/ 2\uff0e\u4fee\u6539\u6837\u5f0f\n\n\/\/2.1 \u8ffd\u52a0\u7c7badd\uff08\uff09\u7c7b\u540d\u4e0d\u52a0\u70b9\uff0c\u5e76\u4e14\u662f\u5b57\u7b26\u4e32,ture to-----div class\uff1d\uff02box active\uff02\n\nbox.classList.add('active')\n\n\/\/ 2.2 \u5220\u9664\u7c7b remove\uff08\uff09\u7c7b\u540d\u4e0d\u52a0\u70b9\uff0c\u5e76\u4e14\u662f\u5b57\u7b26\u4e32 ,ture to-----div class\uff1d\uff02box\uff02\n\nbox.classList.remove('box')\n\n\/\/2.3 \u5207\u6362\u7c7b toggle\uff08\uff09\u6709\u8fd8\u662f\u6ca1\u6709\u554a\uff0c\u6709\u5c31\u5220\u6389\uff0c\u6ca1\u6709\u5c31\u52a0\u4e0a \n\nbox.classList.toggle('active')\n\n<\/script> \n\n<\/body> <\/code><\/pre>\n\n\n\n\u4f7f\u7528 className\u548cclassList\u7684\u533a\u522b\uff1f<\/p>\n\n\n\n
- \n
- \u4fee\u6539\u5927\u91cf\u6837\u5f0f\u7684\u66f4\u65b9\u4fbf<\/li>\n\n\n\n
- \u4fee\u6539\u4e0d\u591a\u6837\u5f0f\u7684\u65f6\u5019\u65b9\u4fbf<\/li>\n\n\n\n
- classList\u662f\u8ffd\u52a0\u548c\u5220\u9664\u4e0d\u5f71\u54cd\u4ee5\u524d\u7c7b\u540d<\/li>\n<\/ol>\n\n\n\n
\u200b<\/p>\n\n\n\n
\u8f6e\u64ad\u56fe\u968f\u673a\u7248<\/h1>\n\n\n\n
\u9700\u6c42\uff1a\u5f53\u6211\u4eec\u5237\u65b0\u9875\u9762\uff0c\u9875\u9762\u4e2d\u7684\u8f6e\u64ad\u56fe\u4f1a\u663e\u793a\u4e0d\u540c\u56fe\u7247\u4ee5\u53ca\u6837\u5f0f<\/p>\n\n\n\n
\u5206\u6790\uff1a\u2460\uff1a\u51c6\u5907\u4e00\u4e2a\u6570\u7ec4\u5bf9\u8c61\uff0c\u91cc\u9762\u5305\u542b\u8be6\u7ec6\u4fe1\u606f\uff08\u7d20\u6750\u5305\u542b\uff09<\/p>\n\n\n\n
\u2461\uff1a\u968f\u673a\u9009\u62e9\u4e00\u4e2a\u6570\u5b57\uff0c\u9009\u51fa\u6570\u7ec4\u5bf9\u5e94\u7684\u5bf9\u8c61\uff0c\u66f4\u6362\u56fe\u7247\uff0c\u5e95\u90e8\u76d2\u5b50\u80cc\u666f\u989c\u8272\uff0c\u4ee5\u53ca\u6587\u5b57\u5185\u5bb9<\/p>\n\n\n\n
\u2462\uff1a\u5229\u7528\u8fd9\u4e2a\u968f\u673a\u6570\u5b57\uff0c\u8ba9\u5c0f\u5706\u70b9\u6dfb\u52a0\u9ad8\u4eae\u7684\u7c7b\uff08addClass\uff09\u5229\u7528css\u7ed3\u6784\u4f2a\u7c7b\u9009\u62e9\u5668<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n \n<head>\n <meta charset=\"UTF-8\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>\u8f6e\u64ad\u56fe\u70b9\u51fb\u5207\u6362<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n \n .slider {\n width: 560px;\n height: 400px;\n overflow: hidden;\n }\n \n .slider-wrapper {\n width: 100%;\n height: 320px;\n }\n \n .slider-wrapper img {\n width: 100%;\n height: 100%;\n display: block;\n }\n \n .slider-footer {\n height: 80px;\n background-color: rgb(100, 67, 68);\n padding: 12px 12px 0 12px;\n position: relative;\n }\n \n .slider-footer .toggle {\n position: absolute;\n right: 0;\n top: 12px;\n display: flex;\n }\n \n .slider-footer .toggle button {\n margin-right: 12px;\n width: 28px;\n height: 28px;\n appearance: none;\n border: none;\n background: rgba(255, 255, 255, 0.1);\n color: #fff;\n border-radius: 4px;\n cursor: pointer;\n }\n \n .slider-footer .toggle button:hover {\n background: rgba(255, 255, 255, 0.2);\n }\n \n .slider-footer p {\n margin: 0;\n color: #fff;\n font-size: 18px;\n margin-bottom: 10px;\n }\n \n .slider-indicator {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n align-items: center;\n }\n \n .slider-indicator li {\n width: 8px;\n height: 8px;\n margin: 4px;\n border-radius: 50%;\n background: #fff;\n opacity: 0.4;\n cursor: pointer;\n }\n \n .slider-indicator li.active {\n width: 12px;\n height: 12px;\n opacity: 1;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"slider\">\n <div class=\"slider-wrapper\">\n <img src=\".\/images\/slider01.jpg\" alt=\"\" \/>\n <\/div>\n <div class=\"slider-footer\">\n <p>\u5bf9\u4eba\u7c7b\u6765\u8bf4\u4f1a\u4e0d\u4f1a\u592a\u8d85\u524d\u4e86\uff1f<\/p>\n <ul class=\"slider-indicator\">\n <li><\/li>\n <li><\/li>\n <li><\/li>\n <li><\/li>\n <li><\/li>\n <li><\/li>\n <li><\/li>\n <li><\/li>\n <\/ul>\n <div class=\"toggle\">\n <button class=\"prev\"><<\/button>\n <button class=\"next\">><\/button>\n <\/div>\n <\/div>\n <\/div>\n\n\n<script>\n\/\/1\uff0e\u521d\u59cb\u6570\u636e \nconst sliderData=[\n{url:'.\/images\uff0fslider02.jpg'\uff0ctitle:'\u5f00\u542f\u5251\u4e0e\u96ea\u7684\u9ed1\u6697\u4f20\u8bf4\uff01'\uff0ccolor\uff1a'rgb\uff0843,35,26\uff09'},\n{url:'.\/images\uff0fslider03.jpg'\uff0ctitle:'\u771f\u6b63\u7684jo\u53a8\u51fa\u73b0\u4e86\uff01'\uff0ccolor\uff1a'rgb\uff0836,31,33\uff09'},\n{url:'.\/images\uff0fslider05.jpg'\uff0ctitle:'\u5feb\u6765\u5206\u4eab\u4f60\u7684\u5bd2\u5047\u65e5\u5e38\u5427'\uff0ccolor\uff1a'rgb\uff0867,90,92\uff09'},\n{url:'.\/images\uff0fslider06.jpg'\uff0ctitle:'\u54d4\u54e9\u54d4\u54e9\u5c0f\u5e74YEAH'\uff0ccolor\uff1a'rgb\uff08166\uff0c 131,143\uff09'}\uff0c\n{url:'.\/images\uff0fslider07.jpg'\uff0ctitle:'\u4e00\u7ad9\u5f0f\u89e3\u51b3\u4f60\u7684\u7535\u8111\u914d\u7f6e\u95ee\u9898\uff01\uff01\uff01'\uff0ccolor:'rgb\uff0853,29,25\uff09'},\n{ur1:'.\/images\uff0fslider08.jpg'\uff0ctitle:'\u8c01\u4e0d\u60f3\u548c\u5c0f\u732b\u54aa\u8d34\u8d34\u5462\uff01',color\uff1a'rgb(99,72,114)'},\n]\n\/\/1.\u9700\u8981\u4e00\u4e2a\u968f\u673a\u6570\nconst random = parseInt(Math.random()*sliderData.length)\n\/\/console.Log(sliderDatarandom\uff09\n\/\/2\u628a\u5bf9\u5e94\u7684\u6570\u636e\u67d3\u5230\u6807\u7b7e\u91cc\u9762\n\/\/2.1\u83b7\u53d6\u56fe\u7247\nconst img=document.querySelector('.slider-wrapper img'\uff09\n\/\/2.2\uff0c\u4fee\u6539\u56fe\u7247\u8def\u5f84=\u5bf9\u8c61.urL\nimg.src = sliderData[random].url\n\/\/ 3.\u628ap\u91cc\u9762\u7684\u6587\u5b57\u5185\u5bb9\u66f4\u6362\n\/\/ 3.1\u83b7\u53d6p\nconst p = document.querySelector('.slider-footer p')\n\/\/ 3.2\u4fee\u6539p\np.innerHTML = sliderData[random].title\n\/\/ 4.\u4fee\u6539\u80cc\u666f\u989c\u8272\nconst footer = document.querySelector('.slider-footer')\nfooter.style.backgroundcolor =slideerData[random].color\/\/\u884c\u5185\u6837\u5f0f\u8868\u662f\u9ad8\u4e8e\u5185\u90e8\u6837\u5f0f\u8868\uff0c\u6240\u4ee5\u53ef\u4ee5\u540e\u6765\u66f4\u6539\u6765\u8986\u76d6\u4ee5\u524d\u7684style=\"\"\n\/\/ 5.\u5c0f\u5706\u70b9\nconst li = document.querySelector(`.slider-indicator li\uff1anth-child(${random +1})`)\n\/\/\u8ba9\u5f53\u524d\u8fd9\u4e2a\u5c0fIt\u6dfb\u52a0active\u8fd9\u4e2a\u7c7b\nli.classList.add('active')\n<\/script>\n<\/body>\n<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
\u83b7\u53d6\u8bbe\u7f6e\u8868\u5355\u7684\u503c <\/h2>\n\n\n\n
- \n
- \u8868\u5355\u5f88\u591a\u60c5\u51b5\uff0c\u4e5f\u9700\u8981\u4fee\u6539\u5c5e\u6027\uff0c\u6bd4\u5982\u70b9\u51fb\u773c\u775b\uff0c\u53ef\u4ee5\u770b\u5230\u5bc6\u7801\uff0c\u672c\u8d28\u662f\u628a\u8868\u5355\u7c7b\u578b\u53d8\u4e3a\u6587\u672c\u6846<\/li>\n\n\n\n
- \u6b63\u5e38\u7684\u6709\u5c5e\u6027\u6709\u53d6\u503c\u7684\u8ddf\u5176\u4ed6\u7684\u6807\u7b7e\u5c5e\u6027\u6ca1\u6709\u4efb\u4f55\u533a\u522b<\/li>\n<\/ul>\n\n\n\n
\u83b7\u53d6\uff1aDOM\u5bf9\u8c61\u5c5e\u6027\u540d
\u8bbe\u7f6e\uff1aDOM\u5bf9\u8c61.\u5c5e\u6027\u540d=\u65b0\u503c<\/p>\n\n\n\n\u8868\u5355.value='\u7528\u6237\u540d'\n\u8868\u5355.type = 'password'<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
\u590d\u9009\u6846<\/h4>\n\n\n\n
\u8868\u5355\u5c5e\u6027\u4e2d\u6dfb\u52a0\u5c31\u6709\u6548\u679c\uff0c\u79fb\u9664\u5c31\u6ca1\u6709\u6548\u679c\uff0c\u4e00\u5f8b\u4f7f\u7528\u5e03\u5c14\u503c\u8868\u793a\u5982\u679c\u4e3atrue\u4ee3\u8868\u6dfb\u52a0\u4e86\u8be5\u5c5e\u6027\u5982\u679c\u662ffalse\u4ee3\u8868\u79fb\u9664\u4e86\u8be5\u5c5e\u6027\u3002
\u6bd4\u5982\uff1adisabled\u3001checked\u3001selected<\/p>\n\n\n\n<body>\n <button>\u70b9\u51fb<\/button>\n <script>\n \/\/ 1.\u83b7\u53d6\n const button = document.querySelector('button')\n \/\/ console.log(button.disabled) \/\/ \u9ed8\u8ba4false \u4e0d\u7981\u7528\n button.disabled = true \/\/ \u7981\u7528\u6309\u94ae\n <\/script>\n<\/body><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
<body>\n<input type=\"checkbox\" name=\"\" id=\"\" checked>\n<buttom disabled>\u70b9\u51fb<\/buttom>\/\/\u8fd9\u6837\u5c31\u7981\u6b62\u4f7f\u7528\u4e86\n<script>\n\/\/1\u83b7\u53d6\u5143\u7d20\n\/\/ const uname = document.querySeLeetor(^nputr)\n\/\/2.\u83b7\u53d6\u503c\u83b7\u53d6\u8870\u5355\u91cc\u9762\u7684\u503c\u7528\u7684value\n\/\/ console. Log(uname.vaLue)\/\/\u7535\u8111\n\/\/ consote. Log(uname.innerHTML ) innertHTML \u5f97\u4e0d\u5230\u8868\u5355\u7684\u5185\u5bdf\n\/\/ 3.\u8bbe\u7f6e\u8868\u5355\u7684\u503c\n\/\/ uname.vaLue =\"\u6211\u8981\u4e70\u7535\u8111\"\n\/\/ console.Log(uname.type)\n\/\/ uname.type = 'password'\n\n\/\/1\u83b7\u53d6\nconst ipt = document.querySelector('input')\n\/\/ consoLe. Log(ipt.checked) \/\/ faLse \u53ea\u63a5\u53d7\u5e03\u5c14\u503c\nipt.checked = true\n\/\/ ipt. checked = 'true' \/\/\u4f1a\u9009\u4e2d,\u4e0d\u63d0\u5021 \u6709\u9690\u5f0f\u8f6c\u6362\n\/\/\u83b7\u53d6\nconst button = document.querySelector('button')\n\/\/ consoLe. Log(buttor).disabLed) \/\/ \u9ed8\u8ba4false \u4e0d\u7981\u7528\nbutton.disabled = true \/\/ \u7981\u7528\u6309\u94ae \n\n<\/script>\n<\/body><\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
\u81ea\u5b9a\u4e49\u5c5e\u6027<\/h1>\n\n\n\n
\u6807\u51c6\u5c5e\u6027\uff1a\u6807\u7b7e\u5929\u751f\u81ea\u5e26\u7684\u5c5e\u6027\u6bd4\u5982class id title\u7b49\uff0c\u53ef\u4ee5\u76f4\u63a5\u4f7f\u7528\u70b9\u8bed\u6cd5\u64cd\u4f5c\u6bd4\u5982\uff1adisabled, checked.selected
\u2022\u81ea\u5b9a\u4e49\u5c5e\u6027\uff1a
\uff1e\u5728html5\u4e2d\u63a8\u51fa\u6765\u4e86\u4e13\u95e8\u7684data-\u81ea\u5b9a\u4e49\u5c5e\u6027
\uff1e\u5728\u6807\u7b7e\u4e0a\u4e00\u5f8b\u4ee5data-\u5f00\u5934
\uff1e\u5728DOM\u5bf9\u8c61\u4e0a\u4e00\u5f8b\u4ee5dataset\u5bf9\u8c61\u65b9\u5f0f\u83b7\u53d6 \u200b<\/p>\n\n\n\n![\"\"](\"https:\/\/eve2333.top\/wp-content\/uploads\/2024\/10\/1729824609-ecdc9d6acd15ffe9c59876aa0f140cc0.png\")
<\/figure>\n\n\n\n<body>\n<div data-id=\"1\" data-spm=\"\u4e0d\u77e5\u9053\">1<\/div>\n<div data-id=\"2\">2<\/div>\n<div data-id=\"3\">3<\/div>\n<div data-id=\"4\">4<\/div>\n<div data-id=\"5\">5<\/div>\n<script>\nconst one = document.querySelector('div')\nconsole.log(one.dataset)\/\/\u8fd9\u65f6\u53f3\u4fa7\u663e\u793a:DOMStringMap{id:'1',spm:'\u4e0d\u77e5\u9053;}id:'1',spm:'\u4e0d\u77e5\u9053';\nconsole.log(one.dataset.id)\/\/1\nconsole.log(one.dataset.spm)\/\/\u4e0d\u77e5\u9053\n<\/script>\n<\/body><\/code><\/pre>\n\n\n\n\u5b9a\u65f6\u5668\u95f4\u6b47\u51fd\u6570<\/h3>\n\n\n\n
\u7f51\u9875\u7684\u5012\u8ba1\u65f6<\/p>\n\n\n\n
setInterval(\u51fd\u6570,\u95f4\u9694\u65f6\u95f4)\n\/\/\u6bcf\u9694\u4e00\u6bb5\u65f6\u95f4\u8c03\u7528\u51fd\u6570\n2. \u5b9a\u65f6\u5668\u8fd4\u56de\u7684\u662f\u4e00\u4e2aid\u6570\u5b57\n\/\/\u95f4\u9694\u5355\u4f4d\u662fms<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
let \u53d8\u91cf\u540d = setInterval(\u51fd\u6570, \u95f4\u9694\u65f6\u95f4)\n\nclearInterval(\u53d8\u91cf\u540d)<\/code><\/pre>\n\n\n\n<\/p>\n\n\n\n
<script>\n\/\/setInterval(\u51fd\u6570,\u95f4\u9694\u65f6\u95f4)\nsetInterval(function (){\nconsole.log('\u4e00\u79d2\u6267\u884c\u4e00\u6b21')\n},1000)\nfunction fn() {\nconsole.log('\u4e00\u79d2\u6267\u884c\u4e00\u6b21')\n}\n\/\/ setInterval(\u51fd\u6570\u540d,\u95f4\u9694\u65f6\u95f4) \u51fd\u6570\u540d\u4e0d\u8981\u52a0\u5c0f\u62ec\u53f7!!!!!!\nlet n = setlnterval(fn, 1000)\u8fd9\u662f\u81ea\u52a8\u751f\u6210\u7684\u4e00\u4e2a\u5b9a\u65f6\u5668ID\uff0c\u540e\u9762\u7528\u6765\u79fb\u9664\u5b9a\u65f6\u5668\u7528\n\/\/ setIntervaL('fn()', 1000)\nconsole.log(n)\n\/\/\u5173\u95ed\u5b9a\u65f6\u5668 \u5b9a\u65f6\u5668\u8fd4\u56de\u7684\u662f\u4e00\u4e2aid\u6570\u503c\nclearInterval(n)\n Let m = setlntervaL (function () {\n consoLe.Log(ll)\n }, 2000)\n consoLe.Log(m)\n\n\/\/ const num = 10\n\/\/ num = 10\n\/\/ consoLe.Log(num)\uff0c\u91cd\u65b0\u8d4b\u503c\u662f\u9519\u8bef\u7684\n<\/script><\/code><\/pre>\n\n\n\n\u9605\u8bfb\u6ce8\u518c \u534f\u8bae <\/h3>\n\n\n\n
<body>\n <textarea name=\"\" id=\"\" cols=\"30\" rows=\"10\">\n \u7528\u6237\u6ce8\u518c\u534f\u8bae\n \u6b22\u8fce\u6ce8\u518c\u6210\u4e3a\u4eac\u4e1c\u7528\u6237\uff01\u5728\u60a8\u6ce8\u518c\u8fc7\u7a0b\u4e2d\uff0c\u60a8\u9700\u8981\u5b8c\u6210\u6211\u4eec\u7684\u6ce8\u518c\u6d41\u7a0b\u5e76\u901a\u8fc7\u70b9\u51fb\u540c\u610f\u7684\u5f62\u5f0f\u5728\u7ebf\u7b7e\u7f72\u4ee5\u4e0b\u534f\u8bae\uff0c\u8bf7\u60a8\u52a1\u5fc5\u4ed4\u7ec6\u9605\u8bfb\u3001\u5145\u5206\u7406\u89e3\u534f\u8bae\u4e2d\u7684\u6761\u6b3e\u5185\u5bb9\u540e\u518d\u70b9\u51fb\u540c\u610f\uff08\u5c24\u5176\u662f\u4ee5\u7c97\u4f53\u6216\u4e0b\u5212\u7ebf\u6807\u8bc6\u7684\u6761\u6b3e\uff0c\u56e0\u4e3a\u8fd9\u4e9b\u6761\u6b3e\u53ef\u80fd\u4f1a\u660e\u786e\u60a8\u5e94\u5c65\u884c\u7684\u4e49\u52a1\u6216\u5bf9\u60a8\u7684\u6743\u5229\u6709\u6240\u9650\u5236\uff09\u3002\n \u3010\u8bf7\u60a8\u6ce8\u610f\u3011\u5982\u679c\u60a8\u4e0d\u540c\u610f\u4ee5\u4e0b\u534f\u8bae\u5168\u90e8\u6216\u4efb\u4f55\u6761\u6b3e\u7ea6\u5b9a\uff0c\u8bf7\u60a8\u505c\u6b62\u6ce8\u518c\u3002\u60a8\u505c\u6b62\u6ce8\u518c\u540e\u5c06\u4ec5\u53ef\u4ee5\u6d4f\u89c8\u6211\u4eec\u7684\u5546\u54c1\u4fe1\u606f\u4f46\u65e0\u6cd5\u4eab\u53d7\u6211\u4eec\u7684\u4ea7\u54c1\u6216\u670d\u52a1\u3002\u5982\u60a8\u6309\u7167\u6ce8\u518c\u6d41\u7a0b\u63d0\u793a\u586b\u5199\u4fe1\u606f\uff0c\u9605\u8bfb\u5e76\u70b9\u51fb\u540c\u610f\u4e0a\u8ff0\u534f\u8bae\u4e14\u5b8c\u6210\u5168\u90e8\u6ce8\u518c\u6d41\u7a0b\u540e\uff0c\u5373\u8868\u793a\u60a8\u5df2\u5145\u5206\u9605\u8bfb\u3001\u7406\u89e3\u5e76\u63a5\u53d7\u534f\u8bae\u7684\u5168\u90e8\u5185\u5bb9\uff0c\u5e76\u8868\u660e\u60a8\u540c\u610f\u6211\u4eec\u53ef\u4ee5\u4f9d\u636e\u534f\u8bae\u5185\u5bb9\u6765\u5904\u7406\u60a8\u7684\u4e2a\u4eba\u4fe1\u606f\uff0c\u5e76\u540c\u610f\u6211\u4eec\u5c06\u60a8\u7684\u8ba2\u5355\u4fe1\u606f\u5171\u4eab\u7ed9\u4e3a\u5b8c\u6210\u6b64\u8ba2\u5355\u6240\u5fc5\u987b\u7684\u7b2c\u4e09\u65b9\u5408\u4f5c\u65b9\uff08\u8be6\u60c5\u67e5\u770b\n <\/textarea>\n <br>\n <button class=\"btn\" disabled>\u6211\u5df2\u7ecf\u9605\u8bfb\u7528\u6237\u534f\u8bae(5)<\/button>\n <script>\n \/\/ 1. \u83b7\u53d6\u5143\u7d20\n const btn = document.querySelector('.btn')\n \/\/ console.log(btn.innerHTML) butto\u6309\u94ae\u7279\u6b8a\u7528innerHTML\n \/\/ 2. \u5012\u8ba1\u65f6\n let i = 5\n \/\/ 2.1 \u5f00\u542f\u5b9a\u65f6\u5668\n let n = setInterval(function () {\n i--\n btn.innerHTML = `\u6211\u5df2\u7ecf\u9605\u8bfb\u7528\u6237\u534f\u8bae(${i})`\n if (i === 0) {\n clearInterval(n) \/\/ \u5173\u95ed\u5b9a\u65f6\u5668\n \/\/ \u5b9a\u65f6\u5668\u505c\u4e86\uff0c\u6211\u5c31\u53ef\u4ee5\u5f00\u6309\u94ae\n btn.disabled = false\n btn.innerHTML = '\u540c\u610f'\n }\n }, 1000)\n <\/script>\n<\/body><\/code><\/pre>\n\n\n\n\u8f6e\u64ad\u56fe\u5b9a\u65f6\u7248<\/h1>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"en\">\n \n<head>\n <meta charset=\"UTF-8\" \/>\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" \/>\n <title>\u8f6e\u64ad\u56fe\u70b9\u51fb\u5207\u6362<\/title>\n <style>\n * {\n box-sizing: border-box;\n }\n \n .slider {\n width: 560px;\n height: 400px;\n overflow: hidden;\n }\n \n .slider-wrapper {\n width: 100%;\n height: 320px;\n }\n \n .slider-wrapper img {\n width: 100%;\n height: 100%;\n display: block;\n }\n \n .slider-footer {\n height: 80px;\n background-color: rgb(100, 67, 68);\n padding: 12px 12px 0 12px;\n position: relative;\n }\n \n .slider-footer .toggle {\n position: absolute;\n right: 0;\n top: 12px;\n display: flex;\n }\n \n .slider-footer .toggle button {\n margin-right: 12px;\n width: 28px;\n height: 28px;\n appearance: none;\n border: none;\n background: rgba(255, 255, 255, 0.1);\n color: #fff;\n border-radius: 4px;\n cursor: pointer;\n }\n \n .slider-footer .toggle button:hover {\n background: rgba(255, 255, 255, 0.2);\n }\n \n .slider-footer p {\n margin: 0;\n color: #fff;\n font-size: 18px;\n margin-bottom: 10px;\n }\n \n .slider-indicator {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n align-items: center;\n }\n \n .slider-indicator li {\n width: 8px;\n height: 8px;\n margin: 4px;\n border-radius: 50%;\n background: #fff;\n opacity: 0.4;\n cursor: pointer;\n }\n \n .slider-indicator li.active {\n width: 12px;\n height: 12px;\n opacity: 1;\n }\n <\/style>\n<\/head>\n \n<body>\n <div class=\"slider\">\n <div class=\"slider-wrapper\">\n <img src=\".\/images\/slider01.jpg\" alt=\"\" \/>\n <\/div>\n <div class=\"slider-footer\">\n <p>\u5bf9\u4eba\u7c7b\u6765\u8bf4\u4f1a\u4e0d\u4f1a\u592a\u8d85\u524d\u4e86\uff1f<\/p>\n <ul class=\"slider-indicator\">\n <li class=\"active\"><\/li>\n <li><\/li>\n <li><\/li>\n <li><\/li>\n <li><\/li>\n <li><\/li>\n <li><\/li>\n <li><\/li>\n <\/ul>\n <div class=\"toggle\">\n <button class=\"prev\"><<\/button>\n <button class=\"next\">><\/button>\n <\/div>\n <\/div>\n <\/div>\n <script>\n \/\/ 1. \u521d\u59cb\u6570\u636e\n const sliderData = [\n { url: '.\/images\/slider01.jpg', title: '\u5bf9\u4eba\u7c7b\u6765\u8bf4\u4f1a\u4e0d\u4f1a\u592a\u8d85\u524d\u4e86\uff1f', color: 'rgb(100, 67, 68)' },\n { url: '.\/images\/slider02.jpg', title: '\u5f00\u542f\u5251\u4e0e\u96ea\u7684\u9ed1\u6697\u4f20\u8bf4\uff01', color: 'rgb(43, 35, 26)' },\n { url: '.\/images\/slider03.jpg', title: '\u771f\u6b63\u7684jo\u53a8\u51fa\u73b0\u4e86\uff01', color: 'rgb(36, 31, 33)' },\n { url: '.\/images\/slider04.jpg', title: '\u674e\u7389\u521a\uff1a\u8ba9\u4e16\u754c\u901a\u8fc7B\u7ad9\u770b\u5230\u4e1c\u65b9\u5927\u56fd\u6587\u5316', color: 'rgb(139, 98, 66)' },\n { url: '.\/images\/slider05.jpg', title: '\u5feb\u6765\u5206\u4eab\u4f60\u7684\u5bd2\u5047\u65e5\u5e38\u5427~', color: 'rgb(67, 90, 92)' },\n { url: '.\/images\/slider06.jpg', title: '\u54d4\u54e9\u54d4\u54e9\u5c0f\u5e74YEAH', color: 'rgb(166, 131, 143)' },\n { url: '.\/images\/slider07.jpg', title: '\u4e00\u7ad9\u5f0f\u89e3\u51b3\u4f60\u7684\u7535\u8111\u914d\u7f6e\u95ee\u9898\uff01\uff01\uff01', color: 'rgb(53, 29, 25)' },\n { url: '.\/images\/slider08.jpg', title: '\u8c01\u4e0d\u60f3\u548c\u5c0f\u732b\u54aa\u8d34\u8d34\u5462\uff01', color: 'rgb(99, 72, 114)' },\n ]\n \/\/ 1. \u83b7\u53d6\u5143\u7d20 \n const img = document.querySelector('.slider-wrapper img')\n const p = document.querySelector('.slider-footer p')\n let i = 0 \/\/ \u4fe1\u53f7\u91cf \u63a7\u5236\u56fe\u7247\u7684\u5f20\u6570\n \/\/ 2. \u5f00\u542f\u5b9a\u65f6\u5668\n setInterval(function () {\n i++\n \/\/ \uff01\u65e0\u7f1d\u8854\u63a5\u4f4d\u7f6e\uff01 \u4e00\u5171\u516b\u5f20\u56fe\u7247\uff0c\u5230\u4e86\u6700\u540e\u4e00\u5f20\u5c31\u662f 8\uff0c \u6570\u7ec4\u7684\u957f\u5ea6\u5c31\u662f 8\n if (i >= sliderData.length) {\n i = 0\n }\n \/\/ \u66f4\u6362\u56fe\u7247\u8def\u5f84 \n img.src = sliderData[i].url\n \/\/ \u628a\u5b57\u5199\u5230 p\u91cc\u9762\n p.innerHTML = sliderData[i].title\n \/\/ \u5c0f\u5706\u70b9\n \/\/ \u5148\u5220\u9664\u4ee5\u524d\u7684active\n document.querySelector('.slider-indicator .active').classList.remove('active')\n \/\/ \u53ea\u8ba9\u5f53\u524dli\u6dfb\u52a0active,\u4e0d\u80fd\u98a0\u5012\uff01\uff01\uff01\n document.querySelector(`.slider-indicator li:nth-child(${i + 1})`).classList.add('active')\n }, 1000)\n \/\/\u65f6\u4ee3\u5728\u53d8\u5316 \u4e0d\u7528\u5faa\u73af\u6392\u4ed6\u4e86\n <\/script>\n<\/body>\n \n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"web api\u57fa\u7840 \u53d8\u91cf\u58f0\u660e\u6709\u4e09\u4e2avar let \u548cconst \u00b7\u6211\u4eec\u5e94\u8be5\u7528\u90a3\u4e2a\u5462\uff1f \u00b7\u9996\u5148var\u5148\u6392\u9664\uff0c\u8001\u6d3e\u5199\u6cd5\uff0c\u95ee\u9898\u5f88\u591a\uff0c\u53ef\u4ee5 …<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"emotion":"","emotion_color":"","title_style":"","license":"","footnotes":""},"categories":[2],"tags":[12,10],"class_list":["post-414","post","type-post","status-publish","format-standard","hentry","category-2","tag-js","tag-10"],"_links":{"self":[{"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/posts\/414","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eve2333.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=414"}],"version-history":[{"count":0,"href":"https:\/\/eve2333.top\/index.php?rest_route=\/wp\/v2\/posts\/414\/revisions"}],"wp:attachment":[{"href":"https:\/\/eve2333.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=414"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eve2333.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=414"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eve2333.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=414"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}