• 【简单的留言墙】HTML+CSS+JavaScript

                                                               目标：做一个简单的留言墙

                                            

    1.首先我们用HTML的一些标签，初步构造区域 样式。

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>留言墙title>
    6.     <style>
    7.         /* ...... */ 
    8.     <style>
    9. head>
    10. <body>
    11.  
    12.     <h1>留言墙h1>
    13.     <p>输入内容后，点击提交即可p>
    14.  
    15.     <div>
    16.         <span>谁：span>
    17.         <input type="text">
    18.     div>
    19.     <div>
    20.         <span>对谁：span>
    21.         <input type="text">
    22.     div>
    23.     <div>
    24.         <span>说：span>
    25.         <input type="text">
    26.     div>
    27.     <div>
    28.         <button>提交button>
    29.     div>
    30.     <div>
    31.         <button>撤销button>
    32.     div>
    33.  
    34.  
    35. body>
    36. html>

                                                                                  

    2.上面操作已经初步完成布局，接下来在style标签中书写CSS代码,利用各种选择器设置。使文字居中，并且改变文字颜色。

    1. <style>
    2.         /* 各种选择器 类选择器 ID选择器 伪类选择器 后代选择器 子选择器 并集选择器 */
    3.  
    4.         h1 {
    5.             /* 使h1标签中的文字样式居中 */
    6.             text-align: center;
    7.         }
    8.  
    9.         p {
    10.             /* 使p标签中的文字样式居中 */
    11.             text-align: center;
    12.             /* 改变文字颜色 */
    13.             color: darkgray;
    14.         }
    15.  
    16. style>

    3.文字已经居中，但是下面的输入框，按钮等还没居中，由于他们都被设置在div标签中，接下来可以对所有在div标签中的属性使用弹性布局。设置这些元素的水平排列方式。

    1. <style>
    2.         h1 {
    3.             /* 使h1标签中的文字样式居中 */
    4.             text-align: center;
    5.         }
    6.  
    7.         p {
    8.             /* 使p标签中的文字样式居中 */
    9.             text-align: center;
    10.             color: darkgray;
    11.         }
    12.  
    13.         div {
    14.             /* 开启弹性布局 */
    15.             display: flex;
    16.             /* 设置元素水平方向排列问题 居中排列 */
    17.             justify-content: center;
    18.             /* 设置每个div标签中元素外边框距离 即元素与元素之间的距离 */
    19.             /* 15px auto 意思为 该元素的上下外边框为15像素 左右自适应排布 */
    20.             margin: 15px auto;
    21.         }
    22.  
    23.  
    24.     style>

     

    4.位置居中问题已经解决，但是会发现输入框及文字排列还并不整齐。这是因为我们并未对span标签里的文字及input标签设置各自宽度及高度，一旦设置就会各自居左排布。

    1. <style>
    2.  
    3.         h1 {
    4.             /* 使h1标签中的文字样式居中 */
    5.             text-align: center;
    6.         }
    7.  
    8.         p {
    9.             /* 使p标签中的文字样式居中 */
    10.             text-align: center;
    11.             color: darkgray;
    12.         }
    13.  
    14.         div {
    15.             /* 开启弹性布局 */
    16.             display: flex;
    17.             /* 设置元素水平方向排列问题 居中排列 */
    18.             justify-content: center;
    19.             /* 设置每个div标签中元素外边框距离 即元素与元素之间的距离 */
    20.             /* 15px auto 意思为 该元素的上下外边框为15像素 左右自适应排布 */
    21.             margin: 15px auto;
    22.         }
    23.  
    24.         span {
    25.             /* 设置宽度 */
    26.             width: 100px;
    27.             /* 设置高度 */
    28.             height: 25px;
    29.         }
    30.  
    31.         input {
    32.             /* 宽度 */
    33.             width: 200px;
    34.             height: 25px;
    35.         }
    36.         
    37. style>

          

    5. 设置button按钮的宽度，文字颜色，按钮颜色

    1. <style>
    2.         h1 {
    3.             /* 使h1标签中的文字样式居中 */
    4.             text-align: center;
    5.         }
    6.  
    7.         p {
    8.             /* 使p标签中的文字样式居中 */
    9.             text-align: center;
    10.             color: darkgray;
    11.         }
    12.  
    13.         div {
    14.             /* 开启弹性布局 */
    15.             display: flex;
    16.             /* 设置元素水平方向排列问题 居中排列 */
    17.             justify-content: center;
    18.             /* 设置每个div标签中元素外边框距离 即元素与元素之间的距离 */
    19.             /* 15px auto 意思为 该元素的上下外边框为15像素 左右自适应排布 */
    20.             margin: 15px auto;
    21.         }
    22.  
    23.         span {
    24.             /* 设置宽度 */
    25.             width: 100px;
    26.             /* 设置高度 */
    27.             height: 25px;
    28.         }
    29.  
    30.         input {
    31.             /* 宽度 */
    32.             width: 200px;
    33.             height: 25px;
    34.         }
    35.  
    36.         button {
    37.             /* 文字颜色 */
    38.             color: white;
    39.  
    40.             /* 背景颜色 */
    41.             background-color: orange;
    42.  
    43.             /* 按钮宽度 */
    44.             width: 300px;
    45.  
    46.             /* 边框颜色 去掉黑边框 */
    47.             border: none;
    48.  
    49.             /* 设置按钮高度 */
    50.             height: 30px;
    51.         }
    52.  
    53.     style>

           

     6.基本布局已经完成，但还存在几个问题

    6.1 点击按钮无反应，使用伪类选择器进行设置

    1. <style>
    2.         h1 {
    3.             /* 使h1标签中的文字样式居中 */
    4.             text-align: center;
    5.         }
    6.  
    7.         p {
    8.             /* 使p标签中的文字样式居中 */
    9.             text-align: center;
    10.             color: darkgray;
    11.         }
    12.  
    13.         div {
    14.             /* 开启弹性布局 */
    15.             display: flex;
    16.             /* 设置元素水平方向排列问题 居中排列 */
    17.             justify-content: center;
    18.             /* 设置每个div标签中元素外边框距离 即元素与元素之间的距离 */
    19.             /* 15px auto 意思为 该元素的上下外边框为15像素 左右自适应排布 */
    20.             margin: 15px auto;
    21.         }
    22.  
    23.         span {
    24.             /* 设置宽度 */
    25.             width: 100px;
    26.             /* 设置高度 */
    27.             height: 25px;
    28.         }
    29.  
    30.         input {
    31.             /* 宽度 */
    32.             width: 200px;
    33.             height: 25px;
    34.         }
    35.  
    36.         button {
    37.             /* 文字颜色 */
    38.             color: white;
    39.  
    40.             /* 背景颜色 */
    41.             background-color: orange;
    42.  
    43.             /* 按钮宽度 */
    44.             width: 300px;
    45.  
    46.             /* 边框颜色 去掉黑边框 */
    47.             border: none;
    48.  
    49.             /* 设置按钮高度 */
    50.             height: 30px;
    51.         }
    52.  
    53.         /* 伪类选择器 设置按钮按下时的变化 */
    54.         button:active {
    55.             background-color: darkorange;
    56.         }
    57.  
    58.     style>

    6.2.输入框有黑边框问题 还有光标显示位置太靠左。

    以下代码有所省略，突出了重点，还是利用CSS选择器设置属性。

    1. input {
    2.             /* 宽度 */
    3.             width: 200px;
    4.             /* 设置高度 */
    5.             height: 25px;
    6.             /* 消除输入框黑框 */
    7.             outline: none;
    8.             /* 光标位置 */
    9.             padding-left: 5px ;
    10.         }

    6.3.通过网页中的检查查看发现我们所设置的输入框元素的宽度应该是30px,而这里却显示29.91px,显然有问题。原因是与浏览器的自动设置有关，为防止这些细节出错，最好再加上一段代码。

    1. /* *通配符 */
    2.         * {
    3.             margin: 0;
    4.             padding: 0;
    5.             box-sizing: border-box;
    6.         }

     最终宽度成功设置为25。

    6.4.设置高度，使整体高居中度。

    1.         h1 {
    2.             /* 使h1标签中的文字样式居中 */
    3.             text-align: center;
    4.             /* 设置外边框 上为100高度 下为20高度 左右自适应 */
    5.             margin: 100px 20px auto;
    6.         }
    7.  
    8.         p {
    9.             /* 使p标签中的文字样式居中 */
    10.             text-align: center;
    11.             color: darkgray;
    12.             /* 设置外边框 */
    13.             /* 设置外边框 上为20高度 下为20高度 左右自适应 */
    14.             margin: 20px 20px auto;
    15.         }

    6.5.设置背景图片，及整体高度 宽度 100% 即跟随浏览器大小的变化而变化。

    1. html body {
    2.             width: 100%;
    3.             background-image: url("背景.png");
    4.             /* 图片全覆盖且不重复 */
    5.             background-repeat: no-repeat;
    6.             background-size: cover;
    7.             height: 100%;
    8.         }

    7. 接下来用到 JavaScript 进行行为交互。

    1.  <script>
    2.         //querySelector('选择器字符串')  api
    3.         //获取选择器元素
    4.         let body = document.querySelector('body');
    5.         //获取input选择器元素
    6.         let inputs = document.querySelectorAll('input');
    7.         //获取提交选择器元素
    8.         let submit = document.querySelector('#submit');
    9.  
    10.         //点击提交操作
    11.         submit.onclick = function () {
    12.  
    13.             //获取输入框里的信息
    14.             let a = inputs[0].value;
    15.             let b = inputs[1].value;
    16.             let c = inputs[2].value;
    17.  
    18.             //三个输入框右空时，
    19.             if(a=='' || b=='' || c=='') {
    20.                 //提示内容不能为空
    21.                 alert("内容不能为空");
    22.                 return;
    23.             }
    24.  
    25.             /* 构造新的div 即目的是将留言设置在新的构造的div标签中，并加入到目前页面中呈现*/
    26.             let newDiv = document.createElement('div');
    27.  
    28.             //为新构造的div标签起个类名
    29.             newDiv.className = 'rows';
    30.  
    31.             //获取时间
    32.             let myDate = new Date();
    33.             let myTime=myDate.toLocaleString( );
    34.  
    35.             //设置新构造的div标签的内容
    36.             newDiv.innerHTML = a + '对' + b + '说' + c +'  '+ myTime;
    37.  
    38.             //将新的div标签加入到当前页面HTML中
    39.             body.appendChild(newDiv);
    40.  
    41.             //提交成功后输入框清空效果
    42.             for(let input of inputs) {
    43.                 input.value = '';
    44.             }
    45.  
    46.             //撤销按钮 为了区分两个按钮元素 可以设置类名或ID名 再写类选择器 或 ID选择器 再调用
    47.             //获取撤销选择器元素  #revoke ID选择器
    48.             let revoke = document.querySelector('#revoke');
    49.  
    50.             //点击撤销后的动作
    51.             revoke.onclick = function () {
    52.                 //获取所有新添加的DIV,因为上面设置了类名，所以这里获取类名
    53.                 let rev = document.querySelectorAll('.rows');
    54.                 if(rev==null || rev.length==0) {
    55.                     return;
    56.                 }
    57.                 //删除最新添加的div
    58.                 body.removeChild(rev[rev.length-1]);
    59.             }
    60.  
    61.         }
    62.  
    63.     script>

    8.完整代码

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>留言墙title>
    6.     <style>
    7.         /* 各种选择器 类选择器 ID选择器 伪类选择器 后代选择器 子选择器 并集选择器 */
    8.         html body {
    9.             width: 100%;
    10.             background-image: url("背景.png");
    11.             background-repeat: no-repeat;
    12.             background-size: cover;
    13.             height: 100%;
    14.         }
    15.  
    16.         /* *通配符 */
    17.         * {
    18.             margin: 0;
    19.             padding: 0;
    20.             box-sizing: border-box;
    21.         }
    22.  
    23.         h1 {
    24.             /* 使h1标签中的文字样式居中 */
    25.             text-align: center;
    26.             /* 设置外边框 上为100高度 下为20高度 左右自适应 */
    27.             margin: 100px 20px auto;
    28.         }
    29.  
    30.         p {
    31.             /* 使p标签中的文字样式居中 */
    32.             text-align: center;
    33.             color: darkgray;
    34.             /* 设置外边框 */
    35.             /* 设置外边框 上为20高度 下为20高度 左右自适应 */
    36.             margin: 20px 20px auto;
    37.         }
    38.  
    39.         div {
    40.             /* 开启弹性布局 */
    41.             display: flex;
    42.             /* 设置元素水平方向排列问题 居中排列 */
    43.             justify-content: center;
    44.             /* 设置每个div标签中元素外边框距离 即元素与元素之间的距离 */
    45.             /* 15px auto 意思为 该元素的上下外边框为15像素 左右自适应排布 */
    46.             margin: 15px auto;
    47.         }
    48.  
    49.         span {
    50.             /* 设置宽度 */
    51.             width: 100px;
    52.             /* 设置高度 */
    53.             height: 25px;
    54.         }
    55.  
    56.         input {
    57.             /* 宽度 */
    58.             width: 200px;
    59.             /* 设置高度 */
    60.             height: 25px;
    61.             /* 消除输入框黑框 */
    62.             outline: none;
    63.             /* 光标位置 */
    64.             padding-left: 5px ;
    65.         }
    66.  
    67.         button {
    68.             /* 文字颜色 */
    69.             color: white;
    70.  
    71.             /* 背景颜色 */
    72.             background-color: orange;
    73.  
    74.             /* 按钮宽度 */
    75.             width: 300px;
    76.  
    77.             /* 边框颜色 去掉黑边框 */
    78.             border: none;
    79.  
    80.             /* 设置按钮高度 */
    81.             height: 30px;
    82.         }
    83.  
    84.         /* 伪类选择器 设置按钮按下时的变化 */
    85.         button:active {
    86.             background-color: darkorange;
    87.         }
    88.  
    89.     style>
    90. head>
    91. <body>
    92.  
    93.     <h1>留言墙h1>
    94.     <p>输入内容后，点击提交即可p>
    95.  
    96.     <div>
    97.         <span>谁：span>
    98.         <input type="text">
    99.     div>
    100.     <div>
    101.         <span>对谁：span>
    102.         <input type="text">
    103.     div>
    104.     <div>
    105.         <span>说：span>
    106.         <input type="text">
    107.     div>
    108.     <div>
    109.         <button id="submit">提交button>
    110.     div>
    111.     <div>
    112.         <button id="revoke">撤销button>
    113.     div>
    114.  
    115.     <script>
    116.         //querySelector('选择器字符串')  api
    117.         //获取选择器元素
    118.         let body = document.querySelector('body');
    119.         //获取input选择器元素
    120.         let inputs = document.querySelectorAll('input');
    121.         //获取提交选择器元素
    122.         let submit = document.querySelector('#submit');
    123.  
    124.         //点击提交操作
    125.         submit.onclick = function () {
    126.  
    127.             //获取输入框里的信息
    128.             let a = inputs[0].value;
    129.             let b = inputs[1].value;
    130.             let c = inputs[2].value;
    131.  
    132.             //三个输入框右空时，
    133.             if(a=='' || b=='' || c=='') {
    134.                 //提示内容不能为空
    135.                 alert("内容不能为空");
    136.                 return;
    137.             }
    138.  
    139.             /* 构造新的div 即目的是将留言设置在新的构造的div标签中，并加入到目前页面中呈现*/
    140.             let newDiv = document.createElement('div');
    141.  
    142.             //为新构造的div标签起个类名
    143.             newDiv.className = 'rows';
    144.  
    145.             //获取时间
    146.             let myDate = new Date();
    147.             let myTime=myDate.toLocaleString( );
    148.  
    149.             //设置新构造的div标签的内容
    150.             newDiv.innerHTML = a + '对' + b + '说' + c +'  '+ myTime;
    151.  
    152.             //将新的div标签加入到当前页面HTML中
    153.             body.appendChild(newDiv);
    154.  
    155.             //提交成功后输入框清空效果
    156.             for(let input of inputs) {
    157.                 input.value = '';
    158.             }
    159.  
    160.             //撤销按钮 为了区分两个按钮元素 可以设置类名或ID名 再写类选择器 或 ID选择器 再调用
    161.             //获取撤销选择器元素  #revoke ID选择器
    162.             let revoke = document.querySelector('#revoke');
    163.  
    164.             //点击撤销后的动作
    165.             revoke.onclick = function () {
    166.                 //获取所有新添加的DIV,因为上面设置了类名，所以这里获取类名
    167.                 let rev = document.querySelectorAll('.rows');
    168.                 if(rev==null || rev.length==0) {
    169.                     return;
    170.                 }
    171.                 //删除最新添加的div
    172.                 body.removeChild(rev[rev.length-1]);
    173.             }
    174.  
    175.         }
    176.  
    177.     script>
    178.  
    179.  
    180.  
    181. body>
    182. html>

                                                  

  • 相关阅读:
    分类预测 | MATLAB实现WOA-CNN-LSTM-Attention数据分类预测
    Linux进程控制（一）
    13个小众有趣的网站，只有程序员才看得懂
    Java架构师分布式搜索数据迁移
    java毕业设计对外汉语教学辅助平台Mybatis+系统+数据库+调试部署
    前端面试宝典
    Android问题笔记 - NoSuchmethodException: could not find Fragment constructor
    vue中node-sass下载失败Failed at the node-sass@7.0.1 postinstall script.解决方法
    Linux--进程间通信
    grep命令用法
  • 原文地址：https://blog.csdn.net/m0_73381672/article/details/133520167