js基础day05
2018-04-08 本文已影响22人
codeTao
js基础day05
一.简单轮播图
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 600px;
height: 200px;
border: 1px solid #000;
margin: 100px auto;
overflow: hidden;
}
#oul{
width: 9999px;
list-style: none;
position: relative;
left: 0;
}
#oul li{
float: left;
}
</style>
<div id="box">
<ul id="oul">
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
<li><img src="images/04.jpg" alt=""></li>
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
</ul>
</div>
<script>
//1.获取元素
var oul = document.getElementById('oul');
//2.偏移量
var offsetX = 0;
//3.开启定时器
var timer = setInterval(function () {
offsetX -= 10;
//判断4张图片是否走完
if(offsetX <= -4 * 300){
//重置偏移量
offsetX = 0;
}
//没有走4张，继续走
oul.style.left = offsetX + 'px';
}, 30);
</script>
二.复杂轮播图
1.页面
<style>
*{
margin: 0;
padding: 0;
}
#box{
width: 640px;
height: 270px;
border: 1px solid #000;
margin: 100px auto;
position: relative;
/*overflow: hidden;*/
}
#box ul{
width: 9999px;
list-style: none;
position: absolute;
}
#box ul li{
float: left;
}
#box span{
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
position: absolute;
top: 50%;
margin-top:-20px;
background-color: red;
}
#box span:nth-of-type(1){
left: 0;
}
#box span:nth-of-type(2){
right: 0;
}
</style>
<body>
<div id="box">
<ul>
<li><img src="images/01.jpg" alt=""></li>
<li><img src="images/02.jpg" alt=""></li>
<li><img src="images/03.jpg" alt=""></li>
<li><img src="images/04.jpg" alt=""></li>
<li><img src="images/05.jpg" alt=""></li>
<li><img src="images/01.jpg" alt=""></li>
</ul>
<span><</span>
<span>></span>
</div>
</body>
2.右边
//1.获取元素
//ul
var oul = document.getElementById('oul');
//span
var spanList = document.getElementById('box').getElementsByTagName('span');
//定时器
var timer = 0;
//偏移量
var offsetX = 0;
//图片索引
var index = 0;
//2.添加点击事件
//点击左边按钮，图片往右走
spanList[0].onclick = function () {
}
//点击右边按钮，图片往左走
spanList[1].onclick = function () {
//alert(111);
//清空上一次定时器
clearInterval(timer);
//每点击一次，索引加1，并记录
index++;
//每次点击，判断是否走完第6张
//第6次点击，要第一张往第二张走
//下次点击， 图片从第6张往第2张周， index = 1;
if(index > 5){
//还原index
index = 1; //第7次点击，index应该从1开始累加，往第2张走
//偏移还原为0， 下次点击，第2张走的起始位置
offsetX = 0;
}
//开启定时器，走一张图片
timer = setInterval(function () {
//往左走
offsetX -= 10;
//判断是否走了一张图片
if (offsetX <= -640 * index){
//重置偏移量
offsetX = -640 *index;
//清除定时器
clearInterval(timer);
}
//移动ul
oul.style.left = offsetX + 'px';
}, 10);
}
3.左边
//点击左边按钮，图片往右走
spanList[0].onclick = function () {
//清空上一次定时器
clearInterval(timer);
//每点击一次，索引减1，并记录
index--;
//判断是否走到第1张，如果是立刻切换为第6张 index = -1
if(index < 0 ){ //
//偏移还原为第6张，下次点击往第5张走，第6张起始位置
offsetX = -640 * 5;
//4 为第5张图片， index * -640 为第五张的终点位置
index = 4;
}
//开启定时器，走一张图片
timer = setInterval(function () {
//往右走,累加
offsetX += 10;
//判断是否走了一张图片
//
if (offsetX >= -640 *index){ // -640 * 5 >= -640 * 4
//重置偏移量
offsetX = -640 * index;
//清除定时器
clearInterval(timer);
}
//移动ul
oul.style.left = offsetX + 'px';
}, 10);
}
4.bug
- bug原因： 每点击一次， index累加， 连续点击，index很快就到5了，偏移量会立刻还原
- 解决 ： 添加一个全局变量，记录动画是否正在执行，即记录开关， 开关原则 有开就有关
- flag : false 表示动画没有执行， true 表示动画正在执行
var flag = false;
//判断动画是否正在执行
if(flag == false){
//没有执行动画，更改动画状态，记录动画状态
flag = true;
}else{ //正在执行动画， 不允许点击
return
}
三.发送验证码
- 开关属性
- disabled 不可用属性， 为true 禁止按钮点击， false 允许按钮点击
btn.disabled = true;
- 注意：setInterval() 是window的方法， 是由window调用的，所以this在定时器中代指window
- 注意：要想在定时器中拿到按钮，需在开启定时器前，备份this指针
四.动态跳转
- 循环定时器，显示5秒后， 动态跳转
var timer = 0;
var count = 5;
//开启循环定时器
//执行5次， 5秒结束定时
timer = setInterval(function () {
count--;
//判断是否走完5秒
if(count <= 0){
//动态跳转
window.location.href = 'http://www.baidu.com';
//清空定时器
clearInterval(timer);
}
//更新h2文本内容
oh2.innerText = count + '秒后跳转';
}, 1000);
2 .递归：自己调自己（了解）
- 递归使用条件：递归一定要由限制条件，当达到某个条件，使用return结束函数
var a = 0;
function test() {
a++;
console.log(a);
//限制条件
if(a > 5){
return;
}
//递归调用
test();
}
test();
//3.延时定时器
var count = 5;
var timer = 0;
function fn() {
count--;
//判断count 有没有走完5秒
if(count <= 0){
//结束定时器
clearTimeout(timer);
//动态跳转
window.location.href = 'https://www.baidu.com';
}else{
//递归调用
// timer = setTimeout(fn, 1000);
// arguments.length 获取函数实参个数
// arguments.callee 指向当前执行的函数。
timer = setTimeout(arguments.callee, 1000);
}
oh2.innerText = count + '秒后跳转';
}
//开启延时定时器
timer = setTimeout(fn, 1000);
五.Dom 节点
1.Dom节点
在 HTML DOM 中，所有事物都是节点。DOM 是被视为节点树的 HTML。
- 整个文档是一个文档节点
- 每个 HTML 元素是元素节点
- HTML 元素内的文本是文本节点
- 每个 HTML 属性是属性节点
- 注释是注释节点
2.节点树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树.
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
5.1.gif
3.节点操作
<div id="box">
<h2 id="oh2">我是标题</h2>
</div>
1.创建节点
- document.createElement('div')
- 参数：要创建标签的标签名， 字符串
- 返回值：返回创建元素节点
var newDiv = document.createElement('div');
console.log(newDiv);
2.添加节点
- obody.appendChild(newDiv) 向元素添加新的子节点，作为最后一个子节点。
- 参数：newDiv，必需 ，要添加的子节点
- 返回值：返回要添加的子节点。
- 注意: 子节点添加到当前节点的末尾
- 注意: 谁调用appendChild() , 子节点就添加谁的末尾
//获取body
var obody = document.getElementById('obody');
var ele = obody.appendChild(newDiv);
//设置属性
ele.style.width = '100px';
ele.style.height = '100px';
ele.style.backgroundColor = 'red';
console.log(newDiv);
3.删除节点
- removeChild(node) 删除指定元素中的子节点
- 参数：node 必需。要删除的子节点，如果节点不存在则返回 null
- 返回值：被删除的子节点
//获取元素
var box = document.getElementById('box');
var oh2 = document.getElementById('oh2');
//删除h2
//var ele2 = box.removeChild(oh2);
//注意：谁调用removeChild(), 就删除谁里面的子节点
var ele2 = obody.removeChild(oh2);
//注意：只能由父元素调用removeChild(), 不能自己删自己
//var ele2 = oh2.removeChild(oh2);
console.log(ele2);
4.替换子节点
- replaceChild(newChild, refChild);
- 参数：newChild： 必需。替换的新节点。这个新节点可以是文档中某个已存在的节点，或者您也可创建新的节点
- 参数：refChild： 必需。被替换的节点
- 返回值：被替换元素
//获取box
var box = document.getElementById('box');
//获取h2
var oh2 = document.getElementById('oh2');
//创建一个p标签
var op = document.createElement('p');
op.innerText = '段落pp';
//用p 替换h2
var ele2 = box.replaceChild(op, oh2);
//注意：replaceChild（） 只能由父节点调用，否则不起作用
//var ele2 = obody.replaceChild(op, oh2);
console.log(ele2);
5.insertBefore(newChild, refChild);
- 指定的已有子节点之前插入新的子节点。
- newChild：必需, 要插入的新节点
- refChild：可选， 插到那个节点的前边， null
- 注意：refChild 参数为null, 在当前节点末尾插入子节点。此时和appendChild() 方法等价
//获取box
var box = document.getElementById('box');
//获取h2
var oh2 = document.getElementById('oh2');
//创建button
var btn = document.createElement('button');
btn.innerText = '按钮';
//h2前插入button
var ele5 = box.insertBefore(btn, oh2);
6.克隆节点，复制节点
cloneNode(deep)
- 创建节点的拷贝，并返回该副本
- cloneNode() 方法克隆所有属性以及它们的值。
- deep:true 会克隆当前节点, 包括当前节点中的所有子节点都克隆
- false 只会会克隆当前节点, 不包括当前节点中的所有子节点
- 注意: 克隆谁, 由谁来调用方法 cloneNode(false)
// var copyBox = box.cloneNode(true);
var copyBox = box.cloneNode(false);
console.log(copyBox);
4.获取子节点
节点树中的节点彼此拥有层级关系。
- 父（parent）、子（child）和同胞（sibling）等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。
- 在节点树中，顶端节点被称为根（root）
- 每个节点都有父节点、除了根（它没有父节点）
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分，以及节点之间的关系：
5.4.gif
-
childNodes: 获取当前节点的所有子节点 ,包含文本节点和注释节点. 返回数组 -
可以通过nodeType 属性判断当前节点类型
- nodeType 1 元素节点
- nodeType 2 属性节点
- nodeType 3 文本节点
- nodeType 8 注释节点
-
children: 属性获取当前节点的所有的子元素
<div id="box">
盒子文本内容
<p id="op">我是段落</p>
<button id="btn">点我吧</button>
<!--注释-->
</div>
//1.获取父节点
var box = document.getElementById('box');
//2.获取子节点
var list = box.childNodes;
console.log(box.childNodes);
//3.创建空数组， 保存所有元素节点
var arr = [];
//4.遍历数组
for(var i = 0; i < list.length; i++ ){
//取出每一个节点
var ele = list[i];
//判断每一个节点nodeType值
if(ele.nodeType == 1){
//当前节点是元素节点，添加到数组中
arr.push(ele);
}
}
console.log(arr);
//--------------------------------
// children 属性获取当前节点的所有的子元素
console.log(box.children);
5.获取兄第节点
- nextElementSibling 获取当前节点下一个兄弟元素节点
- nextSibling 获取当前节点的下一个兄弟节点, 兄弟节点包括文本节点和注释节点
- previousElementSibling 获取当前节点上一个兄弟元素节点
- previousSibling 获取当前节点的上一个兄弟节点, 兄弟节点包括文本节点和注释节点
<div id="box">
盒子文本
<button id="btn1">我是按钮1</button>
<!--注释-->
<button >我是按钮2</button>
<button >我是按钮3</button>
</div>
<script>
//1.获取第一个按钮
var btn1 = document.getElementById('btn1');
//2.nextElementSibling 获取当前节点下一个兄弟元素节点
/*
var btn2 = btn1.nextElementSibling;
console.log(btn2);
//获取第三个按钮
var btn3 = btn1.nextElementSibling.nextElementSibling;
console.log(btn3);*/
//3.nextSibling 获取当前节点的下一个兄弟节点, 兄弟节点包括文本节点和注释节点
/* var ele2 = btn1.nextSibling;
console.log(ele2);
var ele3 = btn1.nextSibling.nextSibling;
console.log(ele3);*/
//4.previousElementSibling 获取当前节点上一个兄弟元素节点
var btn2 = document.getElementById('btn2');
/*
var ele2 = btn2.previousElementSibling;
console.log(ele2);*/
//5.previousSibling 获取当前节点的上一个兄弟节点, 兄弟节点包括文本节点和注释节点
var ele2 = btn2.previousSibling;
console.log(ele2);
var ele3 = btn2.previousSibling.previousSibling;
console.log(ele3);
</script>
6.获取父节点
-
parentNode获取父节点 -
firstChild获取第一个子节点，包含文本节点和注释节点 -
firstElementChild获取第一个子元素节点 -
lastChild获取最后一个子节点,包含文本节点和注释节点 -
lastElementChild获取最后一个子元素节点
<div id="father">
<!--注释-->
<button id="son">点我吧</button>
<h2>我是h2</h2>
</div>
<script>
//1.获取按钮
var btn = document.getElementById('son');
//2.parentNode 获取父节点
var ele = btn.parentNode;
//console.log(ele);
//3.设置父节点
ele.style.width = '200px';
ele.style.height = '200px';
ele.style.backgroundColor = 'blue';
//4.firstChild 获取第一个子节点，包含文本节点和注释节点
console.log(ele.firstChild);
//firstElementChild 获取第一个子元素节点
console.log(ele.firstElementChild);
//5.lastChild 获取最后一个子节点,包含文本节点和注释节点
console.log(ele.lastChild);
//lastElementChild 获取最后一个子元素节点
console.log(ele.lastElementChild);
</script>
六.类名获取元素
getElementsByClassName()
- 参数：类名， 字符串
- 返回值：返回包含带有指定类名的所有元素的节点列表
- 注意：getElementsByClassName() 该方法兼容性：IE9+ 和其他浏览器都支持。在IE 5,6,7,8 中无效
获取所有子节点方法比较
- box.getElementsByTagName('*') 使用通配符 * 获取所有的子节点，包括所有子节点的结构。即能获取儿子的儿子。
- box.children 获取的只是当前节点的所有子节点，不包括所有子节点的结构。即只能获取儿子，获取不到孙子辈。
兼容性处理
-
box.getElementsByClassName 只要有值就为真，说明浏览器支持
-
封装函数 getEleByClass（obj, eleclass）
-
函数功能：根据类名获取当前元素同类名子节点
-
参数：类名，字符串
/**
* 获取父元素 obj中所有类名为 className的元素
* @param obj 父元素
* @param eleclass 类名
* @returns 返回保存同类名的数组
*/
function getEleByClass(eleclass) {
//保存同类名元素数组
var arr = [];
if(obj.getElementsByClassName){
alert('浏览器支持此方法');
//为真，说明浏览器是支持的
return obj.getElementsByClassName(eleclass);
}else{
alert('浏览器不支持此方法， 可能为ie5,6,7,8');
//1.获取box中所有子元素, 通配符 * 获取所有子节点，包括所有子节点的结构
//简单说，能获取p
var btnArr = obj.getElementsByTagName('*');
//var btnArr = box.children; //获取的只是当前节点的所有子节点，不包括所有子节点的结构
//简单说，不能获取p
//2.遍历数组，取出每个子节点，判断class是不是btn
for(var i = 0; i < btnArr.length; i++ ){
//3.取出子节点
var ele = btnArr[i];
//4.判断当前子节点类名是不是btn
if(ele.className == eleclass){
//5.保存子元素
arr.push(ele);
}
}
return arr;
}
}
七.获取文档元素
1.document.body 获取文档中body元素
2.document.title 获取文档title元素
- 设置title
document.title = 'sk666';
3.document.head 获取文档head元素
4.document.documentElement 获取文档中 html元素
5.document.write（） 可向文档写入 HTML 表达式或 JavaScript 代码
- 参数可以是多个时，按照顺序添加到文档中
document.write('skv587666');
document.write('<h1>sk666</h1><p>我是段落</p>')
八.九宫格算法
1.算法分析
盒子宽高 100px
盒子间距 10px
总列数 3
行号 = parseInt(i / 3)
列号 = i % 3
盒子x = 列号 * (盒子宽度 + 间距)；
盒子y = 行号 * (盒子高度 + 间距)；
8.png
2.实现
//1.获取按钮
var btn1 = document.getElementById('btn1');
var btn2 = document.getElementById('btn2');
//2.获取box所有按钮
var box = document.getElementById('box');
//var btnList = box.getElementsByTagName('button');
var btnList = box.children;
console.log(btnList);
//3.添加点击事件
//每行3列
btn1.onclick = function () {
//总列数
var count = 3;
//行号
var row = 0;
//列号
var col = 0;
//九宫格排布
for(var i = 0; i < btnList.length; i++ ){
//1.计算行号，列号
row = parseInt(i / count);
col = i % count;
//2.计算按钮x和y
// x = 列号 * （宽度 + 间距）
var x = col * (100 + 10);
// y = 行号 * （高度 + 间距）
var y = row * (100 + 10);
//3.获取每个按钮
var btn = btnList[i];
//设置盒子内容
btn.innerText = row + '行，'+ col +'列';
//4.设置按钮x和y
btn.style.left = x + 'px';
btn.style.top = y + 'px';
//5.设置按钮定位
btn.style.position = 'absolute';
}
}
//每行4列
btn2.onclick = function () {
//总列数
var count = 4;
//行号
var row = 0;
//列号
var col = 0;
//九宫格排布
for(var i = 0; i < btnList.length; i++ ){
//1.计算行号，列号
row = parseInt(i / count);
col = i % count;
//2.计算按钮x和y
// x = 列号 * （宽度 + 间距）
var x = col * (100 + 10);
// y = 行号 * （高度 + 间距）
var y = row * (100 + 10);
//3.获取每个按钮
var btn = btnList[i];
//设置盒子内容
btn.innerText = row + '行，'+ col +'列';
//4.设置按钮x和y
btn.style.left = x + 'px';
btn.style.top = y + 'px';
//5.设置按钮定位
btn.style.position = 'absolute';
}
}
