任务卡_04-前端技术_javaScript内置对象与DOM操作【点名器，轮播图】

于 2020-12-06 14:35:05 发布
阅读量572 收藏 2
点赞数 2
分类专栏： # 任务卡 文章标签： 前端技术 任务卡 JavaScript内置对象 JavaScriptDom操作 Java开发工程师
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41528502/article/details/110433877
版权

目录

一，随机点名器训练

1，任务概述

2，任务过程

3，可能遇到的问题

4，任务线索

5，参考代码

5.1 运行效果

5.2 编程思路

5.3 参考代码

二，轮播图效果训练

1，任务概述

2，任务过程

3，可能遇到的问题

4，任务线索

5，参考代码

5.1 运行效果

5.2 编程思路

5.3 参考代码

三，补充

1，字体图标的使用

 

一，随机点名器训练

1，任务概述

为了活跃班级气氛，在班级上张老师想通过一个随机点名器来随机抽取学 员回答问题，故按排你来使用 HTML+JavaScript 来实现如下图所示的随机点 名器；

  • 第一张图是随机点名器的初始页面；
  • 当点击开始按钮时，JS 程序中提 前准备好人员（数组）名单会随机变换跳动显示，开始按钮变成了停止按钮， 如第二张图显示；
  • 当点击停止按钮时，名字的随机变换跳动停止，显示出的名 字即为随机点击出来的姓名，如第三张图所示。

2，任务过程

  • 1、使用 HTML+CSS 布局出如上图所示的随机点名器页面。 
  • 2、嵌入 JS 代码，定义要随机姓名数组变量，并初始化姓名信息。 
  • 3、为开始按钮添加点击事件，并编写定时器程序，随机显示姓名信息。 
  • 4、编写停止按钮事件处理程序，终止定时程序并显示随机出来的姓名信 息，最后完成输出

3，可能遇到的问题

  • 1、随机姓名信息的抽取 
  • 2、定时器函数的的使用 
  • 3、开始与停止的切换操作

4，任务线索

JavaScript、循环、随机和定时器函数的使用。

手册：https://www.w3school.com.cn/js/index.asp

学习视频

5，参考代码

5.1 运行效果

5.2 编程思路

  1. 三个div元素：container（最大的框）、name（显示选中的名字）、switch（开关）；
  2. 通过flag确定当前点名器所处状态；
  3. 通过changeState函数，更换状态，调整开关按钮的样式；

 

5.3 参考代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点名器</title>
    <style>
        #container{
            /* 定位 */
            position: relative;/* 生成相对定位的元素，相对于其正常位置进行定位 */
            left: 450px;
            top: 200px;
            /* 尺寸 */
            width: 400px;
            height: 250px;
            /* 边框 */
            background-color: rgb(230, 99, 51);
            border-radius: 10px;/* 圆角边框 */
            box-shadow:5px 5px 3px grey;/* 阴影 */
        }
        #name{
            /* 定位 */
            position: absolute;/* 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位 */
            left: 50px;
            top: 80px;
            /* 尺寸 */
            width: 300px;
            height: 60px;
            /* 边框设置 */
            background-color: #b9e9f0;
            border-radius: 10px;
            box-shadow:3px 3px 3px grey;/* 阴影 */
            outline-style: none;
            /* 文字设置 */
            text-align: center;/* 文字水平居中 */
            line-height: 60px;/* 将文字行高设置为文字外层元素的高度大小 从而文本垂直居中 */
            font-size: 30px;
            font-weight: bold;
        }
        #switch{
            /* 定位 */
            position: absolute;
            left: 175px;
            top: 185px;
            /* 尺寸 */
            width: 50px;
            height: 25px;
            /* 边框 */
            background-color: green;
            border-radius: 5px;
            border-style: solid;
            border-width: 1px;
            border-color: blanchedalmond;
            box-shadow:1px 1px 3px gray;/* 阴影 */
            /* 文字 */
            text-align: center;/* 文本水平居中 */
            line-height: 25px;/* 文本垂直居中 */
            font-family:"Times New Roman",Georgia,Serif;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <div id="container" >
        <div id="name">
            点名器
        </div>
        <div id="switch" onclick="changeState()">
            开始
        </div>
    </div>
</body>
<script>
    var list = ["花木兰", "凯", "孙悟空", "李白", "张良", "钟馗"];// 备选名单
    var mytime = null;      // 定时器
    var flag = 0;           // 状态标志 0：停止，1：运行中
    var index = -1;         // 记录当前遍历的下标
    function changeState() {
        var button = document.getElementById("switch");
        if(flag == 0) {
            flag = 1;
            button.style.backgroundColor = 'red';
            button.style.outlineStyle = 'solid';
            button.style.outlineColor = 'blue';
            button.style.outlineWidth = '2px';
            button.childNodes[0].nodeValue = "暂停";
            var name = document.getElementById("name");
            mytime = setInterval(function(){    // 设置定时器效果
                index++;
                index = index % list.length;
                name.childNodes[0].nodeValue = list[index];
            }, 100);
        }else{
            flag = 0;
            clearTimeout(mytime);               // 清除定时器效果
            button.style.backgroundColor = 'green';
            button.style.outlineStyle = 'none';
            button.childNodes[0].nodeValue = "开始";
        }
    }
</script>
</html>

二，轮播图效果训练

1，任务概述

如下图所示，本次训练目标是完成京东官网首页中轮播图效果。具体要求： 

  • 要求每隔 3 秒图片会自动切换一张，以此类推安照给定图片数量轮番切换 播放。
  • 当鼠标移入时会自动暂停播放，鼠标移出则会继续。 
  • 如下图两边有两个左右方向的按钮，点击则会实现手动切换商品图片。 
  • 左下角会按照图片数量显示对应的灰色圆点，点击会显示对应的图片，并 圆点加亮显示。 

具体效果参考网址：https://www.jd.com/

2，任务过程

  • 使用 HTML+CSS 布局出如上图所示页面效果。 
  • 嵌入 JS 代码，定时轮换显示图片。 
  • 添加鼠标移入移出事件，完成暂停和继续轮换效果。 
  • 为左右按钮添加点击事件，完成手动轮换商品图片效果展示。
  • 完成左下角圆点点击轮换商品图片展示

3，可能遇到的问题

  • 定时事件的使用 
  • 鼠标移入和移出事件的完成滚动效果的暂停和继续 
  • 由自动到手工轮换效果的切换。

4，任务线索

JavaScript 语言基础、鼠标事件和定时器函数的使用。 

手册：https://www.w3school.com.cn/js/index.asp 

视频：JavaScript 事件处理系列视频。

5，参考代码

参考教程@哔哩哔哩【由浅入深带你解剖JS轮播图原理】

5.1 运行效果

5.2 编程思路

  1. 一个大的div元素表示最外层的框，中间填充将要展示的图片，图片大小和外框的大小相匹配；
  2. 图片横向排列，但是同时只显示一张图片，其余图片隐藏起来，通过修改margin-left来显示其他图片；
  3. 通过绝对定位，设计小圆点大体样式；
  4. 设计changeImg和changeIcon函数，表示更改下标index后图片和小圆点的样式变化；
  5. 设计show函数展示图片和图标；
  6. 通过doStart函数控制鼠标移出图片后，自动轮播图片和小圆点；
  7. 通过给小圆点添加onmouseover函数locate，并传入不同的index实现小圆点和图片的绑定；
  8. 利用字体图标设计左右移动图片的功能；

 

5.3 参考代码

提示：展示框的大小、图片、字体图标需要自己进行配置。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>轮播图设计</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;       /* 消除列表的原点 */
            text-decoration: none;  /* 消除链接下划线 */
        }
        /* 整体展示框架的样式 */
        #container{
            width: 386px;
            height: 260px;
            left: 500px;
            top: 200px;
            overflow: hidden;       /* 超出部分选择隐藏 */
            border: 0.5px solid gray;/* 边框设置为黑色 */
            position: relative;     /* 框架采用相对定位 */
        }
        /* 图片列表的样式 */
        #imgList{
            width: 1930px;          /* 所有图片累计的宽度386 * 5 */
            height: 260px;
        }
        /* 单个图标的样式 */
        #imgList li{
            float: left;            /* 浮动靠左排列 */
            transition: opacity 300ms ease-in-out 0.5s;
            transition-duration: 0.5s;/* 过渡动画 但是好像没有起作用 应该是没有定义过渡后的效果*/
        }
        /* 下方小圆点图标列表样式 */
        #iconList{
            position: absolute;     /* 绝对定位 */
            width: 75px;            /* 设定整体规格、位置 */
            height: 10px;
            left: 20px;
            bottom: 10px;
        }
        /* 小图标的定位 */
        #iconList li{
            position: relative;
            float: left;
            margin-left: 5px;       /* 扩大圆点间距 */
            width: 10px;
            height: 10px;
            cursor: pointer;        /* 将鼠标图形变成小手样式 */
            border-radius: 50%;     /* 设置为圆形 */
            background-color:white;
            opacity: 0.75;          /* 透明度 */
            top: 2px;               /* 普通小圆点距顶端距离 为了使选中小圆点添加边框后仍然保持对齐 */
        }
        /* 字体图标实现左右移动图片的功能 */
        @font-face {
            font-family: 'fontello';
            src: url('./font/fontello.eot?33765623');
            src: url('./font/fontello.eot?33765623#iefix') format('embedded-opentype'),
                url('./font/fontello.woff?33765623') format('woff'),
                url('./font/fontello.ttf?33765623') format('truetype'),
                url('./font/fontello.svg?33765623#fontello') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        /* 设置字体图标的整体样式 */
        .icon{
            font-family: 'fontello';
            color: white;
        }
        /* 左边字体图标的样式 */
        #iconLeft{
            position: absolute;
            cursor: pointer;
            width: 20px;
            height: 30px;
            left: 0px;
            bottom: 125px;
            background-color:gray;
            opacity: 0.5;
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
            line-height: 30px;      /* 保证字体图标上下居中 */
            text-align: left;       /* 靠左 */
        }
        /* 右边字体图标的样式 */
        #iconRight{
            position: absolute;
            cursor: pointer;
            width: 20px;
            height: 30px;
            right: 0px;
            bottom: 125px;
            background-color:gray;
            opacity: 0.5;
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            line-height: 30px;
            text-align: right;      /* 靠右 */
        }
    </style>
</head>
<body>
    <div id="container" >
        <!-- 由于展示图片后index立刻加一 为了显示上一张图片 这里需要减二 -->
        <div class="icon" id="iconLeft" onclick="moveImg(-2)"></div>
        <!-- 由于展示图片后index立刻加一 为了显示下一张图片 这里不需要更改 -->
        <div class="icon" id="iconRight" onclick="doStart()"></div>
        
        <ul id="imgList" onmouseover="doStop()" onmouseout="doStart()">
            <li><a href=""><img src="./images/17.jpg" alt=""></a></li>
            <li><a href=""><img src="./images/18.jpg" alt=""></a></li>
            <li><a href=""><img src="./images/19.jpg" alt=""></a></li>
            <li><a href=""><img src="./images/20.jpg" alt=""></a></li>
        </ul>

        <ul id="iconList">
            <li onmouseover="locate(0)"></li>
            <li onmouseover="locate(1)"></li>
            <li onmouseover="locate(2)"></li>
            <li onmouseover="locate(3)"></li>
        </ul>
        
    </div>
    <script>
        // 初始化图片位置
        var index = 0;
        // 获取图片标签
        var imgs = document.getElementById("imgList").getElementsByTagName("li");
        // 获取图标列表 并设置第一个被选中图标的样式
        var icons = document.getElementById("iconList").getElementsByTagName("li");
        // 设置定时器
        var timer;
        // 开始轮播
        doStart();
        // 展示图片和小图标
        function show(){
            index = (index + imgs.length) % imgs.length;// 保证不越界
            changeImg();
            changeIcon(index)
            index++;                    // 下标自增
        }
        // 启动定时轮播
        function doStart(){
            show();                     // 先执行一次
            if(timer != null){
                clearInterval(timer);
                timer = null;
            }
            timer = setInterval(show,3000);
        }
        // 暂停定时轮播
        function doStop(){
            clearInterval(timer);
            // 由于展示完当前图片后index立即加一,若鼠标悬停在图片上之后移开，会立刻显示第二张图片，所以减一
            // 为了避免index出现负数，进行取模运算
            index = (index - 1 + imgs.length) % imgs.length;
        }
        // 根据index 通过修改marginLeft展示不同图片
        function changeImg(){
            if(index == 0){
                document.getElementById("imgList").style.marginLeft = "0px";
            }else{
                document.getElementById("imgList").style.marginLeft = -index * 386+"px";
            }
        }
        // 根据index 修改当前位置的圆点样式
        function changeIcon(x){
            for(var i = 0; i < imgs.length; i++){
                if(i == x){
                    icons[i].style.border="2px solid gray"
                    icons[i].style.borderColor="rgba(128, 128, 128, 0.5)";
                    icons[i].style.top="0px";// 保证居中
                }else{
                    icons[i].style.border="none";
                    icons[i].style.top="2px";// 保证居中
                }
            }
        }
        // 根据选择的圆点来确定图片
        function locate(x){
            index = (x + imgs.length) % imgs.length;
            doStart();
        }
        // 移动图片
        function moveImg(x){
            locate(index+x);
        } 
    </script>
</body>
</html>

 

 

 

三，补充

1，字体图标的使用

相关介绍可以参考@&再见萤火虫&【04-前端技术_CSS与CSS3美化页面】中关于字体图标的讲解。

1）进入官网https://fontello.com/（可选其他网址），选择尺寸、图标，并进行下载：

2）下载完解压后的样子：

3）放在你的项目（HTML文件）所在目录：（下面的Demo是我的工程文件，不是字体图标的示例）

4）在HTML文件中添加配置：

首先找到示例HTML的style中@font-face，添加到工程文件中，并添加icon样式

然后，在你想插入字体图标的位置添加元素，并将内容设置为字体图标对应的编码：（可以在网站中找到编码，复制，粘贴到目标位置）

5）把字体图标当作文字，设计样式：

6）演示效果：

章节汇总在这里（づ￣3￣）づ╭❤～@&再见萤火虫&【04-前端技术】

对学习Java感兴趣的同学欢迎加入QQ学习交流群：1126298731

有问题欢迎提问，大家一起在学习Java的路上打怪升级！(o゜▽゜)o☆[BINGO!]

&再见萤火虫&
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值