js實(shí)現(xiàn)新聞?shì)啿バЧ?/h1>
更新時(shí)間：2022年07月13日 15:37:16 作者：混度思緒
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)新聞?shì)啿バЧ闹惺纠a介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js實(shí)現(xiàn)新聞?shì)啿バЧ木唧w代碼，供大家參考，具體內(nèi)容如下
原生js實(shí)現(xiàn)新聞?shì)啿バЧ?，附詳?xì)注釋
<!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>
? ? <input type="text" id="input">
? ? <button id="btn">插入</button>
? ? <ul id="box"></ul>
? ? <script>
? ? ? ? // 定義數(shù)組
? ? ? ? var news = ['111111111111','2222222222222222222','33333333333333'];
? ? ? ? // 獲取元素
? ? ? ? var input = document.getElementById('input');
? ? ? ? var btn = document.getElementById('btn');
? ? ? ? var box = document.getElementById('box');
? ? ? ? // 把原有的新聞顯示在頁(yè)面中
? ? ? ? carousel();
? ? ? ? // 把渲染結(jié)構(gòu)的內(nèi)容封裝為一個(gè)函數(shù)
? ? ? ? function carousel(){
? ? ? ? ? ? // 定義一個(gè)空字符串
? ? ? ? ? ? var str = '';
? ? ? ? ? ? // 遍歷數(shù)組,把數(shù)組里面的每一個(gè)值都重復(fù)拿出來(lái)添加到 li 標(biāo)簽里再賦值給str
? ? ? ? ? ? news.forEach(function(item){
? ? ? ? ? ? ? ? str +=`<li>${item}</li>`;
? ? ? ? ? ? });
? ? ? ? ? ? // 把 str 的內(nèi)容給到 box 結(jié)構(gòu)里
? ? ? ? ? ? box.innerHTML = str;
? ? ? ? }
? ? ? ? // 點(diǎn)擊添加的時(shí)候 把 用戶輸入的內(nèi)容添加到數(shù)組中，再次渲染結(jié)構(gòu)
? ? ? ? btn.onclick = function(){
? ? ? ? ? ? // 為了良好的用戶體驗(yàn) 輸入框中的值不能為空
? ? ? ? ? ? if(!input.value){
? ? ? ? ? ? ? ? // 彈出提示框
? ? ? ? ? ? ? ? alert('輸入框不能為空');
? ? ? ? ? ? ? ? // 這里 return 是中斷循環(huán)的意思
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? // 把內(nèi)容添加到數(shù)組中
? ? ? ? ? ? news.unshift(input.value);
? ? ? ? ? ? // 頁(yè)面中新聞只能為5條，如果超過(guò)5條，把5條之后的數(shù)據(jù)刪除
? ? ? ? ? ? if(news.length>5){
? ? ? ? ? ? ? ? // 只截取頁(yè)面最新的5條新聞
? ? ? ? ? ? ? ? news.splice(5);
? ? ? ? ? ? }
? ? ? ? ? ? // 調(diào)用 渲染結(jié)構(gòu)
? ? ? ? ? ? carousel();
? ? ? ? ? ? // 插入新聞完成后輸入框賦空
? ? ? ? ? ? input.value = '';
? ? ? ? }
? ? ? ? /*
? ? ? ? 【1】間隔執(zhí)行函數(shù),每隔多少時(shí)間去執(zhí)行一次函數(shù)，這里 1000 指的是 1s
? ? ? ? ? ? ? ? setInterval(function(){
? ? ? ? ? ? ? ? ? ? 你需要執(zhí)行的代碼
? ? ? ? ? ? ? ? },1000)
? ? ? ? */
? ? ? ? // 設(shè)置定時(shí)器 ?新聞的滾動(dòng)切換（把數(shù)組中的最后一條數(shù)據(jù) 截取出來(lái)放入數(shù)組中第一條），再次循環(huán) 渲染結(jié)構(gòu)
? ? ? ? setInterval(function(){
? ? ? ? ? ? // pop() 在刪除數(shù)組的最后一個(gè)元素 ?把刪除的數(shù)據(jù)賦值給res
? ? ? ? ? ? var res = news.pop();
? ? ? ? ? ? // unshift() 在數(shù)組的最前面添加一個(gè)元素
? ? ? ? ? ? news.unshift(res);
? ? ? ? ? ? // 調(diào)用函數(shù)，再次渲染結(jié)構(gòu)
? ? ? ? ? ? carousel();
? ? ? ? ? ? // 定時(shí)，時(shí)長(zhǎng)設(shè)置為2s
? ? ? ? },2000);
? ? </script>
</body>
</html>
效果：
初始：
插入數(shù)據(jù)（因?yàn)槲覀冊(cè)O(shè)置了輪播效果，所以新聞會(huì)一直滾動(dòng)）：
插入大于5條：
插入只顯示數(shù)組的最新的五條數(shù)據(jù)，為什么第一條插入4510202不顯示呢，這是因?yàn)榭赡懿迦氲臄?shù)據(jù)類型為整型，在遍歷數(shù)組的時(shí)候跑到前面位置所以不顯示
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
-
Webpack常見靜態(tài)資源處理-模塊加載器（Loaders）+ExtractTextPlugin插件
這篇文章主要介紹了Webpack常見靜態(tài)資源處理-模塊加載器（Loaders）+ExtractTextPlugin插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下 2017-06-06
-
JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建(1)
這篇文章主要介紹了JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建，集合是由一組無(wú)序且唯一的元素組成。數(shù)據(jù)結(jié)構(gòu)中的集合，對(duì)應(yīng)的是數(shù)學(xué)概念當(dāng)中的有限集合；下文詳細(xì)介紹需要的小伙伴可以參考一下 2022-04-04
-
JS小知識(shí)之如何將CSV轉(zhuǎn)換為JSON字符串
CSV文件一般是以逗號(hào)為分隔值的文件(Comma-Separated?Values,CSV,有時(shí)也稱為字符分隔值,因?yàn)榉指糇址部梢圆皇嵌禾?hào)),其文件以純文本形式存儲(chǔ)表格數(shù)據(jù)(數(shù)字和文本),下面這篇文章主要給大家介紹了JS小知識(shí)之如何將CSV轉(zhuǎn)換為JSON字符串的相關(guān)資料,需要的朋友可以參考下 2023-06-06
-
javascript iframe中打開文件,并檢測(cè)iframe存在否
從iframe中打開文件,并檢測(cè)iframe存在否如果說(shuō)只是檢測(cè)頁(yè)面存在否,直接設(shè)置target用偽協(xié)議就可以解決了... 2008-12-12
-
這篇文章主要為大家詳細(xì)的介紹了Bootstrap中Carousel的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下 2016-06-06
-
使用JavaScript解決網(wǎng)頁(yè)圖片拉伸問(wèn)題(推薦)
本文給大家介紹使用javascript解決網(wǎng)頁(yè)圖片拉伸問(wèn)題，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧 2016-11-11
-
js實(shí)現(xiàn)的選擇最快的服務(wù)器轉(zhuǎn)向代碼 2009-04-04
-
做了一個(gè)用戶等級(jí)的進(jìn)度條，只是練手。 2010-07-07
-
javaScript Array（數(shù)組）相關(guān)方法簡(jiǎn)述
javaScript Array（數(shù)組）相關(guān)方法簡(jiǎn)述，讓大家更快的熟悉array數(shù)組的用法。 2009-07-07
-
javascript兩種function的定義介紹及區(qū)別說(shuō)明
javascript兩種function的定義方式function a(){}和a=function(){}具體使用如下，感興趣的朋友可以參考下，希望對(duì)你對(duì)你學(xué)習(xí)function的定義有所幫助 2013-05-05
最新評(píng)論
本文實(shí)例為大家分享了js實(shí)現(xiàn)新聞?shì)啿バЧ木唧w代碼，供大家參考，具體內(nèi)容如下
原生js實(shí)現(xiàn)新聞?shì)啿バЧ?，附詳?xì)注釋
<!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>
? ? <input type="text" id="input">
? ? <button id="btn">插入</button>
? ? <ul id="box"></ul>
? ? <script>
? ? ? ? // 定義數(shù)組
? ? ? ? var news = ['111111111111','2222222222222222222','33333333333333'];
? ? ? ? // 獲取元素
? ? ? ? var input = document.getElementById('input');
? ? ? ? var btn = document.getElementById('btn');
? ? ? ? var box = document.getElementById('box');
? ? ? ? // 把原有的新聞顯示在頁(yè)面中
? ? ? ? carousel();
? ? ? ? // 把渲染結(jié)構(gòu)的內(nèi)容封裝為一個(gè)函數(shù)
? ? ? ? function carousel(){
? ? ? ? ? ? // 定義一個(gè)空字符串
? ? ? ? ? ? var str = '';
? ? ? ? ? ? // 遍歷數(shù)組,把數(shù)組里面的每一個(gè)值都重復(fù)拿出來(lái)添加到 li 標(biāo)簽里再賦值給str
? ? ? ? ? ? news.forEach(function(item){
? ? ? ? ? ? ? ? str +=`<li>${item}</li>`;
? ? ? ? ? ? });
? ? ? ? ? ? // 把 str 的內(nèi)容給到 box 結(jié)構(gòu)里
? ? ? ? ? ? box.innerHTML = str;
? ? ? ? }
? ? ? ? // 點(diǎn)擊添加的時(shí)候 把 用戶輸入的內(nèi)容添加到數(shù)組中，再次渲染結(jié)構(gòu)
? ? ? ? btn.onclick = function(){
? ? ? ? ? ? // 為了良好的用戶體驗(yàn) 輸入框中的值不能為空
? ? ? ? ? ? if(!input.value){
? ? ? ? ? ? ? ? // 彈出提示框
? ? ? ? ? ? ? ? alert('輸入框不能為空');
? ? ? ? ? ? ? ? // 這里 return 是中斷循環(huán)的意思
? ? ? ? ? ? ? ? return;
? ? ? ? ? ? }
? ? ? ? ? ? // 把內(nèi)容添加到數(shù)組中
? ? ? ? ? ? news.unshift(input.value);
? ? ? ? ? ? // 頁(yè)面中新聞只能為5條，如果超過(guò)5條，把5條之后的數(shù)據(jù)刪除
? ? ? ? ? ? if(news.length>5){
? ? ? ? ? ? ? ? // 只截取頁(yè)面最新的5條新聞
? ? ? ? ? ? ? ? news.splice(5);
? ? ? ? ? ? }
? ? ? ? ? ? // 調(diào)用 渲染結(jié)構(gòu)
? ? ? ? ? ? carousel();
? ? ? ? ? ? // 插入新聞完成后輸入框賦空
? ? ? ? ? ? input.value = '';
? ? ? ? }
? ? ? ? /*
? ? ? ? 【1】間隔執(zhí)行函數(shù),每隔多少時(shí)間去執(zhí)行一次函數(shù)，這里 1000 指的是 1s
? ? ? ? ? ? ? ? setInterval(function(){
? ? ? ? ? ? ? ? ? ? 你需要執(zhí)行的代碼
? ? ? ? ? ? ? ? },1000)
? ? ? ? */
? ? ? ? // 設(shè)置定時(shí)器 ?新聞的滾動(dòng)切換（把數(shù)組中的最后一條數(shù)據(jù) 截取出來(lái)放入數(shù)組中第一條），再次循環(huán) 渲染結(jié)構(gòu)
? ? ? ? setInterval(function(){
? ? ? ? ? ? // pop() 在刪除數(shù)組的最后一個(gè)元素 ?把刪除的數(shù)據(jù)賦值給res
? ? ? ? ? ? var res = news.pop();
? ? ? ? ? ? // unshift() 在數(shù)組的最前面添加一個(gè)元素
? ? ? ? ? ? news.unshift(res);
? ? ? ? ? ? // 調(diào)用函數(shù)，再次渲染結(jié)構(gòu)
? ? ? ? ? ? carousel();
? ? ? ? ? ? // 定時(shí)，時(shí)長(zhǎng)設(shè)置為2s
? ? ? ? },2000);
? ? </script>
</body>
</html>效果：
初始：
插入數(shù)據(jù)（因?yàn)槲覀冊(cè)O(shè)置了輪播效果，所以新聞會(huì)一直滾動(dòng)）：
插入大于5條：
插入只顯示數(shù)組的最新的五條數(shù)據(jù)，為什么第一條插入4510202不顯示呢，這是因?yàn)榭赡懿迦氲臄?shù)據(jù)類型為整型，在遍歷數(shù)組的時(shí)候跑到前面位置所以不顯示
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
-
Webpack常見靜態(tài)資源處理-模塊加載器（Loaders）+ExtractTextPlugin插件
這篇文章主要介紹了Webpack常見靜態(tài)資源處理-模塊加載器（Loaders）+ExtractTextPlugin插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06 -
JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建(1)
這篇文章主要介紹了JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建，集合是由一組無(wú)序且唯一的元素組成。數(shù)據(jù)結(jié)構(gòu)中的集合，對(duì)應(yīng)的是數(shù)學(xué)概念當(dāng)中的有限集合；下文詳細(xì)介紹需要的小伙伴可以參考一下2022-04-04 -
JS小知識(shí)之如何將CSV轉(zhuǎn)換為JSON字符串
CSV文件一般是以逗號(hào)為分隔值的文件(Comma-Separated?Values,CSV,有時(shí)也稱為字符分隔值,因?yàn)榉指糇址部梢圆皇嵌禾?hào)),其文件以純文本形式存儲(chǔ)表格數(shù)據(jù)(數(shù)字和文本),下面這篇文章主要給大家介紹了JS小知識(shí)之如何將CSV轉(zhuǎn)換為JSON字符串的相關(guān)資料,需要的朋友可以參考下2023-06-06 -
javascript iframe中打開文件,并檢測(cè)iframe存在否
從iframe中打開文件,并檢測(cè)iframe存在否如果說(shuō)只是檢測(cè)頁(yè)面存在否,直接設(shè)置target用偽協(xié)議就可以解決了...2008-12-12 - 這篇文章主要為大家詳細(xì)的介紹了Bootstrap中Carousel的使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-06-06
-
使用JavaScript解決網(wǎng)頁(yè)圖片拉伸問(wèn)題(推薦)
本文給大家介紹使用javascript解決網(wǎng)頁(yè)圖片拉伸問(wèn)題，本文給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，感興趣的朋友一起看看吧2016-11-11 - js實(shí)現(xiàn)的選擇最快的服務(wù)器轉(zhuǎn)向代碼2009-04-04
- 做了一個(gè)用戶等級(jí)的進(jìn)度條，只是練手。2010-07-07
-
javaScript Array（數(shù)組）相關(guān)方法簡(jiǎn)述
javaScript Array（數(shù)組）相關(guān)方法簡(jiǎn)述，讓大家更快的熟悉array數(shù)組的用法。2009-07-07 -
javascript兩種function的定義介紹及區(qū)別說(shuō)明
javascript兩種function的定義方式function a(){}和a=function(){}具體使用如下，感興趣的朋友可以參考下，希望對(duì)你對(duì)你學(xué)習(xí)function的定義有所幫助2013-05-05