发表于: 2017-03-25 21:27:11
2 1265
今天完成的事情/收获:
JS任务一蜗牛一般的速度又有了点进展- =终于实现了点击自动执行事件感谢@家建 理清了我乱麻一样的思绪
直接贴代码加思路:(代码里理清了思路)
window.onload=function() //让页面提前加载
{
var con=document.getElementById('container');
var but1=document.getElementById('but');
var but2=document.getElementById('but2');
var Box=con.getElementsByClassName("box");
var timer; //先全局命名个变量好在结束点击事件的时候用
console.log(Box) //为了调试
but1.onclick=function startChang() //为but1添加点击事件
{
changColor(); //调用下面的循环函数
timer = setInterval(changColor,3000); //刚才的全局变量赋给这个计时器
}
function changColor() //命名函数以便调用
{
for(var i = 0,Len=Box.length;i<Len;i++) //做循环好让他们九个格子一起闪;这len就是把box.length在循环的时候直接成一个数字 不用每次循环都重新获取一次length 是一种优化操作
{
Box[i].style.backgroundColor = bg3(); //变量Box[循环i九个一起给闪] 他的变角色为函数 bg3
}
}
but2.onclick=function () //给but2添加点击事件
{
clearInterval(timer); //停止计时器变量(timer)
Box.style.backgroundColor="#f0846a";
}
function bg3()//自动取色做封装函数
{
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 + ")";//所有方法的拼接都可以用ES6新特性`其他字符串{$变量名}`替换
}
}
JavaScript中的setInterval用法
setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。setInterval动作的语法格式如下:
setInterval(function,interval[,arg1,arg2,......argn])
setInterval(object,methodName,interval[,arg1,arg2,.....argn])
第一种格式是标准动作面板中setInterval函数的默认语法,第二种格式是在专家模式动作中使用的方法。
其中的参数function是一个函数名或者一个对匿名函数的引用。object参数指定从Object对象派生的对象。methodName制定 object参数中要调用的方法。
interval制定对function或methodName调用两次之间的时间,单位是毫秒。后面的arg1等是可选的参数,用于制定传递给function或是methodName的参数。
setInterval它设置的时间间隔小于动画帧速(如每秒10帧,相当于100毫秒),则按照尽可能接近interval的时间间隔调用函数。
而且必须使用updateAfterEvent动作来确保以足够的频率刷新屏幕。如果interval大于动画帧速,则只用在每次播放头进入某一帧是才调用,以减小每次刷新屏幕的影响。
下面的例子每隔1秒调用一次匿名函数。
setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);//这里的function(){}是没有函数名的函数。成为匿名函数,后面的1000是时间间隔,单位是毫秒。
明天计划的事情:
计算完成任务一啊
遇到的问题:
逻辑上有些混乱今天新的大师兄给我像疏通下水道一样的给我疏通了下。
定时器开始左右就是加不对地方 - =问了师兄就加对了
评论