自动生成一组新闻

最新推荐文章于 2020-12-03 10:18:17 发布

原创最新推荐文章于 2020-12-03 10:18:17 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

98 篇文章

订阅专栏

本文介绍了一个简单的JavaScript程序，用于在网页上自动生成新闻列表。通过点击按钮，可以在页面上追加预设的新闻条目。文章还探讨了如何避免重复点击按钮导致多次追加相同新闻的方法。

这里写图片描述

html:

<input type="button" value="自动生成5条新闻" id="btn">
<ul id="list"></ul>

js:

window.onload = function(){
    var arr = [
        '我是第一条新闻',
        '我是第二条新闻',
        '我是第三条新闻',
        '我是第五条新闻'
    ];
    var btn = document.getElementById('btn');
    var list = document.getElementById('list');

    btn.onclick = function(){
        for(var i=0;i<arr.length;i++){
            list.innerHTML += '<li>'+arr[i]+'</li>';//添加就是+=，如果是一个的话就直接是=
        }
    }
}

注意：
1、list.innerHTML +=加等是追加（累加），如果只有一个就直接写加号
2、点击一次追加一组新闻，继续点击会继续追加一组新闻；
我们希望点击一下按钮后就不能继续点击，怎么解决这个问题呢？

方法一：让按钮点击一次之后就不能再次点击，禁用按钮（不推荐）

btn.onclick = function(){
    btn.disabled = 'true';//点击一次按钮之后禁用该按钮

    for(var i=0;i<arr.length;i++){
        list.innerHTML += '<li>'+arr[i]+'</li>';
    }
}

方法二：点击之后让按钮隐藏（不推荐）

btn.onclick = function(){
    btn.style.display = 'none';//点击之后让按钮隐藏
    for(var i=0;i<arr.length;i++){
        list.innerHTML += '<li>'+arr[i]+'</li>';
    }
}

方法三：先清空，再显示一组新闻（性能差，不推荐）

btn.onclick = function(){
    list.innerHTML = ''             ;
    for(var i=0;i<arr.length;i++){
        list.innerHTML += '<li>'+arr[i]+'</li>';
    }
}

方法四：进行判断（代码多，但性能好；推荐）

var onOff = true;//设置一个开关，让其为真

btn.onclick = function(){
    if(onOff){//如果为真，那么就执行;如果为假就不执行
        for(var i=0;i<arr.length;i++){
            list.innerHTML += '<li>'+arr[i]+'</li>';
        }
    }
    onOff = false;//点击完之后，开关关闭(为假)              
}