1. 如果将html元素集合转换为数组对象? 2. 定时器的种类与使用场景,举例说明 3. 事件模拟器的应用场景与案例(以点击广告为例) 4. 写出轮播图的基本实现原理与步骤,不少于200字 5. 自己动写写出一个轮播图,可参照课堂源码,但应有所创新 - 作业

首页 > 博客列表 > 1. 如果将html元素集合转换为数组对象? 2. 定时器的种类与使用场景,举例说明 3. 事件模拟器的应用场景与案例(以点击广告为例) 4. 写出轮播图的基本实现原理与步骤,不少于200字 5. 自己动写写出一个轮播图,可参照课堂源码,但应有所创新

博主信息

博文 32

粉丝 0

访问量 28335

专题推荐

更多>

实例

1. 如果将html元素集合转换为数组对象?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>将元素集合转为数组对象</title>
</head>
<body>
<ul>
    <li>text1</li>
    <li>text2</li>
    <li>text3</li>
    <li>text4</li>
</ul>
<script>
    var lis =document.getElementsByTagName("li");
    var arr1 =Array.prototype.slice.call(lis,0);
    console.log(arr1)
</script>
</body>
</html>

运行实例 »

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

实例

2. 定时器的种类与使用场景,举例说明

javascript中有两种定时器：

(1)定时器setTimeOut()与clearTimeOut()

setTimeOut()使用方法：< …… onClick="timerID=setTimeout('display ()',3000)">

1.设置定时器的名称为timeID以便以后终止定时器时用到clearTimeOut(timeID)。

2.display()方法要使用单引号。

3.点击事件发生3秒之后执行display()方法一次。

(2)定时器setInterval()与clearInterval()

setInterval()使用方法：<……onClick="timerID=setInterval ('display ()',3000)">

1.设置定时器的名称为timeID以便以后终止定时器时用到clearInterval(timeID)。

2.display()方法要使用单引号。

3.点击事件发生3秒之后重复的执行display()方法。直到关闭窗口或者调用clearInterval()

3. 事件模拟器的应用场景与案例(以点击广告为例)

实例
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>点击广告案例</title>
</head>
<body>
<div style="width: 300px;height: 200px;background-color: lightgreen">广告案例</div>
<p id="res"></p>

<script>
    var div = document.getElementsByTagName('div').item(0);
    var res = document.getElementById('res');
    var num = 0;
    var price = 0.5;

    var click = new Event('click');
    setInterval(function () {
        div.dispatchEvent(click);
        num += 1;
        console.log(num);
        res.innerHTML = '点击收入: '+ '<span style="color:lightcoral">'+(num * price).toString()+'</span>' + '元';
    }, 2000);
    
</script>
</body>
</html>

运行实例 »

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

4. 写出轮播图的基本实现原理与步骤,不少于200字:

轮播图的原理
1.图片移动实现原理：
利用浮动将所有所有照片依次排成一行，给这一长串图片添加一个父级的遮罩，每次只显示一张图，其余的都隐藏起来。对图片添加绝对定位，通过控制left属性，实现照片的移动。

2.图片移动动画原理：
从a位置移动到b位置，需要先计算两点之间的差值，通过差值和时间间隔，计算出每次移动的步长，通过添加定时器，每次移动相同的步长，实现动画效果。

3.图片定位停止原理：
每一张照片都有相同的宽度，每张照片都有一个绝对的定位数值，通过检测定每次移动后，照片当前位置和需要到达位置之间的距离是否小于步长，如果小于，说明已经移动到位，可以将定时器清除，来停止动画。

4图片切换原理：
在全局设置一个变量，记录当前图片的位置，每次切换或跳转时，只需要将数值修改，并调用图片页数转像素位置函数，再调用像素运动函数即可。

5.自动轮播原理：
设置定时器，一定时间间隔后，将照片标记加1，然后开始切换。

6.左右点击切换原理：
修改当前位置标记，开始切换。这里需要注意与自动轮播之间的冲突。当点击事件触发之后，停止自动轮播计时器，开始切换。当动画结束后再次添加自动轮播计时器。

5. 轮播图实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图实例</title>
    <style>
        ul,li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .box {
            /*定位父级*/
            position: relative;
            width: 1000px;
            height: 350px;
            margin: 0 auto;
        }

        .box .slider {
            width: 1000px;
            height: 350px;
            display: none;
        }

        .box .slider.active{
            display: block;
        }

        .box .point-list {
            position: absolute;
            /*绝对定位的环境下的水平居中方式*/
            left: 50%;
            margin-left: -38px;
            top: 310px;
        }



        .box .point-list .point {
            display: inline-block;
            width: 12px;
            height: 12px;
            margin: 0 5px;
            background-color: white;
            border-radius: 100%;
        }

        .box .point-list .point.active {
            background-color: black;
        }

        .box .point-list .point:hover {
            cursor: pointer;
        }


        .skip {
            position: absolute;
            top: 140px;
            display: inline-block;
            width: 40px;
            height: 80px;
            text-align: center;
            line-height: 80px;
            background-color: lightgray;
            color: white;
            opacity: 0.2;
            font-size: 36px;
        }
        .box .prev{
            left: 0;
        }

        .box .next{
            right: 0;
        }

        .box .skip:hover {
            cursor: pointer;
            opacity: 0.5;
            color: black;
        }
    </style>
</head>
<body>
<div class="box">
    <img src="https://img1.360buyimg.com/da/s590x470_jfs/t1/79425/15/4421/98558/5d283017E29d9a8fb/723bfa83c3f73613.jpg!q90!cc_590x470.webp" alt="" data-index="1" class="slider active">
    <img src="https://img1.360buyimg.com/pop/s590x470_jfs/t1/45206/26/5099/84405/5d2c41f8E490ac899/c03df426cd52bfe9.jpg!q90!cc_590x470.webp" alt="" data-index="2" class="slider">
    <img src="https://imgcps.jd.com/ling/7307139/6LaF5biC54m56Imy57K-6YCJ/54iG5ZOB5L2O6IezOS455YWD/t-5bd95d4f8e34e21f3ff67e71/15a71c63.jpg" alt="" data-index="3" class="slider">

    <div class="point-list">

    </div>

    <span class="skip prev"><</span>
    <span class="skip next">></span>

</div>

<script>
    var imgs = document.images;
    var imgArr = Array.prototype.slice.call(imgs, 0);
    var pointList = document.getElementsByClassName('point-list').item(0);

    imgArr.forEach(function (img, index){
        var span = document.createElement('span');

        if (index === 0) {
            span.classList.add('point','active')
        }
        span.classList.add('point');

        span.dataset.index = img.dataset.index;
        pointList.appendChild(span);
    });

    var points = document.getElementsByClassName('point');
    var pointArr = Array.prototype.slice.call(points, 0);


    pointArr.forEach(function (point){
        point.addEventListener('click', setImgActive, false);
    });

    function setImgActive(evt) {
        imgArr.forEach(function (img){
            if (img.dataset.index === evt.target.dataset.index) {
                imgArr.forEach(function (img) { img.classList.remove('active') });
                img.classList.add('active');
                setPointActive(img.dataset.index);
            }
        });
    }

    var skip = document.getElementsByClassName('skip');
    skip.item(0).addEventListener('click', skipImg, false);
    skip.item(1).addEventListener('click', skipImg, false);

    function skipImg(evt) {

        var currentImg = null;
        imgArr.forEach(function (img) {
            if (img.classList.contains('active')) {
                currentImg = img;
            }
        });

        if (evt.target.classList.contains('prev')) {
            currentImg.classList.remove('active');
            currentImg = currentImg.previousElementSibling;

            if (currentImg !== null && currentImg.nodeName === 'IMG') {
                currentImg.classList.add('active');
            } else {
                currentImg = imgArr[imgArr.length-1];
                currentImg.classList.add('active');
            }
        }

        if (evt.target.classList.contains('next')) {
            currentImg.classList.remove('active');
            currentImg = currentImg.nextElementSibling;

            if (currentImg !== null && currentImg.nodeName === 'IMG') {
                currentImg.classList.add('active');
            } else {
                currentImg = imgArr[0];
                currentImg.classList.add('active');
            }
        }
        var imgIndex = currentImg.dataset.index;
        setPointActive(imgIndex);

    }

    function setPointActive(imgIndex) {
        pointArr.forEach(function (point) { point.classList.remove('active') });
        pointArr.forEach(function (point) {
            if (point.dataset.index === imgIndex)
                point.classList.add('active');
        });
    }


    var box = document.getElementsByClassName('box').item(0);
    var timer = null;
    box.addEventListener('mouseout', startTimer, false);
    box.addEventListener('mouseover',clearTimer, false);
    function startTimer() {

        var clickEvent = new Event('click');
        timer = setInterval(function () {
            skip.item(1).dispatchEvent(clickEvent);
        }, 2000);
    }
    function clearTimer() {
        clearInterval(timer);
    }
</script>
</body>
</html>

运行实例 »

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

批改状态：不合格

老师批语：请写完再提交

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

7月3日作业

2019-07-04 01:20:28