前言
- 小程序课程表的一些需求
- 实现它所用到的一些知识
- 实现方案的决择
- 数组的截取/对象的对比/时间的封装/随机函数的运用
记录
动态生成颜色
- 随机颜色生成有两种方法，一种是写一个数组把颜色放进去随机输出，另外一种就是用js动态生成
- 在数量不能控制时选择第二个
- 但是生成的颜色不好控制，有些不好看，最后我还是选择了方法一
js实现随机生成颜色
- 这个是本来想做一个课程表课程的变色
- 先看看收集了几个封装好的js函数
- 我比较喜欢方法3
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21//颜色对象,方法1 rgba
function Color(){
this.r = Math.floor(Math.random()*255);
this.g = Math.floor(Math.random()*255);
this.b = Math.floor(Math.random()*255);
this.color = 'rgba('+ this.r +','+ this.g +','+ this.b +',0.8)';
}
// 方法2 十六进制
// arguments这个在es5开始不能用了
var getRandomColor = function(){
return '#' + (function(color){
return (color += '0123456789abcdef'[Math.floor(Math.random()*16)])
&& (color.length == 6) ? color : arguments.callee(color);
})('');
}
// 方法3 还是十六进制
var getRandomColor = function(){
return '#'+('00000'+ (Math.random()*0x1000000<<0).toString(16)).substr(-6);
}
- 当我配置到小程序里面我发现我自己错了，并不是说方法不好是生成出来的颜色并不是很好看
数组法动态生成颜色/数组截取/随机数
- 平时都会用的比较多的Math数学方法，然而我还是不记得着么写随机数最后也是看js的案例
- 定义数组，随机获取，随机数，数组的截取，对象的比对，三目的运用
1
2
3
4
5
6
7
8
9
10
11
12
13
14// 记录颜色匹配对象
let colorObj = {};
// 颜色
let orArrays = ["#FF3399", "#CC33FF", "#33CCFF", "#ff8936", "#00e500", "#1bd1a5", "#ff4e20", "#789262", "#70f3ff", "#c9dd22"];
// 判断添加颜色,二维数组，使用两次foreach
dCourse.forEach((e) => {
e.forEach((data) => {
if (data.sites != "") {
// 通过对象的判断，没有出现过的给一个随机颜色，相同的课程使用相同的颜色
// 这里使用了随机数也是用了数组的截取splice
colorObj[data.name] ? data.Color = colorObj[data.name] : data.Color = colorObj[data.name] = orArrays.splice(Math.round(Math.random() * orArrays.length - 1), 1);
}
})
})
使用封装好的时间函数写业务
- 动态随机生成颜色每一次都替换，影响体验
- 所以把它固定起来给个限定时间
- 想要比对首先要把时间获取出来才好比对
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
/*
业务实现
*/
get () {
// 今天
let date = this.GetDateStr(0)
// 缓存期限
let time = wx.getStorageSync("d_time")
// 判断第一次和过期清空颜色对象和过期时间
if (time == "" || time < date) {
let d_time = this.GetDateStr(6)
wx.setStorageSync("colorObj", {})
wx.setStorageSync("d_time", d_time)
}
// 记录颜色匹配对象，获取缓存中的数据
let colorObj = wx.getStorageSync("colorObj");
// 判断添加颜色
dCourse.forEach((e) => {
e.forEach((data) => {
if (data.sites != "") {
colorObj[data.name] ? data.Color = colorObj[data.name] : data.Color = colorObj[data.name] = orArrays.splice(Math.round(Math.random() * orArrays.length - 1), 1);
}
})
})
// 最后无论改没改都更新一下数据，也可以实在只要过期更新
wx.setStorageSync("colorObj", colorObj);
},
/**
* 时间封装
* @param:
* AddDayCount {Number} 天数 -1为昨日 0为今日 1为明日 以此类推
* return y-m-d
*/
GetDateStr (AddDayCount) {
var dd = new Date();
dd.setDate(dd.getDate() + AddDayCount);//获取AddDayCount天后的日期
var y = dd.getFullYear();
var m = dd.getMonth() + 1;//获取当前月份的日期
var d = dd.getDate();
return y + "-" + m + "-" + d;
}
后记
- 这就是我今天的实战笔记，欢迎添加微信qq交流学习
- 欢迎进入我的博客：https://yhf7.github.io/
- 如果有什么侵权的话，请及时添加小编微信以及qq也可以来告诉小编（905477376微信qq通用），谢谢！