JS实现倒计时和文字滚动的效果实例

请看下方内容。

JS 实现倒计时效果

HTML 结构

首先，我们需要在 HTML 中创建一个对应的元素，用于显示倒计时效果，例如：

<div id="countdown"></div>

JS 代码实现

然后，我们需要编写 JS 代码来控制倒计时效果。具体实现过程如下：

1. 初始化倒计时时间

let countDownDate = new Date("Jan 1, 2022 00:00:00").getTime();

1. 定义并启动倒计时函数

let countdown = setInterval(function() {
  // 获取当前时间
  let now = new Date().getTime();

  // 计算剩余时间
  let distance = countDownDate - now;

  // 判断时间是否已到
  if (distance < 0) {
    clearInterval(countdown);   // 停止倒计时
    document.getElementById("countdown").innerHTML = "EXPIRED";   // 显示过期信息
  } else {
    // 计算并显示值
    let days = Math.floor(distance / (1000 * 60 * 60 * 24));
    let hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    let minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    let seconds = Math.floor((distance % (1000 * 60)) / 1000);
    document.getElementById("countdown").innerHTML =  days + "d " + hours + "h "
    + minutes + "m " + seconds + "s ";
  }
}, 1000);  // 每秒执行一次

JS 实现文字滚动效果

HTML 结构

首先，我们需要在 HTML 中创建一个对应的元素，用于显示滚动效果，例如：

<div id="scroll" style="overflow: hidden;" >
  <marquee>这里是滚动文本的内容</marquee>
</div>

其中，<marquee> 标签是用于实现文字滚动效果的，<div> 标签的 overflow 样式设置为 hidden 则可以让文本超出其显示范围被隐藏。

JS 代码实现

然后，我们需要编写 JS 代码来控制文字滚动效果。具体实现过程如下：

1. 获取 marquee 标签中的文本内容。

let text = document.getElementsByTagName("marquee")[0].innerHTML;

1. 将文本内容拷贝两份，并拼接在一起。

let newText = text + text;

1. 将拼接后的文本内容赋值给 marquee 标签。

document.getElementsByTagName("marquee")[0].innerHTML = newText;

1. 编写 JS 代码控制滚动效果

let marquee = document.getElementsByTagName("marquee")[0];
let scrollAmount = 2;
let scrollDelay = 50;
let direction = "left";   // 滚动方向

// 开启滚动
marquee.start();

// 改变滚动方向和速度
marquee.dir = direction;
marquee.scrollAmount = scrollAmount;
marquee.scrollDelay = scrollDelay;

以上就是两条使用 JS 实现倒计时和文字滚动效果的完整攻略，希望能对您有所帮助。