Question

我开始自学Web开发。

我正在尝试为使用该网站的人在创建统计栏时添加一个选项来创建自定义颜色。

我发现一个网站在徽章上也做类似的事情-http://streambadge.com

我已经看过代码，但是对javascript还是陌生的，我不明白它在做什么。我无法存储用户的颜色选择，因为我的网站没有用户登录名。所以类似的东西会很好。

有人可以解释一下该网站如何进行自定义颜色选项吗？或者，如果它在做什么时有一个特定的名称，以便我可以对其进行研究？

谢谢克里斯

Answer 1

据我了解，您想在URL中存储颜色首选项。除了服务器端脚本编写（这些网站通常使用的脚本编写）之外，还可以使用URL参数和Javascript的URL对象来实现：

//url : https://mywebpage.com/index.html?color=blue;
let url = new URL(location.href);
let color = url.searchParams.get("color");
//returns "blue"

但是，该代码可能不适用于较旧的浏览器。如果您希望您的代码适用于IE8等，则可能需要手动解析url：

//url : https://mywebpage.com/index.html?color=blue;
let url = location.href;
let param = "color";
let color = url.split("").splice(url.indexOf(param + "=") + 1 + param.length, url.length-url.indexOf(param + "=") + 1 + param.length).join("");
//returns "blue"

然后您可以使用该信息通过JS修改CSS代码。例如：

document.body.backgroundColor = color;
document.getElementsByTagName("H1")[0].color = color;
document.getElementById("content").color = color;

关于服务器端代码的工作方式，由于无法访问，因此无法确定，但这可能是相似的。

该网站如何自定义颜色？

1 个答案: