摘要：基本思路:要完成聊天信息的生成,原理其實并不難.首先在<body>內(nèi)部創(chuàng)立一個文本框<ul>標(biāo)簽和一個<button>按鈕,再在之后創(chuàng)立一個空的有序列表<ol>.之后在腳本中分別獲取到這三個標(biāo)簽并存放在相應(yīng)的變量中,通過對此button綁定一個帶有函數(shù)功能的單擊事件而實現(xiàn)此功能.注意事項:在此函數(shù)中,先創(chuàng)建一個<li>標(biāo)簽,并通過連接in
基本思路:要完成聊天信息的生成,原理其實并不難.首先在<body>內(nèi)部創(chuàng)立一個文本框<ul>標(biāo)簽和一個<button>按鈕,再在之后創(chuàng)立一個空的有序列表<ol>.之后在腳本中分別獲取到這三個標(biāo)簽并存放在相應(yīng)的變量中,通過對此button綁定一個帶有函數(shù)功能的單擊事件而實現(xiàn)此功能.
注意事項:
在此函數(shù)中,先創(chuàng)建一個<li>標(biāo)簽,并通過連接innerHTML使獲得的值為文本框中輸入的值,再通過appendChild方法,使創(chuàng)立的li標(biāo)簽是之前空標(biāo)簽<ol>下方的子標(biāo)簽,從而可以輸出多行顯示多行.
在自己輸入代碼時,在獲取相關(guān)元素時應(yīng)該是使用document.getElementsByName('name值')之類的方法,但是第一次敲時忘記了在getElementsByName('name值')之前要加上document,使此功能無法實現(xiàn),需要多注意.
完整代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>聊天信息的生成原理</title>
</head>
<body>
<input type="text" name="text" placeholder="請輸入內(nèi)容">
<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
老師總結(jié)：寫的不錯。做項目就是多想多做，繼續(xù)加油。