drxd54816 2019-02-18 18:26
浏览 110
已采纳

将js转换为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>

Note: the above script is in sandbox, and won't work here.

The converted php (that is not working):

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

}));
?>
</div>
  • 写回答

2条回答 默认 最新

  • doutongya8378 2019-02-18 22:03
    关注

    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>
    

    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.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 关于用abap来解决动态规划的问题,但是要求输出索引值,这个是难点
  • ¥15 在ISIS中什么是IP从地址
  • ¥15 压测时,并发量过高时,响应时间出现尖刺
  • ¥15 关于vmprotect3.8.4虚拟文件一项
  • ¥15 在不用IT调试的情况下怎样能连外网
  • ¥20 C#调用虚拟键盘TabTip.exe
  • ¥15 Qt4代码实现下面的界面
  • ¥15 CCS离散化传递函数与仿真不一致
  • ¥15 prism提示我reinstall prism 如何解决
  • ¥15 asp.core 权限控制怎么做,需要控制到每个方法