[武汉|结业弟子]JS-刘平|2019年08月29日的日报-技能树.IT修真院

发表于： 2019-08-29 21:03:00

1 813

今天完成的事情

完成了js任务一

刚开始做js任务一和以前做css任务一时一样的一脸懵逼。有了之前的经验，学习路线就选择了看师兄的代码，然后在wiki上面找了一个代码较少且符合任务要求的师兄的代码，先是自己一行一行的代码去理解，遇到新的属性就去菜鸟教程学，学会了就继续下一行代码，花了一天多的时间终于弄懂了所有代码的意思和其作用，然后今天先是按照自己的理解尝试敲js代码，但是会有不记得下一行代码是什么的情况发生，然后就去看师兄代码，想起来了就关闭师兄代码，继续自己敲。最后终于做出来了想要的效果。但是自己一想，这样有点抄袭的感觉，然后自己又关掉所有的窗口，在vscode上靠自己的理解敲了一遍，结果效果又没出来，找了一个小时原因无果后对比自己之前照着敲的代码，才发现是rgb颜色选取那里连字符+用错了，一个小时就这样浪费了。

今天遇到的问题

问题1：如下图，点击开始按钮后，三个格子闪了一下就恢复原样了

解决：原因是将颜色变换的函数放在了颜色恢复的函数前面，导致每次闪完了颜色就恢复，通过将颜色变换函数放在下面即可解决

问题2：return语句看不懂，如下代码

function color_select() {
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 + ')';

}

解决： 这里return返回的是一个rgb颜色。通过连字符“+”将字符和字符串连接起来组成一个rgb颜色，这里是rgb( + r + , + g + b +)组成rgb(r,g,b)，其中rgb是一个变量，所以不需要使用单引号括起来。

今天的收获

SetInterval与setTimeout

使用SetInterval和设定延时函数setTimeout 很类似。setTimeout 运用在延迟一段时间，再进行某项操作。

setTimeout("function",time) 设置一个超时对象
setInterval("function",time) 设置一个超时对象

SetInterval为自动重复，setTimeout不会重复。

clearTimeout(对象) 清除已设置的setTimeout对象
clearInterval(对象) 清除已设置的setInterval对象

使用定时器实现JavaScript的延期执行或重复执行
window对象提供了两个方法来实现定时器的效果，分别是window.setTimeout()和window.setInterval。其中前者可以使一段代码在指定时间后运行；而后者则可以使一段代码每过指定时间就运行一次。它们的原型如下：
window.setTimeout(expression,milliseconds);
window.setInterval(expression,milliseconds);
其中，expression可以是用引号括起来的一段代码，也可以是一个函数名，到了指定的时间，系统便会自动调用该函数，当使用函数名作为调用句柄时，不能带有任何参数；而使用字符串时，则可以在其中写入要传递的参数。两个方法的第二个参数是milliseconds，表示延时或者重复执行的毫秒数。

改变html样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？

语法:

Object.style.property=new style;

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

基本属性表（property）:

js注释

在以前css代码中并没有做注释，但是在使用js后使用了大量的注释。

注释的作用是提高代码的可读性，帮助自己和别人阅读和理解你所编写的JavaScript代码，注释的内容不会在网页中显示。注释可分为单行注释与多行注释

单行注释，在注释内容前加符号 “//”。

document.write("单行注释使用'//'"); // 我是注释，该语句功能在网页中输出内容

</script>

多行注释以"/*"开始，以"*/"结束。

document.write("多行注释使用/*注释内容*/"); /* 多行注释养成书写注释的良好习惯 */

</script>

明天的计划

开始学习做js任务2-4需要用到的基础知识

JS-Task1 任务总结

任务耗时：本次任务从2019/08/27-2019/08/29 共耗时3天

技能脑图：

官方脑图

个人脑图：

任务总结：

1.数据类型：字符和字符串

2.变量：变量使用var声明，可进行赋值

3.函数function的定义以及基本使用

4.SetInterval( )与setTimeout( )却别是前者为重复延时操作，后者只延时操作一次，通过clearInterval( )和clearTimeout( )可以清除效果

5.for循环语句和if条件判断语句两个会在任务一中用到，需要学会

附上js任务一 js代码

//定义节点box
var box = document.getElementsByClassName("box");

//定义一个函数，作用是可以随机生成三个颜色并返回这个颜色的rgb
function color_select() {
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 + ')';

}
//定义一个函数，作用是随机生成三个小于九宫格数量(box.length即数字9)的数字
//通过if函数判断这三个数字是否重复，如果重复，则继续执行这个函数直到生成三个不一样的数字
//如果不重复，则将这三个数字分别赋给box来选取三个盒子，从而给其上色吧
function num_select() {
var num1 = Math.floor(Math.random() * box.length);
var num2 = Math.floor(Math.random() * box.length);
var num3 = Math.floor(Math.random() * box.length);
if (num1 != num2 && num2 != num3 && num1 != num3) {
box[num1].style.background = color_select();
box[num2].style.background = color_select();
box[num3].style.background = color_select();
} else {
num_select()
}
}

//定义一个函数，作用是通过for循环恢复所有九宫格的颜色
function color_reset() {
for (var i = 0; i < box.length; i++) {
box[i].style.background = "#ffa600";
}
}

//定义一个函数，作用是和html中的第一个button绑定
//点击第一个button后先进行颜色的重置，最后随机选取三个盒子上色，并循环此上色操作
//由于颜色变化是一瞬间完成，所以 color_reset();需要在 num_select();上面，若相反则颜色变化看不见，因为变化太快了
function color_start() {
x = setInterval(function () {
color_reset();
num_select();
}, 1000);
}


//定义一个函数，作用是和html中的第二个button绑定
//点击第二个button后清除setInterval方法，并且恢复九宫格默认颜色
function color_stop() {
clearInterval(x);
color_reset();
}

返回列表

【任务15】 [武汉|结业弟子]JS-刘平 | 2019年08月29日 的日报 中品

评论

分享到

【任务15】 [武汉|结业弟子]JS-刘平 | 2019年08月29日的日报中品