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

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) {
    // 跳出循环后,要执行的操作
}
  • 0
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:技术工厂 设计师:CSDN官方博客 返回首页
评论

打赏作者

LRcoding

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值