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

    文章目录

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

    前言

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

    一、页面的开关灯

    1.成果图：

     

    2.需求：

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

    3.JS实现过程：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>开关灯练习title>
    9.     <link rel="stylesheet" href="./CSS/reset.css">
    10.     <style>
    11.         /* 灯泡区域外部容器样式设置 */
    12.         .light-wrapper {
    13.             width: 200px;
    14.             height: 250px;
    15.             position: relative;
    16.             margin: 100px auto;
    17.         }
    18.  
    19.         .light {
    20.             width: 100%;
    21.             height: 200px;
    22.             background-color: yellow;
    23.             border-radius: 50%;
    24.             position: absolute;
    25.             z-index: 10;
    26.         }
    27.  
    28.         .base {
    29.             width: 140px;
    30.             height: 80px;
    31.             background-color: silver;
    32.             position: absolute;
    33.             z-index: 5;
    34.             top: 150px;
    35.             left: 15%;
    36.             border-radius: 90%;
    37.         }
    38.  
    39.         /* 按钮样式设置 */
    40.         #btn {
    41.             height: 80px;
    42.             width: 80px;
    43.             margin-left: 47.5%;
    44.             font-size: 22px;
    45.             border-radius: 50%;
    46.         }
    47.     style>
    48. head>
    49.  
    50. <body>
    51.     
    52.     <div class="light-wrapper">
    53.         
    54.         <div class="light" id="light">div>
    55.         
    56.         <div class="base" id="base">div>
    57.     div>
    58.     
    59.     <div>
    60.         <button id="btn">OPENbutton>
    61.     div>
    62.  
    63.  
    64.     
    65.     <script>
    66.         //  获取 id 为 btn 的按钮 
    67.         var btn = document.getElementById('btn');
    68.  
    69.         // 获取页面元素 body
    70.         var body = document.body;
    71.  
    72.         // 获取元素灯泡
    73.         var light = document.getElementById('light');
    74.  
    75.         // 获取元素灯泡底座
    76.         var base = document.getElementById('base');
    77.  
    78.         console.log(light);
    79.         // 设置标识符
    80.         var flag = true;
    81.         // 设置按钮的点击事件
    82.         btn.onclick = function () {
    83.             flag = !flag;
    84.             if (flag) {
    85.                 btn.innerText = 'OPEN';
    86.                 body.style.backgroundColor = '#fff';
    87.                 light.style.backgroundColor = 'yellow';
    88.                 base.style.backgroundColor = 'silver';
    89.             } else {
    90.                 btn.innerText = 'CLOSE';
    91.                 body.style.backgroundColor = 'black';
    92.                 light.style.backgroundColor = 'gray';
    93.                 base.style.backgroundColor = 'silver';
    94.             }
    95.  
    96.         }
    97.     script>
    98.  
    99.  
    100. body>
    101.  
    102. html>

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

    1.成果图：

    2.需求：

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

    3.JS实现过程 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>用户登录title>
    9.     <style>
    10.         /* 提示信息外部容器样式设置 */
    11.         .wrapper {
    12.             width: 310px;
    13.             height: 150px;
    14.             background-color: rgba(203, 229, 232, 0.83);
    15.             margin: 100px auto;
    16.         }
    17.  
    18.         /* 标题样式设置 */
    19.         .word {
    20.             background-color: pink;
    21.             font-size: 20px;
    22.             padding-left: 40px;
    23.         }
    24.  
    25.         /* 当前时间区域样式设置 */
    26.         #time {
    27.             padding-left: 20px;
    28.         }
    29.  
    30.         /* 提示信息区域样式设置 */
    31.         #msg {
    32.             padding-left: 20px;
    33.             font-size: 20px;
    34.         }
    35.     style>
    36. head>
    37.  
    38. <body>
    39.     
    40.     <div class="wrapper">
    41.         
    42.         <p class="word">Bonsoir:欢迎你的登录！p>
    43.         
    44.         <p id="time">p>
    45.         
    46.         <div id="msg">div>
    47.     div>
    48.  
    49.     
    50.     <script>
    51.         // 获取显示当前时间元素
    52.         var time = document.getElementById('time');
    53.  
    54.         // 获取提示信息区域元素
    55.         var msg = document.getElementById('msg');
    56.  
    57.         // 获取当前系统时间
    58.         var now = new Date();
    59.  
    60.         // 分别获取时间分量
    61.         var year = now.getFullYear();
    62.         var month = now.getMonth() + 1;
    63.         var date = now.getDate();
    64.         var day = now.getDay();
    65.         var hours = now.getHours();
    66.         var minutes = now.getMinutes();
    67.         var seconds = now.getSeconds();
    68.         var dateNow = year + '-' + month + '-' + date + ' ' + '周' + day + '  ' + hours + ':' + minutes + ':' + seconds;
    69.         time.innerText = '当前时间是： ' + dateNow;
    70.     
    71.         // 根据时间进行提示判断
    72.         if (hours < 12) {
    73.             msg.innerText = '上午好呀，Bonsoir!';
    74.         } else if (hours < 17) {
    75.             msg.innerText = '下午好呀，Bonsoir!';
    76.         } else {
    77.             msg.innerText = '晚上好呀，Bonsoir!';
    78.         }
    79.     script>
    80. body>
    81.  
    82. html>

    三、广告的打开与关闭

    1.成果图：

    2.需求：

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

    3.JS实现过程：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>广告的打开与关闭title>
    9.     <link rel="stylesheet" href="./CSS/reset.css">
    10.     <style>
    11.         /*表单区域外部容器样式设置*/
    12.         form {
    13.             width: 300px;
    14.             height: 350px;
    15.             background-color: rgba(205, 228, 236, 0.934);
    16.             margin: 100px auto 0 auto;
    17.         }
    18.  
    19.         /* 按钮样式设置 */
    20.         button {
    21.             width: 60px;
    22.             height: 40px;
    23.         }
    24.  
    25.         /* 广告区域样式设置 */
    26.         .banner {
    27.             width: 100%;
    28.             height: 200px;
    29.             margin-top: 20px;
    30.             background-color: pink;
    31.             font-weight: bold;
    32.         }
    33.     style>
    34. head>
    35.  
    36. <body>
    37.     
    38.     <form action="#">
    39.         
    40.         <button id="btn">关闭button>
    41.         
    42.         <div class="banner">我是一个广告！div>
    43.     form>
    44.  
    45.  
    46.     
    47.     <script>
    48.         // 获取广告区域
    49.         var div = document.getElementsByTagName('div')[0];
    50.         // 获取按钮
    51.         var btn = document.getElementById('btn');
    52.  
    53.         // 设置标识符
    54.         var flag = true;
    55.         // 设置按钮的点击事件
    56.         btn.onclick = function () {
    57.             flag = !flag;
    58.             if (flag) {
    59.                 btn.innerText = '关闭';
    60.                 div.style.visibility = 'visible';
    61.             } else {
    62.                 btn.innerText = '打开';
    63.                 div.style.visibility = 'hidden';
    64.             }
    65.         }
    66.     script>
    67.  
    68. body>
    69.  
    70. html>

    四、输入框的文字隐藏

    1.成果图：

     2.需求：

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

    3.JS实现过程：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>输入框文字样式设置title>
    9.     <link rel="stylesheet" href="./CSS/reset.css">
    10.     <style>
    11.         /* 输入框外部容器样式设置 */
    12.         .wrapper {
    13.             width: 350px;
    14.             margin: 100px auto 0 auto;
    15.         }
    16.  
    17.         /* 输入框样式设置 */
    18.         #input {
    19.             width: 300px;
    20.             height: 30px;
    21.             outline: none;
    22.         }
    23.     style>
    24. head>
    25.  
    26. <body>
    27.     
    28.     <form class="wrapper" action="#">
    29.         
    30.         <input type="text" id="input" placeholder="请输入您的用户名：">
    31.     form>
    32.  
    33.     
    34.     <script>
    35.         // 获取输入框
    36.         var input = document.getElementById('input');
    37.         // 为输入框设置获取焦点与失去焦点事件
    38.         input.onfocus = function () {
    39.             input.placeholder = '';
    40.         }
    41.         input.onblur = function () {
    42.             input.placeholder = '请输入您的用户名：';
    43.         }
    44.  
    45.  
    46.     script>
    47. body>
    48.  
    49. html>

    五、页面密码框

    1.成果图：

    2.需求：

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

    3.JS实现过程： 

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>页面密码框title>
    9.     <link rel="stylesheet" href="./JS/font_3547761_ecdde3pwrko/iconfont.css">
    10.     <link rel="stylesheet" href="./CSS/reset.css">
    11.     <style>
    12.         /* 输入框外部容器样式设置 */
    13.         .wrapper {
    14.             width: 300px;
    15.             position: relative;
    16.             margin: 100px auto 0 auto;
    17.         }
    18.  
    19.         /* 输入框样式设置 */
    20.         #input {
    21.             width: 100%;
    22.             height: 30px;
    23.             outline: none;
    24.         }
    25.  
    26.         /* 小图标样式设置 */
    27.         i {
    28.             position: absolute;
    29.             top: 10px;
    30.             right: 7px;
    31.             cursor: pointer;
    32.         }
    33.     style>
    34. head>
    35.  
    36. <body>
    37.     
    38.     <div class="wrapper">
    39.         
    40.         <input type="text" id="input">
    41.         
    42.         <i class="iconfont" id="eyes">i>
    43.     div>
    44.  
    45.     
    46.     <script>
    47.         // 获取小眼睛图标
    48.         var eyes = document.getElementById('eyes');
    49.         // 获取输入框
    50.         var input = document.getElementById('input');
    51.         // 设置标识符
    52.         var flag = true;
    53.         // 为小眼睛设置点击事件
    54.         eyes.onclick = function () {
    55.             flag = !flag;
    56.             if (flag) {
    57.                 eyes.innerHTML = '';
    58.                 input.type = 'text';
    59.             } else {
    60.                 eyes.innerHTML = '';
    61.                 input.type = 'password';
    62.             }
    63.         }
    64.     script>
    65. body>
    66.  
    67. html>

    总结

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

  • 相关阅读:
    BIM算量与传统算量软件的对比和模型精准解决方案
    STM32单片机初学7-USART串口通信
    【论文阅读】MobileNetV4 - Universal Models for the Mobile Ecosystem
    Valkyrie网络测试仪的使用技巧100例--No.000 目录篇
    基于华为云IOT平台实现多节点温度采集(STM32+NBIOT)
    《安富莱嵌入式周报》第323期：NASA开源二代星球探索小车, Matlab2023b，蓝牙照明标准NLC, Xilinx发布电机套件，Clang V17发布
    支付宝支付接口的调用
    给定一个大小为 n 的数组 nums ，返回其中的多数元素
    2310D库功能还是语言功能
    JVM阶段（4）-回收策略
  • 原文地址：https://blog.csdn.net/Bonsoir777/article/details/126437634