JS# 关闭定时器setInterval实现公告左右轮播获取每月最大的天数如何跳出forEach循环

Posted 2022-11-26 LRcoding

1. 关闭定时器 setInterval

使用 clearInterval(timer) 将指定的定时器关闭

// 每隔 1s往控制台打印一次时间
var myVar = setInterval(function()  
    var d = new Date();
    console.info(d) 
, 1000);

// 关闭定时器
function myStopFunction() 
    clearInterval(myVar);

2. JS实现marquee轮播功能

HTML：

<div class="myapp">
    <div><h1>公告内容</h1></div>
    <div id="myMarquee" style="width:60%;overflow: hidden;">
        <div style="width:2000px;">
            <!-- 主体内容 -->
            <ul id="myMarquee_1" style="float:left;">
                <li>系统将于XXX日升级，请注意！</li>
                <li>测试公告呀！</li>
                <li>德玛西亚！！！</li>
            </ul>

            <!-- 用于实现无缝轮播 -->
            <ul id="myMarquee_2" style="float:left;">
            </ul>
        </div>
    </div>
</div>

CSS：

* 
    margin: 0;
    padding: 0;


body 
    font-family: "microsoft yahei", "宋体";
    color: #333;
    font-size: 16px;
    background-position: 0px 170px


li 
    list-style: none;
    float: left; 
    text-align: center; 
    height: 38px;
    margin-top: 0;
    margin-left: 60px;   /* 控制两个公告之间的距离 */


.myapp 
    width: 800px;
    margin: 0 auto;

JS：

var obj = document.getElementById("myMarquee");
var obj1 = document.getElementById("myMarquee_1");
var obj2 = document.getElementById("myMarquee_2");

// js无缝滚动代码
function seamlessRolling() 
    if (obj2.offsetWidth - obj.scrollLeft <= 0) 
        obj.scrollLeft -= obj1.offsetWidth;
     else 
        obj.scrollLeft++;
    


function marqueeStart() 
    obj2.innerhtml = obj1.innerHTML;
    var marqueeVar = window.setInterval("seamlessRolling()", 30);
    obj.onmouseover = function () 
        window.clearInterval(marqueeVar);
    
    obj.onmouseout = function () 
        marqueeVar = window.setInterval("seamlessRolling()", 30);
    


marqueeStart();

3. 获取每月最大的天数

使用 getDate() 方法

// 获取2022年10月，最大的天数（使用 ,0）
new Date(2022, 10, 0).getDate()   // 31

4. 跳出 forEach循环

使用 try....catch，然后在特定时机抛出异常

let arr = [1, 2, 3, 4];
try 
    arr.forEach(item => 
        if (item === 2) 
            throw Error()
        
        console.info(item)
    )
 catch (error) 
    // 跳出循环后，要执行的操作