欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js實(shí)現(xiàn)新聞?shì)啿バЧ?/h1>
 更新時(shí)間：2022年07月13日 15:37:16   作者：混度思緒  
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)新聞?shì)啿バЧ?，文中示例代碼介紹的非常詳細(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ù)類(lèi)型為整型，在遍歷數(shù)組的時(shí)候跑到前面位置所以不顯示

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

  • JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形

    JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形

    這篇文章主要介紹了JavaScript實(shí)現(xiàn)像雪花一樣的Hexaflake分形，文中示例代碼非常詳細(xì)，幫助大家更好的理解和學(xué)習(xí)，感興趣的朋友可以了解下
    2020-07-07
  • 用javascript調(diào)出windows色版的代碼

    用javascript調(diào)出windows色版的代碼

    用javascript調(diào)出windows色版的代碼...
    2007-07-07
  • JS生成隨機(jī)打亂數(shù)組的方法示例

    JS生成隨機(jī)打亂數(shù)組的方法示例

    這篇文章主要介紹了JS生成隨機(jī)打亂數(shù)組的方法,涉及javascript數(shù)組隨機(jī)排序的相關(guān)操作技巧,需要的朋友可以參考下
    2017-12-12
  • Three.js加載外部模型的教程詳解

    Three.js加載外部模型的教程詳解

    這篇文章主要介紹了Three.js外部模型加載的教程詳解,在文章給大家補(bǔ)充介紹了three.js 外部模型加載json的方法，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
    2017-11-11
  • JS圖片懶加載的優(yōu)點(diǎn)及實(shí)現(xiàn)原理

    JS圖片懶加載的優(yōu)點(diǎn)及實(shí)現(xiàn)原理

    這篇文章主要介紹了JS圖片懶加載的優(yōu)點(diǎn)及實(shí)現(xiàn)原理,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-01-01
  • canvas實(shí)現(xiàn)鐘表效果

    canvas實(shí)現(xiàn)鐘表效果

    本文主要分享了canvas實(shí)現(xiàn)鐘表效果的示例代碼。具有很好的參考價(jià)值，下面跟著小編一起來(lái)看下吧
    2017-02-02
  • Javascript之旅 對(duì)象的原型鏈之由來(lái)

    Javascript之旅 對(duì)象的原型鏈之由來(lái)

    本人是Javascript菜鳥(niǎo)，下面是前幾天學(xué)習(xí)Javascript的旅程心得，希望對(duì)和我一樣的入門(mén)者有點(diǎn)用，也希望高手批評(píng)指正。
    2010-08-08
  • 通過(guò)實(shí)例解析JavaScript常用排序算法

    通過(guò)實(shí)例解析JavaScript常用排序算法

    這篇文章主要介紹了通過(guò)實(shí)例解析JavaScript常用排序算法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
    2020-09-09
  • JSON字符串操作移除空串更改key/value的介紹

    JSON字符串操作移除空串更改key/value的介紹

    今天小編就為大家分享一篇關(guān)于JSON字符串操作移除空串更改key/value的介紹，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
    2019-01-01
  • JavaScript預(yù)解析及相關(guān)技巧分析

    JavaScript預(yù)解析及相關(guān)技巧分析

    這篇文章主要介紹了JavaScript預(yù)解析及相關(guān)技巧,結(jié)合實(shí)例形式分析了JavaScript與解析的原理,步驟與相關(guān)技巧,需要的朋友可以參考下
    2016-04-04

最新評(píng)論