发表于: 2017-04-18 20:52:44

2 701


2017-04-18 Day027

今天完成的事情

  1. 1. 完成任务task-js-01
  2. 2. 学习js基础知识

明天计划的事情

  1. 1. 继续刷js基础
  2. 2. 熟悉数组对象,了解正则表达式是什么

遇到的问题

  1. 1. 任务一随机取色
    Math.floor(Math.random()*0xffffff).toString(16);
    Math.random()产生0-1之间一个随机float数
    Math.floor() 向上下取整
    toString(16)转换为十六进制值的字符串
    好,得到了表示#000000-#ffffff之间颜色值的字符串
  2. 2. 得到的颜色值不重复
    a. 先来判断是否和默认颜色值是否相同
do {
 gridColor[i] = randomColor();
 }
while(gridColor[i] === "f3f909");

b. 然后再来判断得到的颜色是否与之前取得的相同

//
for (var n = i - 1; n >= 0; n--) {
 //
 if (gridBox[i] === gridBox[n]) {
   gridBox[i] = getGridId();
   n = i - 1;
   }
   //
   if (gridColor[i] === gridColor[n]) {
   gridColor[i] = randomColor();
   n = i - 1;
   }
}
//
  1. 设置延时函数,多次点击<button>会启动多个函数,导致调用claearInterval()无效
    解决:设置一个表变量用来表示setInterval()的状态就好了啊,点击<button>之后先判断这个变量即可。

收获

关于收获:
感觉这个任务做完基本没有用到什么JavaScript的知识呢。
总结一下两天学习到的知识点吧:

###吐槽###官网的文本编辑真实让人操碎了💗!

DOM操作

1# DOM

文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

2# 通过ID获取元素

document.getElementBtId("myid");
//idmyid
//null[object HTMLParagraphElement]

3# innerHTML属性

//innerHTML HTML
//object.innerHTML
var mychar = document.getElementById("con");
mychar.innerHTML = "got u!"

4# 改变HTML样式

//object.style.property = new style;
var mychar= document.getElementById("con");
   mychar.style.color = "red";
   mychar.style.backgroundColor = "#CCC";
   mychar.style.width = "300px";
   
//property:backgroundColor width height color font fontFamliy fontSize

5# 显示和隐藏

object.style.display = value;
//value: none/block

6# 控制类名

object.className = classname;
//eg
 var p2 = document.getElementById("p2");
   p2.className = "two";
setInterval setTimeout

setInterval()

setInterval()函数 指定时间重复执行对应的函数或者代码
该函数属于全局函数window

语法:

setInterval ( code, milliseconds[, args...] )
code:需要执行的函数或者代码
milliseconds:执行函数或者代码的间隔时间,ms
args:可选,给被调用函数传递参数

function sayHi(msg){
   alert(msg);
}
// 5"CodePlayer"
setInterval('sayHi("CodePlayer");', 5000);

返回值:

setTimeout()函数将返回一个标识符 ID,这个 ID 是唯一的(一般是整数,从1开始,每调用一次 setTimeout() 就加1)。

如果需要 setTimeout() 执行的函数或代码尚未执行,我们可以通过 clearTimeout() 函数来取消该执行操作,clearTimeout() 函数需要接收一个参数,这个参数就是setTimeout()函数返回的标识符ID。

setTimeout()

setTimeout()函数 函数用于设定在指定的时间之后执行对应的函数或代码。
该函数属于全局函数window

语法:

setTimeout ( code, milliseconds[, args...] )
code:需要执行的函数或者代码
milliseconds:执行函数或者代码的间隔时间,ms
args:可选,给被调用函数传递参数

function sayHi(msg){
   alert(msg);
}
// 5"CodePlayer"
setTimeout('sayHi("CodePlayer");', 5000);

返回值:

setTimeout()函数将返回一个标识符 ID,这个 ID 是唯一的(一般是整数,从1开始,每调用一次 setTimeout() 就加1)。

如果需要setTimeout()执行的函数或代码尚未执行,我们可以通过 clearTimeout() 函数来取消该执行操作,clearTimeout() 函数需要接收一个参数,这个参数就是setTimeout() 函数返回的标识符ID。

循环

while

while(case) {
 somecode;
}
// if case == true, somecode run always

do while

do{
 somecode;
}while(case);
// you known what that mean

for

for(statement1; case; statement2){
 somecode;
 }

for/in

循环遍历对象的属性

var person={fname:"John",lname:"Doe",age:25};
for (x in person) {
 txt=txt + person[x];
 }
 
document.getElementById("demo").innerHTML=txt;

输出结果:
BillGates56

switch

switch(n) {
case 1:
   somecode;
   break;
 case 2:
   somecode;
   break;
   .
   .
   .
 default:
   somecode;
}

break / continue

label
eg:

var num = 0;
outPoint:
for (var i = 0 ; i < 10 ; i++){
  for (var j = 0 ; j < 10 ; j++){
   if( i == 5 && j == 5 ){
    break outPoint;
   }
  num++;
  }
}
alert(num); // i 5j 5outPoint 55
var num = 0;
outPoint:
for(var i = 0; i < 10; i++)
{
for(var j = 0; j < 10; j++)
{
 if(i == 5 && j == 5)
 {
   continue outPoint;
    }
    num++;
}
}
alert(num); //95

从alert(num)的值可以看出,continue outPoint;语句的作用是跳出当前循环,并跳转到outPoint(标签)下的for循环继续执行。

<hr />

对今天踩了一个大坑:

intervalId = setInterval(changeColor, 300);

对的,就是这句,原本不是这样的,原本是

intervalId = setInterval(changeColor(), 300);

这就导致我我的setInterval()只执行一次就挂了

所以,有了下面的总结

函数调用 有括号和无括号区别 ()

函数名其实就是指向函数体的指针 
不加括号, 可以认为是查看该函数的完整信息, 
不加括号传参,相当于传入函数整体 
加括号表示立即调用(执行)这个函数里面的代码(花括号部分的代码)

语法描述
函数名 fun 为参数fun函数体对象是参数
带括号的函数 fun() 作为参数立即执行函数后的返回值作为参数

举例

<button id="btn"></button>
function demo1(){
 var m=5;
 return m;
}
function demo2(){
 var m=55;
 alert(m);
}
var a=demo1;//a
var b=demo1();//b5
alert(demo1);
alert(demo1());
var e=document.getElementById("btn");
e.addEventListener("click",demo2);
e.addEventListener("click",demo2());
  1. 1. alert弹出框的的内容
function demo1(){
 var m=5;
 return m;
}
  1. 2. alert弹出框的的内容
5
  1. 3. 单击按钮(其实啥也没有)
  2. 4. 单击按钮后弹出框内容
function demo2(){
 var m=55;
 alert(m);
}




返回列表 返回列表
评论

    分享到