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

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

过程

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分的话,这篇文章你给几分,您的支持将鼓励我继续创作!