将js转换为php以获取背景颜色cookie [英] Convert js to php for background color cookie

问题描述

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

I am using the following js script to add a cookie for background color changed by the user, however it takes like half of 1 second to load the color, and I was thinking that using php for the cookie would be better to write the chosen color from the point of loading the page, so it loads with the right color from the start.

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);
  }

}));
?>

推荐答案

这是一个有效的简化版本：

Here is a working simplified version:

<?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并在服务器端设置背景颜色，以便没有颜色闪烁。

It uses JS to set the cookie client-side, so that the page does not reload. And the next time you reload the page or go to another, PHP will read that cookie and set that background color server-side so that there is no color flash.

这篇关于将js转换为php以获取背景颜色cookie的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！