<span id="s">我要执行随机字体颜色</span>
<div id="d">我要改变背景颜色</div>
<script>
Math方法,是JavaScript提供的方法,可以直接使用
1, 随机数 Math.random()
随机生成一个 0 - 1 的小数,可以是0,不会是 1
生成 a - b 范围的数值 a 小 b 大
公式 parseInt(Math.random()* (b+1-a) + a );
2.应用:设定随机颜色等
因为 Math.random() 只能是随机数值
因此使用 rgb()语法来设定 颜色数值
数值范围是 0-255 ;
rgb(数值1,数值2,数值3)
需要3个随机数值,范围是 0-255
也可以定义随机的大小单位
随机数值 拼接 px 单位
定义3个随机数,数值范围是0-255
var c1 = parseInt(Math.random()*256);
var c2 = parseInt(Math.random()*256);
var c3 = parseInt(Math.random()*256);
JavaScript中DOM操作,操作标签样式的固定语法
标签.style.属性 = 属性值
s.style.color = `rgb(${c1},${c2},${c3})`;
生成随机颜色的程序,写成函数的形式
这个函数的返回值是 rgb(随机颜色) 字符串
颜色的数值范围是固定的 0 - 255
function setColor(){
var c1 = parseInt(Math.random()*256);
var c2 = parseInt(Math.random()*256);
var c3 = parseInt(Math.random()*256);
// 将随机颜色,定义为rgb字符串,作为返回值
// 作为设定颜色的属性值
return `rgb(${c1},${c2},${c3})`;
}
// 定义随机大小函数
// 定义两个参数,a是较小值,b是较大值
// 通过参数,设定随机数值范围
function setNum(a,b){
// 做容错处理,确保 a < b
if(a>b){
var m = 0;
m = a;
a = b;
b = m;
}
// 随机数值要拼接px单位
return parseInt(Math.random()*(b+1-a) + a) + 'px';
}
3.定时器不用掌握,让你们瞅瞅的内容
每间隔一个设定事件,自动执行随机改变颜色
定时器,后面会讲,现在先让你瞅瞅
语法:
setInterval( function(){要执行的程序} , 时间 )
要执行的程序,必须是函数形式
设定的时间 单位是毫秒 1秒 = 1000毫秒
如果是不同的事件间隔,必须设定两个定时器,设定的间隔时间不同
setInterval( function(){
// 改变id是s,也就是span标签的字体颜色
s.style.color = setColor() ;
// 字体大小,JavaScript中,不支持 减号 font-size
// font-size 必须写成 fontSize 驼峰命名法
// 所有带有 -减号的属性值,都要写成小驼峰命名法
s.style.fontSize = setNum(50,100);
// 改变id是d,也就是div标签的背景颜色
d.style.background = setColor() ;
// 定义div标签的宽度高度,并且设定范围
d.style.width = setNum(200,300);
d.style.height = setNum(200,300);
} , 1000)
</script>