[对象]显示最新输入的新闻信息

最新推荐文章于 2022-12-03 06:24:01 发布

慧、新

最新推荐文章于 2022-12-03 06:24:01 发布

阅读量364

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/Endeavor_No1/article/details/77924340

版权

js 专栏收录该内容

54 篇文章 0 订阅

订阅专栏

<!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>

慧、新

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[对象]显示最新输入的新闻信息

显示最新输入的新闻信息 #newslist{line-height:2;} #newslist time{margin-left:10px;color:#999;} window.onload = function(){ // 初始数据 var datalist = [{ title:'秦时明月', time:'2016-10-1' },{ t
复制链接

扫一扫