如何使用HTML CSS如何实现网页换肤效果(二)

花开花谢,人来又走,夕阳西下,人去楼空,早已物是人非矣。也许,这就是结局,可我不曾想过结局是这样;也许,这就是人生的意义,可我不曾想竟是生离死别。
废话不多说了,直接给大家贴html代码了,具体代码如下所示:
XML/HTML Code复制内容到剪贴板
  1. <head>
  2. <title>网页换肤</title>
  3. <metahttp-equiv="Content-Type"content="text/html";charset="UTF-8">
  4. <linkid="myCss"rel="nofollow noopener noreferrer" href="orange.css"rel="stylesheet">
  5. <scriptlanguage="javascript">
  6. //写入客户端Cookie
  7. functionwriteCookie(csspath){
  8. vartoday=newDate();
  9. varexpires=newDate();
  10. expires.setTime(today.getTime()+1000*60*60*24*30);//有效期为30天
  11. varstr="cssPath="+csspath+";expires="+expires.toGMTString()
  12. +";";
  13. document.cookie=str;
  14. }
  15. //读取Cookie
  16. functionreadCookie(cookieName){
  17. varsearch=cookieName+"=";
  18. if(document.cookie.length>0){
  19. offset=document.cookie.indexOf(search);
  20. if(offset!=-1){
  21. offset+=search.length;
  22. end=document.cookie.indexOf(";",offset);
  23. if(end==-1){
  24. end=document.cookie.length;
  25. returnunescape(document.cookie.substring(offset,end));
  26. }
  27. }
  28. }
  29. }
  30. functionifCookie(){
  31. if(readCookie("cssPath")==undefined){
  32. writeCookie("orange.css");
  33. }
  34. document.getElementById("myCss").rel="nofollow noopener noreferrer" href=readCookie("cssPath");
  35. }
  36. functionchange(type){
  37. if(type=="orange"){
  38. document.getElementById("myCss").rel="nofollow noopener noreferrer" href="orange.css";
  39. writeCookie("orange.css");
  40. }
  41. if(type=="gray"){
  42. document.getElementById("myCss").rel="nofollow noopener noreferrer" href="gray.css";
  43. writeCookie("gray.css");
  44. }
  45. }
  46. </script>
  47. </head>

通过以上代码就可以简单实现使用HTML CSS实现网页换肤效果,希望本读代码对大家有所帮助。

到此这篇关于如何使用HTML CSS如何实现网页换肤效果(二)就介绍到这了。不怕学问浅,就怕志气短。更多相关如何使用HTML CSS如何实现网页换肤效果(二)内容请查看相关栏目,小编编辑不易,再次感谢大家的支持!

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案

CSS如何使用Flex和Grid布局如何实现3D骰子

Flex布局史上最简单使用语法教程

新的CSS 伪类函数 :is() 和 :where()示例详解

纯CSS打字动画的如何实现示例