html5实现的一些效果
一、网页换肤
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 | <!DOCTYPE html> <html> <head> <meta charset= "utf-8" > <title>网页换肤</title> <script type= "text/javascript" > //检查浏览器是否支持localStorage if (typeof localStorage=== 'undefined' ){ window.alert( "not support localStorage" ); } else { window.alert( "support localStorage" ); var storage = localStorage; //设置DIV背景颜色为红色,并保存localStorage function redSet(){ var value = "red" ; document.getElementById( "divblock" ).style.backgroundColor = value; window.localStorage.setItem( "DivBackGroundColor" ,value); } function greenSet(){ var value = "green" ; document.getElementById( "divblock" ).style.backgroundColor = value; window.localStorage.setItem( "DivBackGroundColor" ,value); } function blueSet(){ var value = "blue" ; document.getElementById( "divblock" ).style.backgroundColor = value; window.localStorage.setItem( "DivBackGroundColor" ,value); } function colorload(){ document.getElementById( "divblock" ).style.backgroundColor = window.localStorage.getItem( "DivBackGroundColor" ); } } </script> </head> <body onload= "colorload()" > <section id= "main" > <button id= "redbutton" onclick= "redSet()" >红色</button> <button id= "greenbutton" onclick= "greenSet()" >绿色</button> <button id= "bluebutton" onclick= "blueSet()" >蓝色</button> <div id= "divblock" style= "width: 500px; height: 500px;" ></div> </section> </body> </html> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 为DeepSeek添加本地知识库
· 精选4款基于.NET开源、功能强大的通讯调试工具
· DeepSeek智能编程
· 大模型工具KTransformer的安装
· [计算机/硬件/GPU] 显卡