如何使用Javascript定时器的即将到来的登陆页面

DebugUsery
115 阅读8分钟

使用Javascript计时器的即将推出的登陆页面

即将推出的着陆页是一个临时主页，告知访问者你的网站正在建设中或即将推出。

由于它缺乏页眉或页脚，访客无法浏览到你网站的其他部分，因此必须抓住正在开发的内容，尽可能多地提供信息。

每一个即将推出的页面都包括一个鼓励访问者在稍后时间返回的声明，以及有关正在开发的网站的任何其他相关信息。

本文将教你如何制作一个即将推出的登陆页面，但首先要做的是，你将学习JavaScript的计时器，让你开始。

JavaScript 计时器概述

计时器是一个允许我们在预定的时间运行程序的功能。计时器可以用来推迟代码的执行，这样它就不会在一个事件或一个页面加载的同时完成。

例如，定时器可以用来定期改变你的网站的广告横幅，或显示一个实时时钟，以及其他一些事情。

在JavaScript中，有两个定时器函数：setTimeout() 和setInterval() 。浏览器允许实现定时器函数，但它们的实现方式因浏览器不同而不同。

在浏览器中，窗口界面是主要定时器功能的母体。由于窗口接口使其元素在主JavaScript范围内全局可用，setTimeout() ，可以在浏览器控制台中使用。

延迟后的代码执行

setTimeout() 函数用于在给定的时间过后，只运行一个函数或一段代码一次。

语法

let timeout_id = setTimeout(function[, delay, arg1, arg2,arg3, ...]); //syntax 1
//or
let timeout_id= setTimeout(function[, delay]); //syntax 2
//or
let timeout_id = setTimeout(code[, delay]); //syntax 3

你必须给出两个参数来利用这个函数。一个描述要执行的函数的参数，和一个可选的Delay 参数，该参数决定在执行该函数之前要等待多长时间。

例子

让我们继续并创建HTML文档index.html 。复制并粘贴以下代码片断。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DelayGreetings</title>
</head>
<body>
    <button type="button" onclick="setTimeout(delayGreetings,2000)">click Me</button>
</body>
   <script>
function delayGreetings() {
    console.log('Hello John Doe!');
}
</script>
</html>

你注意到，当上述代码在浏览器上执行时，按钮的点击在浏览器控制台中2s后显示Hello John Doe! 。

任务1

使用setTimeout() 函数，在各自的延迟后打印以下两条信息。

  • 4秒后，显示问候语 "Hello John Doe after 4secs"。
  • 8秒后，显示问候语 "8秒后，你好，无名氏"。

约束：在你的解决方案中，你只能定义一个函数，其中包括内联函数。因此，大量的setTimeout() ，将不得不使用相同的代码。

解决方法

  • 任务1可以用多种方式解决，但这是其中之一。
const delayGreetings = (delay) => {
  console.log("Hello John Doe after " + delay + " seconds");
};
setTimeout(delayGreetings, 4 * 1000, 4);
setTimeout(delayGreetings, 8 * 1000, 8);
  • 我给delayGreetings() 一个延迟参数，并在显示的信息中利用了延迟参数的值。结果，根据我们提供给函数的延迟值，它可能会打印不同的消息。
  • setTimeout() 之后，我在两次delayGreetings() ，一次是4秒，另一次是8秒。在这两个setTimeout调用中，都发送了一个third parameter ，以表示delayGreetings() 的参数delay 。

定期执行代码

类似地，setInterval() 方法可以用来在一定的时间间隔内执行一个函数或一段给定的代码。

语法

let interval_id = setInterval(func, [delay, arg1, arg2, ...]); //syntax 1
//or
let interval_id = setInterval(function[, delay]); //syntax 2
//or
let interval_id= setInterval(code, [delay]); // syntax 3

首先定义两个参数，其中一个参数定义了要执行的function ，另一个参数提供了period (one second = 1000 milliseconds) ，在这个参数中，要等到function 执行完毕。

例子

setInterval(
  () => console.log("Hello John Doe after every 3 seconds"),
  3000);

上述代码在浏览器控制台中每隔3秒执行一次。

任务2

  • 使用setInterval() ，在每隔一秒后显示你的本地计算机时间。

解决方法

解决任务2的方法之一是如下。

  • 创建一个HTML文档，将其保存为index.html 。
  • 在这个页面中，在关闭body 标签后，在<script></script> 标签内添加JavaScript代码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DelayGreetings</title>
</head>
<body>
    
    <p>current time on your computer is: <span id="clock"></span></p>
   
</body>
   <script>
        function showTime() {
            var d = new Date();
            document.querySelector("#clock").innerHTML = d.toLocaleTimeString();
        }
        setInterval(showTime, 1000);
        </script>
</html>

每隔1秒，showTime() 方法就会被执行。它每次执行时都会检索你的计算机的当前时间并在你的浏览器中显示。

取消一个定时器

使用setTimeout() 和setInterval() 方法将返回一个整数值，通过其unique ID 来识别这些方法所产生的定时器。

你可以用这个ID ，停用或清除定时器，并通过这个ID ，提前停止代码的执行，使其失效或清除。有两种方法可用于清除定时器：clearTimeout() 和clearInterval() 。

要清除一个特定的setTimeout() 计时器ID ，使用这个函数，如下面的例子所示。

  • 创建一个HTML文档，将其保存为index.html 。
  • 在这个页面中，在关闭body 标签后，在<script></script> 标签内添加JavaScript代码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DelayGreetings</title>
</head>
<body>

    <button type="button" onclick="delayedGreetings();">Show greetings After Two Seconds</button>
        
    <button type="button" onclick="clearGreetings();">Cancel greetings Before It is Display</button>
   
</body>
    <script>
        
          function displayGreetings() {
          console.log('Hello John Doe.');
        }
        var timeoutID;
        
        function delayedGreetings() {
          timeoutID = setTimeout(displayGreetings, 2000);
        }
        function clearGreetings() {
          clearTimeout(timeoutID);
        }
        </script>
</html>

也可以使用clearInterval() 函数来删除或禁用setInterval() 计时器。要做到这一点。

  • 创建一个HTML文档，将其保存为index.html 。
  • 在这个页面中，在body标签结束后，在<script></script> 标签内添加JavaScript代码。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DelayGreetings</title>
</head>
<body>
    <p>The current time on your computer is: <span id="clock"></span></p>
        
    <button onclick="stopClock();">Stop Clock</button>
</body>
   <script>
        var intervalID;
        function showTime() {
            var d = new Date();
            document.getElementById("clock").innerHTML = d.toLocaleTimeString();
        }
        function stopClock() {
            clearInterval(intervalID);
        }
        var intervalID = setInterval(showTime, 1000);
        </script>
</html>

clearTimeout() 和 可以互换使用。不过，为了清晰和代码的可维护性，你应该避免这样做。clearInterval()

以下是开发一个成功的即将推出的登陆页面的五个要点。

1.1.发表声明，但不妨碍他人。

集中在标题和文章的摘要上。专注于你所提供的东西，以及它将如何提高你试图接触的人的生活。

例如：
在描述的模板中，标题 "THE REAL SOUND "唤起了适当的情感。访问这个网站的人至少会根据标题有一个想法，那就是下载和收听高清点击。

2.你只需要填写一个表格。

一个典型的登陆页面可以有多达两到三个注册页面，然而，一个即将推出的登陆页面只能有一个。在即将到来的着陆页上，你只需关注客户的眼睛，这一点很关键，因为你让越多的用户加入和注册，你就越有可能失去他们。

在下面的例子模板中，你可以在getNotified 按钮上添加一个模态表格，这样当消费者点击它时，就会出现一个模态表格，让他们注册并得到提醒。

3.设置一个倒计时

设置倒计时是显著提高你即将推出的页面的转换率的一种方法。可以用一个实体的、可调整的倒计时钟来做这件事。如果你没有一个具体的推出日期，你可以说 "今年秋天到达 "或 "圣诞节前推出 "之类的话。

4.它应该容易分享。

如果你提供奖品，你的登陆页面将赢得更多的社会分享。在社交媒体平台上分享它，以参加比赛。

5.让它具有移动性

这强调了页面应该是响应式的，意味着无论用户是在电脑、iPad还是手机上，所有功能都应该是一样的。

模板部分

在这一部分，我设计了一个响应式的即将到来的登陆页面。我使用了一些Bootstrap来实现页面的响应性。请确保你确定上面分享的五个专业技巧。

large-devices medium-devices small-devices

源代码

  • 创建一个目录coming-soon-landing-page ，这将是你的主文件夹。
  • 创建一个HTML文档，在主文件夹中保存为index.html 。
  • 在主文件夹中创建3个子文件夹。css,img 和js 。
  • 在css 子文件夹中，你将存储所有你的stylesheets ，并在HTML文档的<head> 部分将它们链接起来。
  • js 子文件夹将包含你的 文件，例如 。JavaScript main.js
  • 所有的图片将被放在img 子文件夹中。

标记部分

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Coming Soon Landing Page</title>
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <header>
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <h1 class="display-1 text-center">
              THE <br />
              REAL <br />
              SOUND
            </h1>
            <p class="lead text-center">
              listen to hd music and download for free.
            </p>
            <img
              src="img/tw.png"
              alt="twitter"
              class="m-3"
              width="40px"
              style="border-radius: 20px; cursor: pointer;"
            />
            <img
              src="img/fb.png"
              alt="Facebook"
              class="m-3"
              width="40px"
              style="border-radius: 20px; cursor: pointer;"
            />
            <img
              src="img/gp.png"
              alt="google"
              class="m-3"
              width="40px"
              style="border-radius: 20px; cursor: pointer;"
            />
            <button type="button" class="btn btn-primary">getNotified</button>
          </div>
          <div class="col-md-8 mt-3" style="display: flex;align-items:center;">
            <div
              class="card m-3"
              style="width: 350px; background-color: #20201f; cursor: pointer;"
            >
              <img
                src="img/album01.jpg"
                alt="album01"
                width="350"
                class="card-img-top"
              />
              <div class="card-body">
                <h5 class="card-title">ALBUM 01</h5>
                <p class="card-text">Lorem ipsum dolor sit amet consectetur</p>
                <a href="#" class="btn btn-primary d-block">Listen Now</a>
              </div>
            </div>
            <div
              class="card"
              style="width: 350px; background-color: #20201f; cursor: pointer;"
            >
              <img
                src="img/album01.jpg"
                alt="album02"
                width="350"
                class="card-img-top"
              />
              <div class="card-body">
                <h5 class="card-title">ALBUM 02</h5>
                <p class="card-text">Lorem ipsum dolor sit amet consectetur</p>
                <a href="#" class="btn btn-primary d-block">Listen Now</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="col-md-12">
            <p class="lead text-center">Support My Music</p>
            <h4 class="display-4 text-center" style="letter-spacing: 12px;">
              COMING SOON
            </h4>
            <hr />
            <p id="launch" class="lead"></p>
          </div>
        </div>
      </div>
    </header>

    <script src="js/main.js"></script>
  </body>
</html>

Css部分/style.css/

header {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url(../img/background.jpg);
  height: 100vh;
  background-position: center;
  background-size: cover;
  color: #fff;
}
.card img {
  border-radius: 30% 70% 0% 100% / 0% 0% 100% 100%;
}
hr {
  width: 50%;
  margin: 30px auto;
  border: #f0f0ea solid 1.5px;
}
#launch {
  text-align: center;
  font-size: 40px;
}

JavaScript部分//main.js

let countDate = new Date("sep 1,2021 00:00:00").getTime();

let x = setInterval(() => {
  let now = new Date().getTime();

  let dist = countDate - now;

  let days = Math.floor(dist / (1000 * 60 * 60 * 24));
  let hours = Math.floor((dist % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  let minutes = Math.floor((dist % (1000 * 60 * 60)) / (1000 * 60));
  let seconds = Math.floor((dist % (1000 * 60)) / 1000);

  document.querySelector("#launch").innerHTML =
    days + " d " + hours + " h " + minutes + " m " + seconds + " s ";

  if (dist < 0) {
    clearInterval(x);
    document.querySelector("#launch").innerHTML = "EXPIRED";
  }
}, 1000);
  • 这里有一个github资源库的链接，你可以在那里查看源代码。

结论

由于JavaScript引擎只有一个线程，异步事件被迫在队列中等待执行。setTimeout() 和setInterval() 运行异步代码的方式从根本上讲是不同的。

所有这些信息都是非常必要和重要的。了解JavaScript引擎的工作原理是构建复杂应用程序代码的绝佳基础，尤其是考虑到通常会发生大量的异步事件。

建立一个对用户有吸引力的即将到来的登陆页面将提高吸引用户在你的网站上注册的速度。要做到这一点，确保你的登陆页面是响应式的，包括一个倒计时，并包括你的社交媒体链接。

此外，确保你的网站能够通知人们，以便他们可以用他们的电子邮件地址订阅，以便在页面准备推出时得到提醒。

avatar
文章
阅读
粉丝