博客列表 >元素转换成数组、定时器的练习、轮播图的思路-2019/7/12

元素转换成数组、定时器的练习、轮播图的思路-2019/7/12

降落伞的博客
降落伞的博客原创
2019年07月15日 18:35:37637浏览

1、将html元素转化成数组

  • 因为数组的方法很强大,所以很多时候要对元素进行操作时,转化成数组很方便。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
         <li>item1</li>
         <li>item2</li>
         <li>item3</li>
         <li>item4</li>
         <li>item5</li>
    </ul>
<script>
    /*html元素集合是一种类数组对象,拥有数据两大特征:从0递增的自然数索引;有length属性*/
    var li = document.getElementsByTagName('li'); /*获取到li元素*/
    /*第一种转换方式 array.slice()*/
    var arr1=Array.prototype.slice.call(li,0);  /*利用数组的构造函数和原型属性,利用slice.call这个方法,
    第一个参数是元素对象,第二个参数是从第几个开始获取,填0表示从头到尾所有*/
    console.log(arr1);

    /*第二种转换方式 from(),仅适用于ES6*/
    var arr2=Array.from(li); /*利用数组的构造函数,利用from方法,参数是元素对象,获取到所有的*/
    console.log(arr2);
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

2、比较数组的slice() 和 splice()

  • slice()适合于截取数组部分数据。

  • splice()适合对数组进行 增删改查 的操作。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    /*slice() ,从数组中截取出部分数据,返回所取数据组成的数组*/
    var arr=['hong','cheng','huang','lv','lan'];
    var arr3=arr.slice(1,2); /*两个参数代表开始索引和结束索引,但不包括 结束索引对应的数据*/
    console.log(arr3); /*只有'cheng'*/

    /*splice(),可删除、增加、修改数组中的部分数据*/
    var arr4=arr.splice(0,1);/*删除时,第一个参数是开始索引,第二个位置代表删除的量,返回被删除数据 组成的数组*/
    console.log(arr4);/*返回'hong'*/
    var arr5=arr.splice(2,0,'hua','cao');/*插入时,第一个参数是开始索引,第二个参数必须是0,第三个参数起是要插入的数据,*/
    console.log(arr5);
    var arr6=arr.splice(0,2,'shan','hai');/*更新 就是先删除再插入,所以第二个参数=添加的数量*/
    console.log(arr6);
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

3、原生属性和自定义属性

  • 原生属性在获取时,要注意class稍有不同。

  • 自定义属性特别适合实际项目情况,尤其是data命名开头时,还有专门的操作方法。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
        <div id="hua" class="huahua" style="color: lightgreen"
            data-weidao="xiang"
             data-daxiao="10cm"
        >
            这是一个div标签
        </div>
<script>
    var div1=document.getElementsByTagName('div');
    /*把元素看做对象,获取原生属性可以用对象的方式,用点语法*/
    console.log(div1.className);/*class是保留字 所以不能直接用*/
    console.log(div1.style.color);
    /*获取自定义属性*/
    console.log( div1.getAttribute('data-weidao')); /*getAttribute()既可以获取自定义属性又可以获取原生属性*/
    console.log( div1.dataset.daxiao);/*适合 data-为前缀的自定义属性*/
    /*原生属性和自定义属性 都可以读和写*/
    div1.id='hua1;';
    div1.getAttribute('data-weidao','chou');
    console.log( div1.id);
    console.log( div1.getAttribute('data-weidao'));
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

4、通过classList实现对象数据的增删改查和自动切换

  • 通过classList可实现对元素class属性值的增删改查,特别是css类样式的切换

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*这是一个css类*/
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <h1 class="one two three">classList</h1>
<script>
    /*classList*/
    var h1 = document.getElementsByTagName('h2').item(0);
    console.log( h1.className );/*普通方法获取class值*/
    console.log( h1.classList.value);/*通过classList获取*/
    h1.classList.add('four');/*通过classList添加*/
    h1.classList.replace('one', '111');/*通过classList替换*/
    h1.classList.remove('four');/*通过classList删除*/
    console.log( h1.classList.item(0) );/*通过classList获取第一个*/
    /*实现自动切换的反转操作,当h1有这个red类时,就删除,没有就增加*/
    h1.addEventListener('click', function (event) {
        h1.classList.toggle('red'); /*red是指一个css类,上面有定义*/
    },false);
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

5、定时器练习

  • setTimeout()是设置一个定时生效的操作。

  • setInterval()是让一段操作 间歇式地不断重复。

  • 事件模拟器是通过对象的构造函数生成一个点击对象,再通过dispatchEvent()方法去触发这个点击事件,从而实现系统的自动执行效果。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定时器</title>
</head>
<body>
    <button>登录</button>
    <button>取消登录</button>
    <p></p>
    <hr>
    <button>播放</button>
    <button>停止</button>
    <hr>
    <img src="images/banner1.jpg" alt="" width="500">
    <div style="width: 200px;height: 150px;background-color: lightgreen">广告</div>
    <p id="price"></p>
<script>
    /*1、setTimeout(),等一段时间再执行*/
    var btn1 = document.getElementsByTagName('button').item(0);
    var btn2 = document.getElementsByTagName('button').item(1);
    var tex = document.getElementsByTagName('p').item(0);
    var timer = null;
    btn1.addEventListener('click', function (ev) {   /*点击“登录”后,跳转到百度*/
        tex.innerText="正在努力加载中";
        timer=setTimeout(function () {
            location.assign('http://www.baidu.com');
        },2000)
    }, false);
    btn2.addEventListener('click',function (ev) {
        clearTimeout(timer); /*点击“取消登录”后,就不再跳转*/
        tex.innerText = '已取消跳转';
    });

    /*2、setInterval(),间隙式地 不断重复执行*/
    var btn3 = document.getElementsByTagName('button').item(2);
    var btn4 = document.getElementsByTagName('button').item(3);
    var img = document.images.item(0);
    btn3.addEventListener('click',function () {
        timer = setInterval(function () {
            var a=Math.random();/*随机产生一个0-1之间的小数*/
            var index=Math.ceil(a*3);/*产生1-3之间随机整数*//*Math.ceil()是向上取整*/
            img.src = 'images/banner' + index.toString() + '.jpg'; /*改变图片路径*/ /* toString()把数字转换为字符串*/
            },1000
        )
    }, false);
    btn4.addEventListener('click', function () {
        clearInterval(timer); /*清除 间隙式定时器*/
    },false);

    /*3、事件模拟器,让系统自动生成一个点击对象,代替鼠标点击来触发*/
    var div = document.getElementsByTagName('div').item(0);
    var price = document.getElementById('price');
    var num = 0;
    var shouru = 0.5;
    var click = new Event('click'); /*利用对象的构造函数生成一个点击对象*/
    setInterval(function () {
        div.dispatchEvent(click); /*通过dispatchEvent()这个事件触发器方法 触发点击事件*/
        num += 1; /*num + shouru 起始值是1.5 每次+1*/
        price.innerHTML = '广告收入: '+ '<span style="color:red">'+(num + shouru).toString()+'</span>' + '元';
        /*JS中用html语法要用引号引起来*/
    }, 2000);
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

6、朱老师的定时器算法思路

  • 1、DOM结构:三张图片,三个小点,两个左右切换按钮。为了让小点数量自动和图片匹配,所以只写了小点的父级标签,并没有定义小点的每个标签及其属性,后期在自动定义小点时,会让小点的自定义属性=图片的自定义属性。

  • 2、实现小点的自动增加(小点数量=图片数量),尤其注意小点的自定义属性=图片的自定义属性。

  • 3、为每个小点增加点击事件,点击以后 更改小点的样式(利用classList的切换类样式) 和 图片。

  • 4、为左右切换按钮设置 图片切换,通过判断显示图片的节点来决定如何切换。

  • 5、利用事件模拟器来实现图片的轮播,鼠标移出就启动 间歇式重复定时器,鼠标移入就取消定时器。

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议