JS-WebAPIs-DOM练习题(tab栏/输入框)

最新推荐文章于 2022-09-03 16:45:38 发布

阿门阿前下的蜗牛

最新推荐文章于 2022-09-03 16:45:38 发布

阅读量417

点赞数

分类专栏：前端练习

本文链接：https://blog.csdn.net/Fky_mie/article/details/114497406

版权

前端同时被 2 个专栏收录

41 篇文章 0 订阅

订阅专栏

练习

9 篇文章 0 订阅

订阅专栏

JS-WebAPIs第2天-DOM练习题

参考:

pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）

MDN-Web API接口参考文档对象模型

文章目录

JS-WebAPIs第2天-DOM练习题

一, 常用元素属性操作练习

练习1: 点击按钮显示现在的时间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span {
            display: block;
            width: 250px;
            height: 30px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <input type="button" value="显示当前系统日期" class="btn">
    <span>这里显示日期</span>
    <span class="congratulation">祝福你</span>
    <script>
        /* 第一个事件: 点击按钮显示时间 */
        // 获取元素
        var btnTime = document.querySelector('.btn');
        var spanTime = document.querySelector('span');
        // 注册事件
        btnTime.onclick = function() {
            spanTime.innerHTML = getDate();
        }

        var date = new Date(); //new一个Date内置对象
        //补充getDate()函数
        function getDate() {
            var year = date.getFullYear();
            var month = date.getMonth() + 1; //注意月份从0开始计数
            var dates = date.getDate();
            var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
            var day = date.getDay();
            return '今天是' + year + '年' + month + '月' + dates + '日' + arr[day];
        }

        /* 第二个事件: 判断上午下午晚上显示祝福 */
        var zhufu = document.querySelector('.congratulation');
        var hours = date.getHours();
        if (hours < 12) {
            zhufu.innerHTML = '上午好';
        } else if (hours < 18) {
            zhufu.innerHTML = '下午好';
        } else {
            zhufu.innerHTML = '晚上好';
        }
    </script>
</body>
</html>

练习2: 根据不同时间显示不同提示语

整合进练习1了

二, 表单的属性操作练习

练习3: 点击显示密码

核心思路: 对于同一个按钮对应两种触发事件的情况(按一下亮按一下暗), 设置flag变量代表两种状态

右侧小眼睛用更改图片路径实现img.src

在这里插入图片描述

<style>
        .box {
            position: relative;
            width: 400px;
            border-bottom: 1px solid #ccc;
            margin: 100px auto;
        }
        
        .box input {
            width: 370px;
            height: 30px;
            border: 0;
            outline: none;
        }
        
        .box img {
            position: absolute;
            top: 2px;
            right: 2px;
            width: 24px;
        }
    </style>
</head>

<body>
    <div class="box">
        <label for="">
            <img src="images/close.png" alt="" id="eye">
        </label>	
        <!-- label标签常跟搜索框一起使用 -->
        <input type="password" name="" id="pwd">
    </div>
    <script>
        // 1. 获取元素
        var eye = document.getElementById('eye');
        var pwd = document.getElementById('pwd');
        // 2. 注册事件 处理程序
        var flag = 0;
        eye.onclick = function() {
            // 点击一次之后， flag 一定要变化
            if (flag == 0) {
                pwd.type = 'text';
                eye.src = 'images/open.png';
                flag = 1; // 赋值操作
            } else {
                pwd.type = 'password';
                eye.src = 'images/close.png';
                flag = 0;
            }
        }
    </script>
</body>

练习4: 京东关闭顶部/底部广告

核心思路: 用display:none 和display:block隐藏和显示广告

在这里插入图片描述

点x关闭图片

    <style>
        #J_promotional-top {
            position: relative;
            width: 990px;
            height: 66.5px;
            margin: 0 auto;
            background-image: url(images/jd_ad.jpg.webp);
            background-size: cover;
        }
        
        #J_promotional-top .close-btn {
            position: absolute;
            top: 5px;
            right: 0px;
            width: 20px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-size: 20px;
            font-style: normal;
            background: rgba(255, 255, 255, 0.7);
            cursor: pointer;
        }
    </style>
</head>

<body>
    <div id="J_promotional-top">
        <!-- 默认为行内块元素 -->
        <a href="#">
            <div class="ad"></div>
        </a>

        <i class="close-btn" aria-label="关闭顶部推广">
            ×
        </i>
    </div>
    <script>
        var close = document.querySelector('.close-btn');
        var ad = document.getElementById('J_promotional-top');  //此处ID前无#
        close.onclick = function() {
            ad.style.display = 'none'; //none一定要打引号
        }
    </script>
</body>

练习5: 循环精灵图

核心思路: 当且仅当精灵图满足一定分布规律(即可以用公式表示时), 可以通过JS改变多个图标的position.

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        .box {
            width: 250px;
            margin: 100px auto;
        }
        
        .box li {
            float: left;
            width: 24px;
            height: 24px;
            background-color: pink;
            margin: 15px;
            background: url(images/sprite.png) no-repeat;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <script>
        var lis = document.querySelectorAll('li');
        // 利用lis[]是个伪数组的性质, 遍历所有小li
        for (var i = 0; i < lis.length; i++) {
            var yCoordinate = 44 * i;
            lis[i].style.backgroundPosition = '0 -' + yCoordinate +
                'px'; //引号别忘了, 变量需要跟字符串用加号隔开, 0后面必须还要有空格(正常表示坐标时 x y 用空格隔开)
        }
    </script>
</body>

练习6: 搜索框输入时隐藏默认字符

核心思路: input.text框内是value值

对象: 输入框

事件: 得到焦点(鼠标点击成为输入状态)时隐藏value-onFocus, 失去焦点时显示value

    <style>
        input {
            color: #999;
        }
    </style>
</head>

<body>
    <input type="text" value="手机">
    <script>
        // 1.获取元素
        var text = document.querySelector('input');
        // 2.注册事件 获得焦点事件 onfocus 

        // 错误写法: 注意失去焦点时不能直接改变value值, 会使得输入文字后如果失去焦点文字同样被改变
        // text.onfocus = function() {
        //     this.value = '';
        // }
        // text.onblur = function() {
        //     this.value = '手机';
        // }
        // 正确写法: 仍有不足,用户输入'手机'后再点击会消失,因为被当成默认value了
        text.onfocus = function() {
                // console.log('得到了焦点');
                if (this.value === '手机') {
                    this.value = '';
                }
                // 获得焦点需要把文本框里面的文字颜色变黑
                this.style.color = '#333';
            }
            // 3. 注册事件 失去焦点事件 onblur
        text.onblur = function() {
            // console.log('失去了焦点');
            if (this.value === '') {
                this.value = '手机';
            }
            // 失去焦点需要把文本框里面的文字颜色变浅色
            this.style.color = '#999';
        }

        // 2021-3-6 京东搜索框是以输入状态(键盘)判断, 默认value一直显示, 即使输入同样的文字也不会消失. 完美!
    </script>

练习7: 通过className更改样式

    <style>
        .div {
            width: 100px;
            height: 100px;
            background-color: pink;
        }
        
        .change {
            background-color: purple;
            color: #fff;
            font-size: 25px;
            margin-top: 100px;
        }
    </style>
</head>


<body>
    <div class="first">文本</div>
    <script>
        // 1. 使用 element.style 获得修改元素样式  如果样式比较少 或者 功能简单的情况下使用
        // JS主控制, 避免在JS里写太多CSS
        var test = document.querySelector('div');
        test.onclick = function() {
            // this.style.backgroundColor = 'purple';
            // this.style.color = '#fff';
            // this.style.fontSize = '25px';
            // this.style.marginTop = '100px';
            // 让我们当前元素的类名改为了 change

            // 2. 我们可以通过 修改元素的className更改元素的样式 适合于样式较多或者功能复杂的情况
            // 3. 如果想要保留原先的类名，我们可以这么做 多类名选择器
            this.className = 'change'; //  覆盖掉了原先的类名
            //this.className = 'first change'; //多类名选择器,保留原来的类名
        }
    </script>
</body>

三, 操作节点练习

练习8: [tab切换下拉菜单]

链接
要求: 移动到不同栏目显示不同选项

练习10: [留言板]

链接
要求: 用户输入信息,点击按钮即可发布留言

进阶: 删除留言

练习11: [动态生成表格]

链接

阿门阿前下的蜗牛

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
JS-WebAPIs-DOM练习题(tab栏/输入框)

JS-WebAPIs第1天-DOM练习题参考:pink老师JS基础 JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）MDN-Web API接口参考文档对象模型文章目录JS-WebAPIs第1天-DOM练习题一, 常用元素属性操作练习练习1: 点击按钮显示现在的时间练习2: 根据不同时间显示不同提示语二, 表单的属性操作练习练习3: 点击显示密码练习4: 京东关闭顶部/底部广告练习5:
复制链接

扫一扫