练习-延时的新闻展示（ajax）

最新推荐文章于 2025-04-11 15:47:45 发布

奋斗中的切图猿

最新推荐文章于 2025-04-11 15:47:45 发布

阅读量216

点赞数

分类专栏： ajax

本文链接：https://blog.youkuaiyun.com/weixin_44573096/article/details/109089323

版权

ajax 专栏收录该内容

4 篇文章

订阅专栏

本文汇总了近期全球几大热点事件，包括美国政府停摆期间副总统薪资问题、美国逮捕俄罗斯人引发的外交风波、法国黄背心抗议活动的持续、泰国帕布台风导致的人员伤亡及旅游区被困、五角大楼官员辞职、伊朗军舰计划前往美国海岸、新年首场日偏食的天文奇观，以及英国脱欧协议可能再次推迟表决等国际要闻。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

后台数据：
[“美国政府关门副总统却涨薪？彭斯回应：我不会接受”,“美国以倒卖军火为由逮捕一俄罗斯人俄外交部:不是第一次了”,“新年伊始，“黄背心”重回法国街头”,"‘帕布’袭击泰国至少3人死亡近4万游客被困旅游区",“五角大楼现离职潮？马蒂斯参谋长斯维尼宣布辞职”,“俄媒：伊朗将派军舰前往美国海岸执行任务”,"今年首场日偏食来了！天空中上演’天狗吃太阳’(图)",“外媒：英首相可能再次延后议会表决脱欧协议的日期”,"“映秀好人”离世地震获救者赶来送他最后一程",“乒协将天津权健队改名为天津队改名有何依据？”,“房租抵扣个税运行初期已有中介明言“出现缴税自担””,“山东出台送温暖资金管理办法：每人每年不超过6000元”,“江苏卫视再回应“跳台门”:优酷做法是单方面行为”]

效果：
在这里插入图片描述要求：后台不管删除还是添加数据，页面也会跟着变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 要求：每隔1s钟读取数据的新闻页 -->
    <ul></ul>
    <script src="ajax.js"></script>
    <script>
        var oUl=document.querySelector("ul");
        getDate();
        setInterval(getDate,500);//计时器作用：代替按钮，一删除txt文件里的内容，页面的内容过0.5s就会发生相同的变化，就不用每次按完按钮页面的内容才发生变化
        var str="";
        function getDate(){
            ajax("data2.txt",{
                "sucFn" : function(data){
                    if(str==data){

                    }else{
                        str=data;
                        createLi();
                    }
                },
                // "cache" :true,
            });
        }
        function createLi(){
            oUl.innerHTML="";    //每次获取的数据（data）改变就要重新给str赋值，就要重新创建li，所以要清空之前ul里的内容，要不然就在ul之前的内容上改变
            var arr=JSON.parse(str);
            for(var i=0;i<arr.length;i++){
                var oLi=document.createElement("li");
                oLi.innerHTML=arr[i];
                oUl.appendChild(oLi);
            }
        }
    </script>
</body>
</html>