聊天信息的生成原理之自我案例

abstract：基本思路:要完成聊天信息的生成,原理其实并不难.首先在<body>内部创立一个文本框<ul>标签和一个<button>按钮,再在之后创立一个空的有序列表<ol>.之后在脚本中分别获取到这三个标签并存放在相应的变量中,通过对此button绑定一个带有函数功能的单击事件而实现此功能.注意事项:在此函数中,先创建一个<li>标签,并通过连接in

基本思路:要完成聊天信息的生成,原理其实并不难.首先在<body>内部创立一个文本框<ul>标签和一个<button>按钮,再在之后创立一个空的有序列表<ol>.之后在脚本中分别获取到这三个标签并存放在相应的变量中,通过对此button绑定一个带有函数功能的单击事件而实现此功能.

注意事项:

在此函数中,先创建一个<li>标签,并通过连接innerHTML使获得的值为文本框中输入的值,再通过appendChild方法,使创立的li标签是之前空标签<ol>下方的子标签,从而可以输出多行显示多行.
在自己输入代码时,在获取相关元素时应该是使用document.getElementsByName('name值')之类的方法,但是第一次敲时忘记了在getElementsByName('name值')之前要加上document,使此功能无法实现,需要多注意.

完整代码:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>聊天信息的生成原理</title>
</head>
<body>
	<input type="text" name="text" placeholder="请输入内容">&nbsp;&nbsp;
	<button style="border:none; background-color:#294; color: #fff;font-size:18px;font-family: 楷体;cursor:pointer;">点击
	</button>
	<ol></ol>

	<script type="text/javascript">
	let input = document.getElementsByName('text').item(0);
	let button = document.getElementsByTagName('button').item(0);
	let ol = document.getElementsByTagName('ol').item(0);

	button.onclick = function(){
		let li = document.createElement('li');
		li.innerHTML = input.value;
		ol.appendChild(li);
		input.value = '';
	}

	</script>
</body>
</html>

Correcting teacher：查无此人Correction time：2019-03-18 09:11:24
Teacher's summary：写的不错。做项目就是多想多做，继续加油。

聊天信息的生成原理之自我案例

Popular Entries