时间戳

首页 > 解决方案 > 将 js 转换为 php 以获得背景颜色 cookie

javascript - 将 js 转换为 php 以获得背景颜色 cookie

问题描述

我正在使用以下 js 脚本为用户更改的背景颜色添加一个 cookie，但是加载颜色需要大约 1 秒的时间，我认为使用 php 作为 cookie 会更好地编写选择的颜色从加载页面的点开始，因此它从一开始就以正确的颜色加载。

JS：

var setCookie = function (n, val) {
    var exdays = 30;
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = n + "=" + val + "; " + expires;
};

var getCookie = function (n) {
    var name = n + "=";
    var ca = document.cookie.split(';');
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) == ' ') c = c.substring(1);
        if (c.indexOf(name) == 0) {
            return c.substring(name.length, c.length);
        }
    }
    return "";
};

document.onclick = function (e) {
    if (e.target.className == 'color-btn') {
        var favColor = e.target.style.backgroundColor;
        setCookie('color', favColor);
        document.body.style.backgroundColor = favColor;
        console.log(favColor);
    }
};

window.onload = function () {
    var favColor = document.body.style.backgroundColor;
    var color = getCookie('color');
    if (color === '') {
        document.body.style.backgroundColor = favColor;
    } else {
      document.body.style.backgroundColor = color;
    }
};
      body {
  background-color: rgba(219, 218, 236, 1);
}

.color-btn {
  width: 100px;
  height: 25px;
  display: inline-block;
  cursor: pointer;
  margin: 0;
  padding: 0;
  border: 1px solid white;
}
<li><button class="color-btn" style="background-color: #dbdaec"></button></li>
<li><button class="color-btn" style="background-color: #B4CAE5"></button></li>
<li><button class="color-btn" style="background-color: #C2E5C6"></button></li>
<li><button class="color-btn" style="background-color: #EAEAEA"></button></li>
<li><button class="color-btn" style="background-color: #ffffff"></button></li>

注意：上面的脚本在沙箱中，在这里不起作用。

转换后的php（不起作用）：

<?php
$setCookie = new Func(function($n = null, $val = null) use (&$Date, &$document) {
  $exdays = 30.0;
  $d = _new($Date);
  call_method($d, "setTime", _plus(call_method($d, "getTime"), to_number($exdays) * 24.0 * 60.0 * 60.0 * 1000.0));
  $expires = _concat("expires=", call_method($d, "toGMTString"));
  set($document, "cookie", _concat($n, "=", $val, "; ", $expires));
});
$getCookie = new Func(function($n = null) use (&$document) {
  $name = _concat($n, "=");
  $ca = call_method(get($document, "cookie"), "split", ";");
  for ($i = 0.0; $i < get($ca, "length"); $i++) {
    $c = get($ca, $i);
    while (eq(call_method($c, "charAt", 0.0), " ")) {
      $c = call_method($c, "substring", 1.0);
    }
    if (eq(call_method($c, "indexOf", $name), 0.0)) {
      return call_method($c, "substring", get($name, "length"), get($c, "length"));
    }
  }
  return "";
});
set($document, "onclick", new Func(function($e = null) use (&$setCookie, &$document, &$console) {
  if (eq(get(get($e, "target"), "className"), "color-btn")) {
    $favColor = get(get(get($e, "target"), "style"), "backgroundColor");
    call($setCookie, "color", $favColor);
    set(get(get($document, "body"), "style"), "backgroundColor", $favColor);
    call_method($console, "log", $favColor);
  }
}));
set($window, "onload", new Func(function() use (&$document, &$getCookie) {
  $favColor = get(get(get($document, "body"), "style"), "backgroundColor");
  $color = call($getCookie, "color");
  if ($color === "") {
    set(get(get($document, "body"), "style"), "backgroundColor", $favColor);
  } else {
    set(get(get($document, "body"), "style"), "backgroundColor", $color);
  }

}));
?>

标签： javascriptphpjqueryhtmlcss

解决方案

这是一个工作简化版本：

<?php
$colors = ['#dbdaec', '#B4CAE5', '#C2E5C6', '#EAEAEA', '#ffffff'];
// Default color
$color = $colors[4];
// Try to read the cookie
if(isset($_COOKIE["color"])) {
  // If it exists, set the color to its value
  $color = $_COOKIE["color"];
}
?><!DOCTYPE html>
<html>
<head>
  <style>
  body { background-color: <?=$color?>; } /* Here, use the color */
  .color-btn {
    width: 100px; height: 25px;
    display: inline-block;
    cursor: pointer;
    margin: 0; padding: 0;
    border: 1px solid white;
  }
  </style>
</head>
<body>
  <ul><?php foreach ($colors as $c) { ?>
      <li><button class="color-btn" style="background-color: <?=$c?>"></button></li>
    <?php } ?>
  </ul>
  <script>
  // I did not edit your JS other than remove unused blocks
  var setCookie = function (n, val) {
    var exdays = 30;
    var d = new Date();
    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
    var expires = "expires=" + d.toGMTString();
    document.cookie = n + "=" + val + "; " + expires;
  };
  document.onclick = function (e) {
    if (e.target.className == 'color-btn') {
      var favColor = e.target.style.backgroundColor;
      setCookie('color', favColor);
      document.body.style.backgroundColor = favColor;
      console.log(favColor);
    }
  };
  </script>
</body>
</html>

它使用JS设置cookie客户端，使页面不会重新加载。下次您重新加载页面或转到另一个页面时，PHP 将读取该 cookie 并在服务器端设置该背景颜色，以便没有颜色闪烁。

推荐阅读