【JavaScript定时器小案例】常见的几种定时器实现的案例

博客说明

文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！

说明

在日常开发中定时器的使用还是挺多的，这里介绍几种比较常见的。

案例一：手机验证码倒计时

代码
<!DOCTYPE html>

<html>

<body>

	<input type="button" value="获取验证码" onclick="settime(this)" />

  <script>

    // 发送验证码

		var countdown = 60;

		function settime(obj) {

       if (countdown === 0) {

          obj.removeAttribute("disabled");

          obj.value="获取验证码";

          countdown = 60;

          return;

       } else {

          obj.setAttribute("disabled", true);

          obj.value = "重新发送(" + countdown + ")";

          countdown--;

       }

       setTimeout(function() {

          settime(obj)

       },1000)

    }

  </script>

</body>

</html>
效果

代码解析

使用setTimeout来模拟倒计时的效果，这其中有小许误差，不过可以在可接受的范围内。

案例二：日历时钟

代码
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>简易时钟</title>

    <style>

        .time{

          width: 300px;

          height: 60px;

          margin:0px auto;

          line-height: 60px;

          text-align: center;

          color: red;

          background-color: yellow;

      }

    </style>

</head>

<body>

    <div id="time" class="time"></div>

</body>

<script>

    setInterval(function(){

        var d = new Date();

        var time = document.getElementById('time');

        //获取当前区域时间并转成字符串

        time.innerHTML = d.toLocaleString();

    },1000);

</script>

</html>
效果

代码解析

利用setInterval每间隔1秒获取一次当前时间

案例三：抽奖

代码
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>抽奖</title>

</head>

<body>

    <input type="button" value="开始" onclick="start()" />

		<input type="button" value="结束" onclick="end()" />

</body>

<div id="num_text">

</div>

<script>

    var i = 1;

    var t = Object;

    function setNum() {

      var res = document.getElementById('num_text')

      res.innerHTML = i;

      res.style.fontSize = '200px'

      i++;

      // 超过100重置

      if(i === 100){

         i = 1;

      }

    }

    function start() {

      t = setInterval(setNum, 10)

    }

    function end() {

      t = clearInterval(t)

    }

</script>

</html>
效果

代码解析

先让一个数开始快速循环，通过使用setInterval完成，当点击结束时，调用clearInterval清除定时器，达到定格的效果，具体循环内可以换成奖品数组或者其他的数据，也能够达到此类效果。

总结

选了三个比较有代表性的案例，pym也可以通过以上三个简单的案例扩充起来，达到锻炼JS的定时器的效果。比如日历时钟的那个，可以做成一个表盘，让时分秒进行转动。

如果点赞有50，就安排上！

感谢

万能的网络

以及勤劳的自己，个人博客，GitHub测试，GitHub

公众号-归子莫，小程序-小归博客

【JavaScript定时器小案例】常见的几种定时器实现的案例的更多相关文章

  1. 动手学习TCP：4种定时器

    上一篇中介绍了TCP数据传输中涉及的一些基本知识点.本文让我们看看TCP中的4种定时器. TCP定时器 对于每个TCP连接,TCP管理4个不同的定时器,下面看看对4种定时器的简单介绍. 重传定时器使用 ...

  2. JavaScript如何工作：垃圾回收机制 + 常见的4种内存泄漏

    原文地址: How JavaScript works: memory management + how to handle 4 common memory leaks 本文永久链接:https://d ...

  3. 常见的七种Hadoop和Spark项目案例

    常见的七种Hadoop和Spark项目案例 有一句古老的格言是这样说的,如果你向某人提供你的全部支持和金融支持去做一些不同的和创新的事情,他们最终却会做别人正在做的事情.如比较火爆的Hadoop.Sp ...

  4. 常见的几种JavaScript内存泄露

    总结一下常见的几种JavaScript内存泄露: 1.意外的全局变量 全局变量属于window对象,所以只会随着window销毁才会销毁. 2.console.log() conaole.log()函 ...

  5. javascript两种定时器的使用及其清除

    <!--示例代码如下:--><!DOCTYPE html> <html> <body> <p>A script on this page s ...

  6. Java常见的几种内存溢出及解决方法

    Java常见的几种内存溢出及解决方法[情况一]:java.lang.OutOfMemoryError:Javaheapspace:这种是java堆内存不够,一个原因是真不够(如递归的层数太多等),另一 ...

  7. JS 跨域问题常见的五种解决方式

    一.什么是跨域? 要理解跨域问题,就先理解好概念.跨域问题是由于javascript语言安全限制中的同源策略造成的. 简单来说,同源策略是指一段脚本只能读取来自同一来源的窗口和文档的属性,这里的同一来 ...

  8. 避免常见的6种HTML5错误用法

    一.不要使用section作为div的替代品 人们在标签使用中最常见到的错误之一就是随意将HTML5的<section>等价于<div>——具体地说,就是直接用作替代品(用于样 ...

  9. javascript学习-原生javascript的小特效（多物体运动效果）

    前些日子看了个视频所以就模仿它的技术来为大家做出几个简单的JS小特效 今天为大家做的是多个物体的运动效果, 1:HTML <body> <ul>       <li> ...

随机推荐

  1. MFC获取文件路径和文件夹路径

    MFC的界面中,需要实现这样两个功能: 1.在界面上加一个按钮,单击按钮弹出一个对话框选择文件,在工程中获得文件的路径: 2.在界面上加一个按钮,单击按钮弹出一个对话框选择文件夹,在工程中获取文件夹的 ...

  2. webpack基本用法及原理（10000+）

    1 webpack是什么 所有工具的出现,都是为了解决特定的问题,那么前端熟悉的webpack是为了解决什么问题呢? 1.1 为什么会出现webpack js模块化: 浏览器认识的语言是HTML,CS ...

  3. mysql从零开始之MySQL 删除数据库

    MySQL 删除数据库 使用普通用户登陆 MySQL 服务器,你可能需要特定的权限来创建或者删除 MySQL 数据库,所以我们这边使用 root 用户登录,root 用户拥有最高权限. 在删除数据库过 ...

  4. torch.nn.Sequential()详解

    参考:官方文档    源码 官方文档 nn.Sequential A sequential container. Modules will be added to it in the order th ...

  5. ArrayList和Vector

    ArrayList和Vector ArrayList ArrayList的注意实现 1.ArrayList可以加入null,并且多个 2.ArrayList是由数组来实现数据存储的 3.ArrayLi ...

  6. WeakMap与Map，使用WeakMap实现深拷贝循环引用问题

    1.Map可以使用任意类型的key值,不限字符串,对象等. 2.WeakMap只能使用对象作为key值,是弱引用,当从WeakMap中移除时,会自动垃圾回收 3.Object只能用基本类型作为key值 ...

  7. 安装多个版本的 JDK

    安装多个版本的 JDK 刚刚开始学 Java 的时候安装了 JDK9 版本,后续发现还是 JDK8 使用的多些,而又不想删除原先版本 因此安装两个版本的 JDK 在需要是切换一下即可 1. 安装第一个 ...

  8. oo第三单元学习总结

    OO第三单元小结 一.JML语言理论基础及工具链梳理 在本单元我们学习了JML语言的一些基础知识,能够让我们看懂简单的JML规格并写出对应代码, 主要用到的知识点有:   1.requires 该子句 ...

  9. Noip模拟78 2021.10.16

    这次时间分配还是非常合理的,但可惜的是$T4$没开$\textit{long long}$挂了$20$ 但是$Arbiter$上赏了蒟蒻$20$分,就非常不错~~~ T1 F 直接拿暴力水就可以过,数 ...

  10. 「笔记」$Min\_25$筛

    总之我也不知道这个奇怪的名字是怎么来的. \(Min\_25\)筛用来计算一类积性函数前缀和. 如果一个积性函数\(F(x)\)在质数单点是一个可以快速计算的关于此质数的多项式. 那么可以用\(Min ...