今天完成的事情：
整理一下学了什么（JS任务一）：
1.声明变量
全局和局部，格式：var a=b
2.获取DOM节点
语法：
获取ID：document.getElementById()
获取类：document.getElementByName()
获取标签：document.getElementByTagName() 。
把变量跟获取节点结合起来，在获取的时候就可以直接声明，比如：
var square = document.getElementsByTagName("div");
3.If/else语句
语法：if（）{} else{}
小括号为需要达成的条件，为真则执行if后花括号的内容，为假则执行else花括号的内容
4.添加监听事件
语法：element.addEventListener(event,function,useCapture)
event:必须有，HTML DOM事件，不要on前缀
function：必须有，指定事件触发时要执行的函数
useCaptur：非必须有，指定事件是否在捕获或冒泡阶段执行，是个布尔值
实例：
document.getElementById("button-2").addEventListener("click",function())
优点：
对所有DOM元素都有效而不仅仅对HTML有效；
可以更精细的控制listener的触发阶段（捕捉或者冒泡）；
可以给一个事件注册多个listener
5.for循环
语法：for（）{}
for后的括号为限定的条件，花括号为要执行的操作，for循环会重复执行操作直到不再满足条件
实例：for (a=0;a<9;a++){
square[a].style.backgroundColor ="#ff1493";
}
6.添加定时器
语法：setInterval（cade,millisec["lang"]）
code：必须有，要调用的函数或者要执行的代码串
millisec：必须有，周期性执行或者调用code之间的时间间隔，以毫秒记
实例：z2 = setInterval("shining();",200);
7.获取随机数
Math.random：0到1随机获取
Math.floor：向下取整
Math.ceil：向上取整
实例：function change_color(){
return "#"+(00000+(Math.floor(Math.random()*16777216))).toString(16).slice(-6);
}
8.加法（拼接）操作
数字加数字得到数字：10+20=30
数字加字符串等于字符串：10+“20”=1020
字符串加字符串得到字符串：“10”+“20”=1020
另：加法操作比较占内存，向数组内添加元素可以用PUSH操作，此处不表
9.JS操作符
运算符：加减乘除：+-*/ 累加累减++ --求余%
赋值运算符：直接赋值= 加减乘除求余之后赋值+= -= *= /= %=
比较运算符：等于== 绝对相等===不等于！= 大于小于>< 大于等于>=小于等于<=
逻辑运算符：和&& 或|| 非！
实例：for(var y= 0,z=0;y==x||y==z||x==z;){
y=Math.floor(Math.random()*9);
z=Math.floor(Math.random()*9);
}
任务一基本逻辑：
通过getElementsByTagName获取九宫格的格子
通过获取随机数和加法操作得到16进制颜色
通过比较操作符获取三个不同的格子让它们变色
通过添加定时器规定变色的间隔时间
通过添加点击事件运行随机获取数字函数取得随机颜色和运行定时器
（JS任务二）
1.JS跳转页面
标签后跟onclick加想要跳转的页面链接
实例：
<button onclick="window.location.href='js-task2.2.html'">简化版</button>
2.获取input标签value
为input设一个ID，然后get这个ID，然后再get这个值就好了（你滚
实例：<input type="number" id="player" value="12" oninput="play()" min="4" max="18">
var players = document.getElementById("player");
player = players.value;
3.JS乱序数组
有很多种方法，大概看了下原理，写起来麻烦，而且以后可以直接用库里封装好的，犯不着写原生，我这里就用最简单的：随机数字然后比较操作符返回数值
实例per.sort(function () {
return Math.random() > .5 ? -1 : 1;
});
arrayObject.sort(sortby)返回的值直接在原数组上进行排序，不生成副本。
4.设定平民与杀手数量
通过除法操作与减法操作得出值
实例function oninput_play() {
player = players.value;
killer.firstChild.nodeValue = Math.ceil(player / 4);
fammer.firstChild.nodeValue = player - killer.firstChild.nodeValue;
}
5.将身份随机分配给玩家
明天要做的事：
任务逻辑与基础知识解析到任务五
遇到的问题：
不求甚解的时候知识点是一个样子，待你深究时确有发现的乐趣，但是更多的是知识点汹涌而来，铺天盖地的压迫感。
比如一个简单的JS页面跳转，我们用的时候就用onclick="window.location.href"加跳转的链接地址就好了，但其实还有很多种其它方法，途径多样，实现的原理也不一，深究下去也是起码一天的工作量。
所以对页面跳转的相关知识我其实就抱了够用就行的态度了
还有JS乱序数组，其实用Math.random然后比较操作算是一种投机的办法，因为效率很低，用原生的话其实要用shuffle方法（这其实是PHP里的一个函数），但其实随机函数已经是一种拿来即用的工具了，犯不着手写，于是就懒得拆开shuffle手写了
收获：
构建明晰的知识体系本就是一种享受啊，假如不拐进岔路走进小道摔进大坑又路遇施工现场大神撕逼无所适从的话
未完，听老大讲课，回来后有时间编辑
返回列表
评论