js基础day05

作者: codeTao | 来源:发表于2018-04-08 00:32 被阅读22次

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>&lt;</span>
    <span>&gt;</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';
        }
    }

js基础day05

js基础day05

一.简单轮播图

二.复杂轮播图

1.页面

2.右边

3.左边

4.bug

三.发送验证码

四.动态跳转

五.Dom 节点

1.Dom节点

2.节点树

3.节点操作

4.获取子节点

5.获取兄第节点

6.获取父节点

六.类名获取元素

getElementsByClassName()

获取所有子节点方法比较

兼容性处理

七.获取文档元素

八.九宫格算法

1.算法分析

2.实现

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我爱编程