给网站添加背景控制——移动端

发表于 | 分类于

有朋友说我网站背景不好看，我一怒之下给你个自定义！
正所谓”萝卜青菜各有所爱“，我喜欢的别人不一定喜欢。
既然不喜欢，那就自己弄！！！

过程

1.准备

先来两张图提提神(^-^)


不对，应该有点音乐伴随才好！


好了，开始着手准备！
工具：
  • 百度
  • 菜鸟教程
  • notepad ++
  • 一颗有耐心的头脑
目标：
  • 可推荐选择图片
  • 可以使用用户自己的图片链接
  • 开关背景
  • 用户自己改变网站背景颜色
  • 用户自己改变网站字体颜色
  • 将设置存储于cookie已便循环利用
2.思路
由于只做移动端，PC以后再弄。
先找几张图片传到图床
如：
1
2
3
4
5
6
7
再边弄边利用百度学习
我觉得，有需要才会想学，想学才能学好。
好了，思路嘛！
按照使用流程来：
由于hexo的Markdown不支持流程图，
需要插件，就不弄了，直接文字流程。
3.开始
首先，载入网页，判断UA，读取cookie。
由于不晓得cookie怎么弄，只知道是浏览器储存信息之类的。
百度一波。什么？懒得百度？点我
好了，发现菜鸟教程，直接进入，懒得找别的。
我姓菜，我不菜
阅读完毕，回归思路。
首先，在菜鸟工具尝试读取一个不存在的cookie。
emmm，好的我没认真看
获取 cookie 值的函数
然后，我们创建一个函数用户返回指定 cookie 的值：
1
2
3
4
5
6
7
8
9
10
11
function getCookie(cname)
{
  var name = cname + "=";
  var ca = document.cookie.split(';');
  for(var i=0; i<ca.length; i++) 
  {
    var c = ca[i].trim();
    if (c.indexOf(name)==0) return c.substring(name.length,c.length);
  }
  return "";
}

函数解析：
cookie 名的参数为 cname。
创建一个文本变量用于检索指定 cookie :cname + “=”。
使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 ca (ca = document.cookie.split(‘;’))。
循环 ca 数组 (i=0;i<ca.length;i++)，然后读取数组中的每个值，并去除前后空格 (c=ca[i].trim())。
如果找到 cookie(c.indexOf(name) == 0)，返回 cookie 的值 (c.substring(name.length,c.length)。
如果没有找到 cookie, 返回 “”。
有兴趣的可以看看，我没兴趣，本来也没想学这么多，只是想站在巨人的肩膀上看看罢了。
如此一来，只需要知道这个函数cookie有值，返回其值，无值返回””就行
直接copy一波测试一下。
1
alert(getCookie("666"));
虽说有种多余的感觉……
继续，把它copy到判断UA后的位置，
加个判断
1
2
3
if(getCookie("backgroud_image_false_or_true") != ""){

}
cookie无值即默认，有值执行if里的东西。
现在又要头脑风暴了，backgroud_image里应该存什么好呢？

图片链接
背景颜色
字体颜色
回归思路。
继续判断，判断这三个是否空，
首先判断背景图片，若不为空只需读取背景图片与字体颜色
若为空，则读取背景颜色与字体颜色
话不多说
1
2
3
4
5
6
7
8
9
10
11
12
if(getCookie("backgroud_image") != ""){
//设置背景图片
$("#background_image").attr("src",getCookie("backgroud_image"));
}
if(getCookie("font-color") != ""){
//设置字体颜色
$("#main").css({"color":getCookie("font-color")});
}
if(getCookie("background-color") != ""){
//设置背景颜色
$("body").css({"background-color":getCookie("background-color")});
}
从理论上来说就是这样了。
然后到用户设置。
我技术不好(懒)就不考虑用户界面问题了，
黑猫白猫，能抓到老鼠的都是好猫！
先在底部加上一个触发装置，在通过用户输入判断，最后设置cookie顺便改变网页style。
加按钮，定义触发函数
先去查查prompt函数
敲代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
$("p.site-info").append("<br><a href='javascript:void(0)' onclick='backgroud_image_set()'>背景图片设置</a>");//用a标签作为按钮没那么丑
function backgroud_image_set(){

//先将backgroud_image_false_or_true改为true
document.cookie="backgroud_image_false_or_true=true; expires=Thu, 18 Dec 2199 12:00:00 GMT; path=/";

//判断选择图片或颜色
var image_or_color = prompt("1为图片，2为颜色");
if(image_or_color == "1"){
var url = prompt("请输入链接或数字1-7若不知1-7分别是啥请输入666：");
if (url == "1"){
var image_url = "https://ws3.sinaimg.cn/large/005BYqpgly1g0wv07n2phj30gq0rsmzf.jpg";
setCookie("backgroud_image",image_url,360);
$("#background_image").attr("src",image_url);
}else if(url == "2"){
var image_url = "https://gss0.baidu.com/-4o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/a71ea8d3fd1f41340b8e2654271f95cad1c85e5a.jpg";
setCookie("backgroud_image",image_url,360);
$("#background_image").attr("src",image_url);
}else if(url == "3"){
var image_url = "https://ws3.sinaimg.cn/large/005BYqpggy1g0xya4yz8aj30ir0xcqb3.jpg";
setCookie("backgroud_image",image_url,360);
$("#background_image").attr("src",image_url);
}else if(url == "4"){
var image_url = "https://ws3.sinaimg.cn/large/005BYqpggy1g0xyehbd78j30u016h0y1.jpg";
setCookie("backgroud_image",image_url,360);
$("#background_image").attr("src",image_url);
}else if(url == "5"){
var image_url = "https://img.xjh.me/desktop/img/62457462_p0.jpg";
setCookie("backgroud_image",image_url,360);
$("#background_image").attr("src",image_url);
}else if(url == "6"){
var image_url = "https://img.xjh.me/desktop/img/62493390_p0.jpg";
setCookie("backgroud_image",image_url,360);
$("#background_image").attr("src",image_url);
}else if(url == "7"){
var image_url = "https://img.xjh.me/desktop/img/57328797_p0.jpg";
setCookie("backgroud_image",image_url,360);
$("#background_image").attr("src",image_url);
}else if(url == "666"){
location.href = "https://yked.gitee.io/给网站添加背景控制制——移动端.html#2-思路";
}else{
var image_url = url;
setCookie("backgroud_image",image_url,360);
$("#background_image").attr("src",image_url);
}
}else if(image_or_color == "2"){
var color_choose = prompt("1.字体颜色，2.背景颜色：");
var color = prompt("请输入颜色代码：");
if (color_choose == "1"){
setCookie("font-color",color,360);
$("body").css("color",color);
}else if(color_choose == "2"){
var image_url = url;
setCookie("background-color",color,360);
$("body").attr("background",color);
}
}
}
好！！！自我感觉良好！
最后附上一个拾色器
点我
至此，还差一个图片开关的cookie，即在getCookie前加个判断
继续代码
1
2
3
if(getCookie("image_open_or_close") == "ture"){

}

在背景开关按钮函数处加个cookie设置
1
2
3
4
5
6
7
if(getCookie("image_open_or_close") == "true"){
    setCookie("image_open_or_close","false",360);
}else if (getCookie("image_open_or_close") == "false"){
    setCookie("image_open_or_close","true",360);
}else{
    setCookie("image_open_or_close","false",360);
}
在判断UA后加上这句
1
2
3
if(getCookie("image_open_or_close") == "false"){
    $("#background_image").hide();
}

最后，为了防止设置错乱，加一个清空cookie按钮。
1
2
3
4
5
6
7
8
$("p.site-info").append("<br><a href='javascript:void(0)' onclick='clean_cookie()'>清空背景存储信息</a>");
function clean_cookie(){
    var cookie_names = new Array("backgroud_image_false_or_true","backgroud_image","font-color","background-color","image_open_or_close");//把刚才声明的cookie_name全放到这里，再用for循环清空。
    for(var i=0;i<cookie_names.length;i++){
        document.cookie = cookie_names[i] + "=; expires=Thu, 01 Jan 1970 00:00:00 GMT";
    }
    
}
4.结束
实在是感到时间紧张，中考即将来临，风雨在即。
终于结束，甚是感慨。果然，有志者事竟成！
好了，不瞎比比了。
突然
5.有感而发
  • 看不尽风风雨雨，念不完生生世世。
  • 我的梦想踏上了人生的轨道，一眼望去，为何不见你？
  • 小雨怡情，大雨伤心，暴雨灰飞烟灭。
  • 有你的地方，便有阳光，但有阳光的地方，不一定有你。
  • 没你的地方，尽是风雨，但没风雨的地方，不一定没你。
  • 道是无晴却有情，若有阳光，我所想罢，若有风雨，我所念罢。
    ——聆听·彼岸
6.相见欢
默一遍，相见欢——李煜
无言独上西楼，月如钩，寂寞梧桐深院锁清秋。
剪不断，理还乱，是离愁，别是一般滋味在心头。

满分是10分的话，这篇文章你给几分，您的支持将鼓励我继续创作！