setInterval 动态生成多个不同颜色
【setInterval 动态生成多个不同颜色】练手用小功能：
vue 中DOM选择DOM部分 生成颜色的数量由 v-for 的循环数控制
动态添加 Object 数据绑定
setInterval 循环控制
Math.floor取整 padEnd补零
{{testColor[index-1]}}{{index}} {{Object.keys(testColor).length}}随机颜色
根据标签初始化保存颜色的对象 用set添加能有数据绑定关系；
【注】开始使用数组记录颜色，由于JS 监听不到数组值的变化才改用的对象；
$refs 的DOM操作需要创建完 vue 实例后再执行，否则拿不到 children 的数量
data() {
return {
testColorInterval: '',
testColor: { }
}mounted() {
for (let k=0;
k循环生成颜色 和 停止/启动循环 testClick 是用来停止/启动循环
tColor 是循环生成颜色
methods: {
testClick() {
if (this.testColorInterval != '') {
clearInterval(this.testColorInterval);
this.testColorInterval = '';
} else {
this.tColor();
}
},
tColor() {
let _this = this;
this.testColorInterval = setInterval(() => {
for (let key in _this.testColor) {
_this.testColor[key] = `color: #${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;
}
}, 300);
}
}推荐阅读
- 记录iOS生成分享图片的一些问题，根据UIView生成固定尺寸的分享图片
- ssh生成公钥秘钥
- 动态组件与v-once指令
- Java内存泄漏分析系列之二（jstack生成的Thread|Java内存泄漏分析系列之二：jstack生成的Thread Dump日志结构解析）
- 15、IDEA学习系列之其他设置（生成javadoc、缓存和索引的清理等）
- javaweb|基于Servlet+jsp+mysql开发javaWeb学生成绩管理系统
- iview|iview upload 动态改变上传参数
- react-navigation|react-navigation 动态修改 tabBar 样式
- Java代码辅助效率工具Lombok(注解|Java代码辅助效率工具Lombok(注解,自动生成代码)
- K14|K14 9/15销售提问法D2