发表于: 2017-04-25 22:04:31
1 1106
今天完成的事情:
完成了任务1。说一下任务一所用到的知识点。
1.getElementsByClassName() 获取div块的dom,getElementById获取启动按钮的dom。
var box=document.getElementsByClassName("item");
var begin=document.getElementById("begin");
var reset=document.getElementById("reset");
2.获取3个随机格子,取0到9的随机数向下取整,写一个for循环语句。for(表达式1;表达式2;表达式3) { 循 环体 },使用if else判断,a/b/c互不相等。并在else下给i设为-1,因为如果不赋值会多出1。
function change() {
orange();
for (var i = 0; i <= 2; i++) {
//取9个格子中的三个随机数
var a = Math.floor(Math.random() * 9);
var b = Math.floor(Math.random() * 9);
var c = Math.floor(Math.random() * 9);
//(a!=b)&&(a!=c)&&(c!=b)
if (a !== b && b !== c && c !== a) {
}
else {
i = -1;
}
}
3.随机获取颜色
function getRandomColor(){
return "#"+("00000"+((Math.random()*16777215+0.5)>>0).toString(16)).slice(-6);
}
// 16777215为16进制的颜色ffffff转成10进制的数字.
// >>数字取整.
// 转成16进制不足6位的以0来补充.
4.创建一维数组给3个格子赋值。
box[a].style.backgroundColor=getRandomColor();
box[b].style.backgroundColor=getRandomColor();
box[c].style.backgroundColor=getRandomColor();
5.添加计数器,并与函数绑定。
var k;
function startCount() {
k=setTimeout("startCount(change())",1000);
}
function stopCount() {
clearTimeout(k);
}
明天计划的事情:
开始任务2.
问题:
没有对知识点理解透,各自知道是什么,但不能把它们联系在一起。
最大的问题就是添加onclick之后,点击按钮毫无反应。格子的赋值并不是由点击按钮来触发,而是在页面加载的同时自动生成。
收获:
1.关于定义变量:变量定义在函数内部就是局部变量,外部就是全局变量。局部变量是没法被赋值给外部的。但是可以通过返回值的方式给外部赋值。
2.要写一个新的函数把将要执行的函数包起来,并写到onclick后面。
3.计数器要与函数绑定。
JS函数调用的方法:
1:方法调用模式。
var myobject={
value:0,
inc:function(){
alert(this.value)
}
}
myobject.inc()
2:函数调用模式
var add=function(a,b){
alert(this)//this被绑顶到window
return a+b;
}
var sum=add(3,4);
alert(sum)
3:apply调用模式
var arr=[10,20];
var sum=add.apply(myobject,arr);
alert(sum);
JS点击事件写法:
<button id="btn">click</button>
var btn=document.getElementById('btn');
第一种:
btn.onclick=function(){
alert('hello world');
}
消除事件:btn.onclick=null;//就不会弹出框了
第二种:
btn.addEventListener('click',function(){alert('hello world')},false);
btn.addEventListener('click',function(){alert(this.id)},false);
第三种:
function demo(){
alert('hello');
}
<button id="btn" onclick="demo()">click</button>
评论