JavaScript-4.5-BOM 与 DOM-案例

最新推荐文章于 2024-10-28 18:25:21 发布

原创最新推荐文章于 2024-10-28 18:25:21 发布 · 489 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#BOM #DOM

WEB前端同时被 2 个专栏收录

61 篇文章

订阅专栏

JavaScript

27 篇文章

订阅专栏

JavaScript-4.5-BOM 与 DOM-案例

案例
- 一：简单的留言板

案例

一：简单的留言板

输入昵称和评论内容，单击“提交内容”按钮，可以将最新的评论插入到已有评论的下方
昵称和评论内容为空时，不能提交
提交后获取当前时间

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>留言栏</title>
		<style type="text/css">
			#wrap{
				width: 600px;
				margin:50px auto;
				padding:0 20px 20px 20px;
				border:1px solid #dcdcdc;
			}
			#com{
				border-top:1px solid #dcdcdc;
				border-bottom:1px solid #dcdcdc;
				padding-top: 20px;
				font-size:12px;
				font-weight:lighter;
			}
			#com span{
				font-weight:bold;
				font-size:14px;
				margin-left:10px;
			}
			#com time{
				float:right;
			}
			#com p{
				font-weight:bold;
				font-size:14px;
			}
			#com td{
				font-size:12px;
				font-weight:lighter;
			}
			#comContent{
				height: 80px;
				width:400px;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<h3>最新评论</h3>
			<div id="com">
				<div id="comment">
					网友<span>jack</span>
					<time>2019年11月13日</time>
					<p>学习使我快乐!</p>
				</div>
			</div>
			<h3>发表评论</h3>
			<div id="addComment">
				<table>
					<tr>
						<td >昵称：</td>
						<td><input type="text" id="name"></td>
					</tr>
					<tr>
						<td>评论内容：</td>
					</tr>
					<tr>
						<td colspan="2"><textarea id="comContent"></textarea></td>
					</tr>
					<tr>
						<td></td>
						<td align='right'><button onclick="addComment()">提交评论</button></td>
					</tr>
				</table>
			</div>
		</div>
	</body>
	<script type="text/javascript">

		function getNowFormatDate() {
        var date = new Date();    // 获取当前的时间
        var year = date.getFullYear();  // 获取当前时间的年
        var month = date.getMonth()+1;   // 获取当前时间的月
        var strDate = date.getDate();     // 获取当前的日     
        var hours = date.getHours();        // 获取当前的时
        var minutes = date.getMinutes();   // 获取当前时间的分
        var seconds = date.getSeconds();    // 获取当前时间秒
        // 月份设置
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        // 日设置
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        // 时设置
        if(hours>=0&&hours<=9){
        	hours="0"+hours;
        }
        // 分设置
        if(minutes>=0&&minutes<=9){
        	minutes="0"+minutes;
        }
        // 秒设置
        if(seconds>=0&&seconds<=9){
        	seconds="0"+seconds;
        }
        var currentdate = year + '年' + month + '月' + strDate + '日' + " "+ hours + ":" + minutes + ":" + seconds;
        return currentdate;
    }


		var idNum = 0;
		function addComment(){
			var inputValue = document.getElementById('name').value;      // 获取昵称的值
			var textValue = document.getElementById('comContent').value;  // 获取评论内容

			// 判断昵称和评论内容是否为空
			if(inputValue==''){
				alert('昵称不能为空');
			}
			if(textValue==''){
				alert('评论内容不能为空');
			}

            idNum++;
			var comContent = document.getElementById('comment');   // 获取comment元素节点
			var newComment = comContent.cloneNode(true);   // 复制comContent所有元素节点，包括子元素
			newComment.setAttribute('id',"comment"+idNum);   // 给新复制的节点设置属性id，并随着idNum自加改变属性值

			newComment.getElementsByTagName('span')[0].innerText = inputValue;   // 将昵称的值赋值到新复制的span上
			newComment.getElementsByTagName('time')[0].innerText = getNowFormatDate();
			newComment.getElementsByTagName('p')[0].innerText = textValue;   // 将评价的内容赋值到新复制的p上

			var commentDiv = document.getElementById('com');
			commentDiv.appendChild(newComment);            // 在commentDiv后添加，在comContent后添加不行


            // 初始化昵称和评价内容
			document.getElementById('name').value = '';
			document.getElementById('comContent').value = '';
		}
	</script>
</html>

效果动态图
在这里插入图片描述