<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示最新输入的新闻信息</title>
<style>
#newslist{line-height:2;}
#newslist time{margin-left:10px;color:#999;}
</style>
<script>
window.onload = function(){
// 初始数据
var datalist = [{
title:'秦时明月',
time:'2016-10-1'
},{
title:火影忍者',
time:'2014-1-1'
},{
title:'韶华易逝',
time:'2017-2-1'
}];
// 获取页面元素
var news = document.getElementById('news');
var newslist = document.getElementById('newslist');
var btnAdd = document.getElementById('btnAdd');
// 封装显示函数
function render(){
// 把数据显示到页面
var html = '<ul>'
for(var i=0;i<datalist.length;i++){
// 只显示5条
if(i === 5){
break;
}
html += '<li><a href="#">'+ datalist[i].title +'</a><time>'+datalist[i].time+'</time></li>';
}
html += '</ul>';
newslist.innerHTML = html;
}
render();
// 给按钮绑定点击事件
btnAdd.onclick = function(){
// 创建一个对象,用于放置新闻信息
var obj = {title:news.value,time:new Date().toLocaleDateString()};
// 把最新消息写入数组datalist
datalist.unshift(obj);
render();
}
}
</script>
</head>
<body>
<input type="text" id="news"><button id="btnAdd">添加新闻</button>
<div id="newslist">
</div>
</body>
</html>
[对象]显示最新输入的新闻信息
最新推荐文章于 2022-12-03 06:24:01 发布