搜索到
1
篇与
的结果
-
jQuery实现网页刷新保持状态的黑暗模式 暗黑模式估计是今年最流行的网页配色了学习一点，进步一点。这个效果还是挺实用的，很多网页都有，但能找到的教程都不全面，或者是罗里吧嗦的长篇大论。能用最简单的方式实现，就绝不拖泥带水。直接上代码了，记录一下学习的成果。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <style> /* 基本白天的css样式 */ .box { width: 300px; height: 300px; background: orange; } /* 黑夜样式 */ html[dark='true'] body { background: #333; color:#bbb } html[dark='true'] .box { background: red; } #dark{cursor:pointer} </style> </head> <body> <!--darkmode start--> <div class="box"></div> <a id="dark" href="javascript:">黑</a> <!--darkmode end--> </body> </html> <script> if (localStorage.getItem('dark')) { $('html').attr('dark', true) $('#dark').text('白') } else { $('html').removeAttr('dark', true) $('#dark').text('黑') } $('#dark').on('click', function () { if ($('html').attr('dark')) { $('html').removeAttr('dark') localStorage.removeItem('dark') $('#dark').text('黑') } else { $('html').attr('dark', true) localStorage.setItem('dark', true) $('#dark').text('白') } }) </script>
