JS基础——自动生成一组新闻

来源：互联网发布：怎么学编程语言编辑：程序博客网时间：2024/06/13 14:40

<!doctype html><html><head><meta charset="utf-8"><title>JS基础——自动生成一组新闻</title><script>window.onload = function(){varoBtn = 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，这样再次点击就不会继续生成一组新闻了。

0 0