<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS基础——自动生成一组新闻</title>
<script>
window.onload = function(){
var oBtn = document.getElementById('bnt1');
var oUl = document.getElementById('list');
var arr = [
'新闻内容一新闻内容一新闻内容一新闻内容一',
'新闻内容二新闻内容二新闻内容二新闻内容二',
'新闻内容三新闻内容三新闻内容三新闻内容三',
'新闻内容四新闻内容四新闻内容四新闻内容四',
'新闻内容五新闻内容五新闻内容五新闻内容五'
];
var onOff = true;
oBtn.onclick = function(){
if(onOff){
for(var i=0; i<arr.length; i++){
oUl.innerHTML += '<li>'+ arr[i] +'</li>';
}
}
onOff = false;
};
};
</script>
</head>
<body>
<input id="bnt1" type="button" value="自动生成一组新闻">
<ul id="list"></ul>
</body>
</html>
思路:
通过自定义属性,定义一个开关,默认是true,然后点击按钮,通过for循环生成所有li,再把生成的所有li塞给ul,这样点击按钮就能生成一组新闻了,为了让它只能生成一次,所以,当它循环结束时,我们再把开关定义为false,这样再次点击就不会继续生成一组新闻了。