Community Learn Tools Library Leisure
search
English
Home > List of blog posts > cookie 保存和清除用户样式
Blogger Information
Blog 70
fans 1
comment 0
visits 52930
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
cookie 保存和清除用户样式
葡萄枝子
Original
646 people have browsed it

cookie 保存和清除用户样式

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  7.     <style>
  8.         .container {
  9.             border: 1px solid #ccc;
  10.             width: 300px;
  11.             margin: 20px auto;
  12.             text-align: center;
  13.         }
  15.         .container > h1 {
  16.             margin: 100px auto;
  17.         }
  19.         body > form {
  20.             width: 350px;
  21.             margin: 20px auto;
  22.             display: flex;
  23.             justify-content: space-between;
  24.             align-items: center;
  25.         }
  26.     </style>
  28. </head>
  29. <body>
  31. <form action="">
  32.     <div>
  33.         <div>
  34.             <label for="bg">背景 rgb</label>
  35.             <input type="text" name="bg1" id="bg1" size="3" value="255">
  36.             <input type="text" name="bg2" id="bg2" size="3" value="255">
  37.             <input type="text" name="bg3" id="bg3" size="3" value="255">
  38.         </div>
  39.         <div>
  40.             <label for="color">字体 rgb</label>
  41.             <input type="text" name="color1" id="color1" size="3" value="0">
  42.             <input type="text" name="color2" id="color2" size="3" value="0">
  43.             <input type="text" name="color3" id="color3" size="3" value="0">
  44.         </div>
  45.     </div>
  46.     <div>
  47.         <input type="button" value="确定" id="ensure">
  48.         <input type="button" value="清理" id="clear">
  49.     </div>
  50. </form>
  52. <div class="container">
  53.     <h1 class="text">Hello world!</h1>
  54. </div>
  56. <script>
  57.     window.onload = initialize;
  59.     function initialize() {
  60.         var form = document.forms[0],
  61.             bg1 = getCookie('bg1') || 255,
  62.             bg2 = getCookie('bg2') || 255,
  63.             bg3 = getCookie('bg3') || 255,
  64.             color1 = getCookie('color1') || 0,
  65.             color2 = getCookie('color2') || 0,
  66.             color3 = getCookie('color3') || 0;
  68.         // 表单赋值
  69.         form.bg1.value = bg1;
  70.         form.bg2.value = bg2;
  71.         form.bg3.value = bg3;
  72.         form.color1.value = color1;
  73.         form.color2.value = color2;
  74.         form.color3.value = color3;
  76.         // 修改背景和字体颜色
  77.         document.getElementsByClassName('container')[0].style.backgroundColor = `rgb(${bg1}, ${bg2}, ${bg3})`;
  78.         document.getElementsByClassName('text')[0].style.color = `rgb(${color1}, ${color2}, ${color3})`;
  80.         // 绑定点击改变和删除背景和字体颜色事件
  81.         document.getElementById('ensure').onclick = changeAttr;
  82.         document.getElementById('clear').onclick = removeAttr;
  83.     }
  85.     function changeAttr() {
  86.         var form = document.forms[0],
  87.             bg1 = form.bg1.value,
  88.             bg2 = form.bg2.value,
  89.             bg3 = form.bg3.value,
  90.             color1 = form.color1.value,
  91.             color2 = form.color2.value,
  92.             color3 = form.color3.value;
  94.         // cookie 保存背景
  95.         setCookie('bg1', bg1);
  96.         setCookie('bg2', bg2);
  97.         setCookie('bg3', bg3);
  99.         // cookie 保存字体颜色
  100.         setCookie('color1', color1);
  101.         setCookie('color2', color2);
  102.         setCookie('color3', color3);
  104.         // 修改背景和字体颜色
  105.         document.getElementsByClassName('container')[0].style.backgroundColor = `rgb(${bg1}, ${bg2}, ${bg3})`;
  106.         document.getElementsByClassName('text')[0].style.color = `rgb(${color1}, ${color2}, ${color3})`;
  107.     }
  109.     function removeAttr() {
  110.         // cookie 删除背景
  111.         delCookie('bg1');
  112.         delCookie('bg2');
  113.         delCookie('bg3');
  115.         // cookie 删除字体颜色
  116.         delCookie('color1');
  117.         delCookie('color2');
  118.         delCookie('color3');
  120.         // 页面重载
  121.         location.reload();
  122.     }
  124.     function getCookie(name) {
  125.         var cookies = document.cookie ? document.cookie.split(';') : [];
  126.         for (var i = 0; i < cookies.length; i++) {
  127.             if (0 === cookies[i].trim().indexOf(name)) {
  128.                 return cookies[i].trim().split('=')[1].trimLeft();
  129.             }
  130.         }
  131.         return '';
  132.     }
  134.     function setCookie(name, value, expiredays = 30) {
  135.         var cookies = document.cookie ? document.cookie.split(';') : [], date = new Date();
  136.         date.setTime(date.getTime() + expiredays * 24 * 60 * 60 * 1000);
  138.         // 修改存在的 name, expires 值
  139.         for (var i = 0; i < cookies.length; i++) {
  140.             if (0 === cookies[i].trim().indexOf(name)) {
  141.                 var existName = true;
  142.                 cookies[i] = name + '=' + value;
  143.                 continue;
  144.             }
  145.             if (0 === cookies[i].trim().indexOf('expires')) {
  146.                 var existExpires = true;
  147.                 cookies[i] = 'expires=' + date.toUTCString();
  148.                 continue;
  149.             }
  150.             if (0 === cookies[i].trim().indexOf('path')) {
  151.                 var existPath = true;
  152.             }
  153.         }
  155.         // 添加未存在的 name, expires, path 值
  156.         if ('undefined' === typeof existName) {
  157.             cookies.unshift(name + '=' + value);
  158.         }
  159.         if ('undefined' === typeof existExpires) {
  160.             cookies.push('expires=' + date.toUTCString());
  161.         }
  162.         if ('undefined' === typeof existPath) {
  163.             cookies.push('path=/');
  164.         }
  166.         // 设置 cookie
  167.         document.cookie = cookies.join(';');
  168.     }
  170.     function delCookie(name) {
  171.         var cookies = document.cookie ? document.cookie.split(';') : [], date = new Date();
  172.         date.setTime(date.getTime() - 1);
  174.         // 删除存在的 name 值，修改 expires 值
  175.         for (var i = 0; i < cookies.length; i++) {
  176.             if (0 === cookies[i].trim().indexOf(name)) {
  177.                 cookies.splice(i, 1);
  178.             }
  179.             if (0 === cookies[i].trim().indexOf('expires')) {
  180.                 var existExpires = true;
  181.                 cookies[i] = 'expires=' + date.toUTCString();
  182.             }
  183.             if (0 === cookies[i].trim().indexOf('path')) {
  184.                 var existPath = true;
  185.             }
  186.         }
  188.         // 如果未存在 expires, path 值
  189.         if ('undefined' === typeof existExpires) {
  190.             cookies.push('expires=' + date.toUTCString());
  191.         }
  192.         if ('undefined' === typeof existPath) {
  193.             cookies.push('path=/');
  194.         }
  196.         // 设置 cookie
  197.         document.cookie = cookies.join(';');
  198.     }
  199. </script>
  201. </body>
  202. </html>

背景和字体颜色

  • 改变背景黄色和字体红色rgb值

改变背景和字体颜色

  • 刷新页面仍保持黄色背景，红色字体，点击清理，恢复原来样式
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post