原生js实现留言板

最新推荐文章于 2023-04-13 17:46:11 发布

QSZHT

最新推荐文章于 2023-04-13 17:46:11 发布

阅读量434

点赞数 1

分类专栏： javascript 文章标签： javascript html css js

本文链接：https://blog.csdn.net/weixin_42380671/article/details/104713787

版权

javascript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

直接上代码！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言</title>
    <style>
        .head{
            width: 90%;
            padding: 5px 5%;
            height: 40px;
        }
        .content{
            width: 90%;
            padding: 20px 5%;
            height: 140px;
        }
        label{
            width: 5%;
            height: 30px;
        }
        input{
            width:100%;
            height: 30px;
        }
        textarea{
            width: 100%;
            height: 100px;
        }
        button{
            float: right;
        }
        h1{
            text-align: center;
        }
        table{
            width: 90%;
            margin: 5%;
            border-collapse: collapse;
        }
        th{
            background-color: #2c3e50;
            color:white;
            border: 1px solid black;
        }
        td{
            border: 1px solid #3F3F3F;
        }
    </style>
</head>
<body>
    <div class="main">
        <h1>留言板</h1>
        <div class="head">
            <label for="name">昵称：</label><br>
            <input type="text" id="name">
        </div>
        <div class="content">
            <label for="content">内容：<br>
            </label><textarea maxlength="300" id="content"></textarea><br>
            <button type="button" onclick="submitComment()">发表留言</button>
        </div>
        <div class="footer">
            <table>
              <thead>
                  <tr>
                      <th>序号</th>
                      <th>昵称</th>
                      <th>内容</th>
                  </tr>
              </thead>
                <tbody id="tab">

                </tbody>
            </table>
        </div>
    </div>
</body>
<script>
    var arr=[];//定义一个数组容器
        //提交留言
       function submitComment() {
           var name=document.getElementById('name');
           var content=document.getElementById('content');
           if(name.value==''||content.value==''){
               return alert('昵称或内容不能为空');
           }
            //把提交的数据追加到arr数组中
           arr.push({names:name.value,contents:content.value});
           //清空
           name.value='';
           content.value='';
           //调用showComment方法
           showComment();
       }
       //展示留言
       function showComment() {
           var str='';//定义一个空字符串
           //遍历循环数组
           //方法1
           // for (var i=0;i<arr.length;i++){
           //     var x=i+1;
           //     str+="<tr><td>"+ x +"</td>"+ "<td>"+arr[i].names+"</td>"+"<td>"+arr[i].contents+"</td></tr>";
           //
           // }
           //方法2
           // for (let i in arr){
           //     console.log(typeof (i));//输出 string
           //     var x=parseInt(i)+1;//parseInt方法把i从字符串转换成数字，再进行运算
           //     str+="<tr><td>"+ x +"</td>"+ "<td>"+arr[i].names+"</td>"+"<td>"+arr[i].contents+"</td></tr>";
           // }

           //方法3
           arr.forEach(function (v,i,arr) {
                var x=i+1;
               str+="<tr><td>"+ x +"</td>"+ "<td>"+arr[i].names+"</td>"+"<td>"+arr[i].contents+"</td></tr>";
           });
           document.getElementById('tab').innerHTML=str;
       }
</script>
</html>

效果图：
在这里插入图片描述

QSZHT

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
原生js实现留言板

直接上代码！<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>留言</title> <style> .head{ width: 90%; ...
复制链接

扫一扫

专栏目录