摘要：基本思路:要完成聊天信息的生成,原理其实并不难.首先在<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="请输入内容">
<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>
批改老师：查无此人批改时间：2019-03-18 09:11:24
老师总结：写的不错。做项目就是多想多做，继续加油。
