JavaScript

超轻量级php框架startmvc

JavaScript简单实现的仿微博留言功能示例

更新时间:2020-08-11 23:36 作者:startmvc
本文实例讲述了JavaScript简单实现的仿微博留言功能。分享给大家供大家参考,具体如下:&l

本文实例讲述了JavaScript简单实现的仿微博留言功能。分享给大家供大家参考,具体如下:


<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>微博留言</title>
</head>
<script>
window.onload=function(){
 var text=document.getElementById('text');
 var btn =document.getElementById('btn');
 var oul =document.getElementsByClassName('content')[0];
 btn.onclick=function(){
 var oli= document.createElement('li')
 oli.innerHTML=text.value;
 var arr= document.getElementsByTagName('li');
 if(arr.length>0){
 oul.insertBefore(oli,arr[0])
 }else{
 oul.appendChild(oli)
 }
 }
}
</script>
<body>
 <input type="text" placeholder="请输入您的留言" id="text" />
 <input type="button" value="留言" id="btn">
 <ul class="content">
 </ul>
</body>
</html>

使用在线HTML/CSS/JavaScript代码运行工具:http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行结果: