JS——初始DOM的相关操作练习

最新推荐文章于 2023-05-28 00:26:55 发布
最新推荐文章于 2023-05-28 00:26:55 发布
阅读量430 收藏 7
点赞数 3
分类专栏： JavaScript 文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Bonsoir777/article/details/126437634
版权

文章目录

  • 前言
  • 一、页面的开关灯
  • 二、根据系统时间提示信息
  • 三、广告的打开与关闭
  • 四、输入框的文字隐藏
  • 五、页面密码框
  • 总结

前言

前文介绍了初识DOM的相关知识点（感兴趣的朋友欢迎翻阅），本文就向大家分享一些利用对DOM操作解决简单实际应用的过程。

一、页面的开关灯

1.成果图：

 

2.需求：

  • 当点击开关时，页面的颜色进行相应的改变，模拟开关灯的景象。

3.JS实现过程：

<!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>开关灯练习</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <style>
        /* 灯泡区域外部容器样式设置 */
        .light-wrapper {
            width: 200px;
            height: 250px;
            position: relative;
            margin: 100px auto;
        }

        .light {
            width: 100%;
            height: 200px;
            background-color: yellow;
            border-radius: 50%;
            position: absolute;
            z-index: 10;
        }

        .base {
            width: 140px;
            height: 80px;
            background-color: silver;
            position: absolute;
            z-index: 5;
            top: 150px;
            left: 15%;
            border-radius: 90%;
        }

        /* 按钮样式设置 */
        #btn {
            height: 80px;
            width: 80px;
            margin-left: 47.5%;
            font-size: 22px;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <!-- 灯泡区域外部容器 -->
    <div class="light-wrapper">
        <!-- 灯泡 -->
        <div class="light" id="light"></div>
        <!-- 灯泡底座 -->
        <div class="base" id="base"></div>
    </div>
    <!-- 开关区域 -->
    <div>
        <button id="btn">OPEN</button>
    </div>


    <!-- 实现页面开关的js部分 -->
    <script>
        //  获取 id 为 btn 的按钮 
        var btn = document.getElementById('btn');

        // 获取页面元素 body
        var body = document.body;

        // 获取元素灯泡
        var light = document.getElementById('light');

        // 获取元素灯泡底座
        var base = document.getElementById('base');

        console.log(light);
        // 设置标识符
        var flag = true;
        // 设置按钮的点击事件
        btn.onclick = function () {
            flag = !flag;
            if (flag) {
                btn.innerText = 'OPEN';
                body.style.backgroundColor = '#fff';
                light.style.backgroundColor = 'yellow';
                base.style.backgroundColor = 'silver';
            } else {
                btn.innerText = 'CLOSE';
                body.style.backgroundColor = 'black';
                light.style.backgroundColor = 'gray';
                base.style.backgroundColor = 'silver';
            }

        }
    </script>


</body>

</html>

二、根据系统时间提示信息

1.成果图：

2.需求：

  • 根据当前系统时间给予用户相应的提示信息
  • 例如，当前时间为上午时，提示信息为“上午好呀，xxxx”。

3.JS实现过程 

<!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>用户登录</title>
    <style>
        /* 提示信息外部容器样式设置 */
        .wrapper {
            width: 310px;
            height: 150px;
            background-color: rgba(203, 229, 232, 0.83);
            margin: 100px auto;
        }

        /* 标题样式设置 */
        .word {
            background-color: pink;
            font-size: 20px;
            padding-left: 40px;
        }

        /* 当前时间区域样式设置 */
        #time {
            padding-left: 20px;
        }

        /* 提示信息区域样式设置 */
        #msg {
            padding-left: 20px;
            font-size: 20px;
        }
    </style>
</head>

<body>
    <!-- 提示信息外部容器 -->
    <div class="wrapper">
        <!-- 标题区域-->
        <p class="word">Bonsoir:欢迎你的登录！</p>
        <!-- 显示当前时间区域 -->
        <p id="time"></p>
        <!-- 提示信息区域-->
        <div id="msg"></div>
    </div>

    <!-- JS部分 -->
    <script>
        // 获取显示当前时间元素
        var time = document.getElementById('time');

        // 获取提示信息区域元素
        var msg = document.getElementById('msg');

        // 获取当前系统时间
        var now = new Date();

        // 分别获取时间分量
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        var day = now.getDay();
        var hours = now.getHours();
        var minutes = now.getMinutes();
        var seconds = now.getSeconds();
        var dateNow = year + '-' + month + '-' + date + ' ' + '周' + day + '  ' + hours + ':' + minutes + ':' + seconds;
        time.innerText = '当前时间是： ' + dateNow;
    
        // 根据时间进行提示判断
        if (hours < 12) {
            msg.innerText = '上午好呀，Bonsoir!';
        } else if (hours < 17) {
            msg.innerText = '下午好呀，Bonsoir!';
        } else {
            msg.innerText = '晚上好呀，Bonsoir!';
        }
    </script>
</body>

</html>

三、广告的打开与关闭

1.成果图：

2.需求：

  • 初始页面时广告区域应该呈现，当用户点击关闭按钮时，关闭当前广告，反之则打开

3.JS实现过程：

<!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>广告的打开与关闭</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <style>
        /*表单区域外部容器样式设置*/
        form {
            width: 300px;
            height: 350px;
            background-color: rgba(205, 228, 236, 0.934);
            margin: 100px auto 0 auto;
        }

        /* 按钮样式设置 */
        button {
            width: 60px;
            height: 40px;
        }

        /* 广告区域样式设置 */
        .banner {
            width: 100%;
            height: 200px;
            margin-top: 20px;
            background-color: pink;
            font-weight: bold;
        }
    </style>
</head>

<body>
    <!-- 表单区域外部容器 -->
    <form action="#">
        <!--按钮区域 -->
        <button id="btn">关闭</button>
        <!-- 广告区域 -->
        <div class="banner">我是一个广告！</div>
    </form>


    <!-- 实现广告显示状态变换的JS部分 -->
    <script>
        // 获取广告区域
        var div = document.getElementsByTagName('div')[0];
        // 获取按钮
        var btn = document.getElementById('btn');

        // 设置标识符
        var flag = true;
        // 设置按钮的点击事件
        btn.onclick = function () {
            flag = !flag;
            if (flag) {
                btn.innerText = '关闭';
                div.style.visibility = 'visible';
            } else {
                btn.innerText = '打开';
                div.style.visibility = 'hidden';
            }
        }
    </script>

</body>

</html>

四、输入框的文字隐藏

1.成果图：

 2.需求：

  • 当输入框获取焦点时，输入框内预留文字消失
  • 失去焦点时，输入框内预留文字出现

3.JS实现过程：

<!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>输入框文字样式设置</title>
    <link rel="stylesheet" href="./CSS/reset.css">
    <style>
        /* 输入框外部容器样式设置 */
        .wrapper {
            width: 350px;
            margin: 100px auto 0 auto;
        }

        /* 输入框样式设置 */
        #input {
            width: 300px;
            height: 30px;
            outline: none;
        }
    </style>
</head>

<body>
    <!-- 输入框外部容器 -->
    <form class="wrapper" action="#">
        <!-- 输入框 -->
        <input type="text" id="input" placeholder="请输入您的用户名：">
    </form>

    <!-- 实现输入框显示样式变化的js部分 -->
    <script>
        // 获取输入框
        var input = document.getElementById('input');
        // 为输入框设置获取焦点与失去焦点事件
        input.onfocus = function () {
            input.placeholder = '';
        }
        input.onblur = function () {
            input.placeholder = '请输入您的用户名：';
        }


    </script>
</body>

</html>

五、页面密码框

1.成果图：

2.需求：

  • 实现密码框显示状态的切换，初始时密码为不可见状态，同时小眼睛的状态也为打开状态
  • 当用户点击输入框后的小眼睛，输入框的内容变为文本可见状态，同时小眼睛的状态也为关闭状态。

3.JS实现过程： 

<!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>页面密码框</title>
    <link rel="stylesheet" href="./JS/font_3547761_ecdde3pwrko/iconfont.css">
    <link rel="stylesheet" href="./CSS/reset.css">
    <style>
        /* 输入框外部容器样式设置 */
        .wrapper {
            width: 300px;
            position: relative;
            margin: 100px auto 0 auto;
        }

        /* 输入框样式设置 */
        #input {
            width: 100%;
            height: 30px;
            outline: none;
        }

        /* 小图标样式设置 */
        i {
            position: absolute;
            top: 10px;
            right: 7px;
            cursor: pointer;
        }
    </style>
</head>

<body>
    <!-- 输入框外部容器 -->
    <div class="wrapper">
        <!-- 输入框 -->
        <input type="text" id="input">
        <!-- 小眼睛区域 -->
        <i class="iconfont" id="eyes">&#xe661;</i>
    </div>

    <!-- 实现文本样式变化的JS部分 -->
    <script>
        // 获取小眼睛图标
        var eyes = document.getElementById('eyes');
        // 获取输入框
        var input = document.getElementById('input');
        // 设置标识符
        var flag = true;
        // 为小眼睛设置点击事件
        eyes.onclick = function () {
            flag = !flag;
            if (flag) {
                eyes.innerHTML = '&#xe796';
                input.type = 'text';
            } else {
                eyes.innerHTML = '&#xe661';
                input.type = 'password';
            }
        }
    </script>
</body>

</html>

总结

好了，就此停笔，最后依旧诚挚祝福屏幕前的你健康幸福、平安喜乐。

Bonsoir777
关注
专栏目录
JS DOM操作练习
qq_46266956的博客
01-09 620
JS和数学图像结合，dom操作练习 效果图如下 代码冗杂，功能也不太完善，还有很多缺点 <!DOCTYPE html> <html> <head> <title>demo</title> </head> <body> <input id="btnClick1" type="button" value="sin" onclick="sin1();sin2();"/> <inpu..
学习DOM第一天——案例（用户名显示隐藏内容、关闭广告、下拉菜单、开关灯）
qq_46186155的博客
06-18 868
标题
js_HTML_Dom操作练习
10-15
js_HTML_Dom操作练习，比较基础的
JavaScript学习-Dom(练习)
mashirokayo的博客
08-25 332
JS-Dom练习
JavaScript之DOM案例练习
最新发布
十三阿哥的博客
05-28 646
JavaScript之DOM案例练习
js DOM练习
weixin_45842460的博客
06-02 161
<div class="demo"></div> <script> let canMove = false; var demo = document.querySelector('.demo') let x = 0, y = 0; demo.onmousedown = function (e) { x = e.pageX - demo.offsetLeft; y = e.pageY - demo.of...
js-tetris:git和javascript练习
04-28
本项目"js-tetris"旨在通过实现经典游戏——俄罗斯方块，来帮助开发者巩固JavaScript的基础知识，并体验版本控制工具Git的使用流程。下面我们将深入探讨这个项目中涉及的JavaScript技术要点和Git管理实践。 1. **...
js代码-#20大数据1班——李骏杰
07-15
【标题】"js代码-#20大数据1班——李骏杰" 涉及的知识点主要集中在JavaScript编程语言上，可能与大数据处理和学习环境有关。JavaScript是一种广泛用于前端和后端开发的脚本语言，是Web开发的核心技术之一。在大数据1...
js之操作dom练习 ---- js篇
RONG_YAO的博客
07-22 749
目录 一、history与location练习 1.1、案例一 二、open练习 2.3、open.html 三、Date对象练习 2.1、setFullYear 4.2、div实现的时钟 四、窗口练习 4.1、close关闭窗口 五、拖拽效果 一、history与location练习 1.1、案例一 <HTML> <HEAD> <M...
实现一个鸡肋的功能————写汉字
07-13
同时，由于提到还使用了jQuery，我们也需要引入jQuery库，这样可以方便地进行DOM操作： ```html <script src="path/to/jquery.min.js"> ``` 接下来，我们需要在页面上设置一个元素作为汉字书写的区域。例如，我们...
JS DOM练习
weixin_44154094的博客
01-15 342
练习：做一个可以点击按钮切换图片的网页 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{ margin:0; padding:0; } #pic{ width: 500px; height: 400px; }
JavaScript-DOM练习
weixin_45515107的博客
03-18 4136
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"&g
JS基础之DOM节点和网页元素基本操作练习（一）
ZQsSpace的博客
02-06 496
本篇文章包含了基于DOM节点和网页元素基本操作的3个小练习，用于进一步掌握对DOM节点和网页元素的获取和操作。练习1：模拟点击隐藏显示顶部栏；练习2：模拟添加标签；练习3：模拟简单轮播图；
js DOM 练习题
哈哈绝的博客
10-22 3930
js DOM 练习题 点击按钮，将奇数列的li背景色设置为红色，偶数列li背景色设置为绿色 通过在页面上点击button，实现主题切换 主题1：黑底白字 主题2：粉底绿字 封装一个函数，兼容所有浏览器，通过类名取得标签。 xxx.getElementsByClassName() IE8及以前的浏览器不兼容，定义一个函数，来实现这个功能 点击button，在页面上创建一个三行四列的表格 表格的动态添加、删除 封装函数，实现查找兄弟节点（next、previous），
js之DOM练习题
weixin_30617797的博客
05-06 1207
<!DOCTYPE html> <html> <!-- 需求: 1.写三个按钮： 第一个全选 第二个取消全选 第三个反选 --> <head lang="en"> <meta charset="UTF-8"> <title&g...
【JS-DOM 习题练习】
weixin_44154837的博客
11-04 344
JS——DOM：向上添加内容：单击下面的“添加”按钮，添加标签。
js Dom简单练习题
weixin_30404405的博客
07-30 812
一、js Dom简单练习题 <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> <style> /* #xianshi{ width: 100px; height: 100px; backg...
js练习5 --- DOM结点操作
我的博客
05-20 418
js
JavaScript基础DOM操作小练习（一）
欢迎来到长风沛雨的博客
11-15 2029
整一些可以练着玩的熟悉语法的DOM小例子
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值