发表于： 2017-04-14 19:58:02
1 1253
【js-01】用js随机取色
小课堂【郑州第81期】
分享人：董瑞
1.背景介绍
在页面上很多时候需要我们给出随机的数字或颜色来表明身份或各种其他用途，是一种比较常见的js技巧
2.知识剖析
第一，怎么实现随机
第二，怎么让它表现为颜色
3.常见问题
如何正确使用随机函数
如何将随机的函数与颜色关联起来
随机颜色后的九宫格不变回原色
4.解决方案
随机函数
完全数字随机法
function change_color(){ return"#"+(00000+(Math.floor(Math.random()*16777216)).toString(16).slice(-6)); }RGB法
function randomRgbColor() { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); return `rgb(${r},${g},${b})`; }将数字与颜色关联
square[x].style.background = change_color(); square[y].style.background = change_color(); square[z].style.background = change_color();变回原色
用循环遍历九宫格，在变色结束后重新赋予原色
for (a=0;a<9;a++){ square[a].style.backgroundColor ="#ff1493"; }5.编码实战
6.扩展思考
如何转化颜色格式？
RGB转换为16进制
function rgb2Hex(rgb) { if (/^rgb\((\d{1,3}\,){2}\d{1,3}\)$/i.test(rgb)) { //test RGB var hex = '#'; //定义十六进制颜色变量 rgb.replace(/\d{1,3}/g, function(kw) { //提取rgb数字 kw = parseInt(kw).toString(16); //转为十六进制 kw = kw.length < 2 ? 0 + kw : kw; //判断位数，保证两位 hex += kw; //拼接 }); return hex; //返回十六进制 } else { console.log(`Input ${rgb} is wrong!`); return '#000'; //输入格式错误,返回#000 } }16进制转化为RGB
function hex2Rgb(hex) { //十六进制转为RGB var rgb = []; // 定义rgb数组 if (/^\#[0-9A-F]{3}$/i.test(hex)) { //判断传入是否为#三位十六进制数 let sixHex = '#'; hex.replace(/[0-9A-F]/ig, function(kw) { sixHex += kw + kw; //把三位16进制数转化为六位 }); hex = sixHex; //保存回hex } if (/^#[0-9A-F]{6}$/i.test(hex)) { //判断传入是否为#六位十六进制数 hex.replace(/[0-9A-F]{2}/ig, function(kw) { rgb.push(eval('0x' + kw)); //十六进制转化为十进制并存如数组 }); return `rgb(${rgb.join(',')})`; //输出RGB格式颜色 } else { console.log(`Input ${hex} is wrong!`); return 'rgb(0,0,0)'; } }7.参考文献
参考一：《JS编程艺术》
参考二： 豆丁网
参考三：脚本之家
8.更多讨论
关于随机取函数时取出的颜色有时候会偏暖色系有时候会偏冷色系，是什么原因
PPT链接：
https://ptteng.github.io/PPT/PPT/js-01-how%20to%20get%20a%20random%20color.html#/
视频链接：
https://v.qq.com/x/page/c0393l3sy91.html
//小课堂到此结束
//小课堂到此结束
//小课堂到此结束
终于完成js任务一了，稍微总结一下吧：
作为js的入门任务，一个简单的九宫格随机变色需要用到
变量赋值：var click=true
获取html内标签属性：getElement(s)ById(name)
添加监听事件：addEventListener("click",function())
使用if/else语句，实现同一按钮再次点击的不同效果
使用随机函数获取数字，转化为字符串后赋值给颜色
使用for循环，遍历九宫格，恢复原色
添加和清除定时器setInterval/clearInterval
返回列表
评论