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

博客说明

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

说明

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

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

代码
  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  5. 	<input type="button" value="获取验证码" onclick="settime(this)" />
  7.   <script>
  8.     // 发送验证码
  9. 		var countdown = 60;
  10. 		function settime(obj) {
  11.        if (countdown === 0) {
  12.           obj.removeAttribute("disabled");
  13.           obj.value="获取验证码";
  14.           countdown = 60;
  15.           return;
  16.        } else {
  17.           obj.setAttribute("disabled", true);
  18.           obj.value = "重新发送(" + countdown + ")";
  19.           countdown--;
  20.        }
  21.        setTimeout(function() {
  22.           settime(obj)
  23.        },1000)
  24.     }
  25.   </script>
  26. </body>
  27. </html>
效果

代码解析

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

案例二：日历时钟

代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>简易时钟</title>
  6.     <style>
  7.         .time{
  8.           width: 300px;
  9.           height: 60px;
  10.           margin:0px auto;
  11.           line-height: 60px;
  12.           text-align: center;
  13.           color: red;
  14.           background-color: yellow;
  15.       }
  16.     </style>
  17. </head>
  18. <body>
  19.     <div id="time" class="time"></div>
  20. </body>
  21. <script>
  22.     setInterval(function(){
  23.         var d = new Date();
  24.         var time = document.getElementById('time');
  25.         //获取当前区域时间并转成字符串
  26.         time.innerHTML = d.toLocaleString();
  27.     },1000);
  28. </script>
  29. </html>
效果

代码解析

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

案例三：抽奖

代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>抽奖</title>
  6. </head>
  7. <body>
  8.     <input type="button" value="开始" onclick="start()" />
  9. 		<input type="button" value="结束" onclick="end()" />
  10. </body>
  11. <div id="num_text">
  12. </div>
  13. <script>
  14.     var i = 1;
  15.     var t = Object;
  16.     function setNum() {
  17.       var res = document.getElementById('num_text')
  18.       res.innerHTML = i;
  19.       res.style.fontSize = '200px'
  20.       i++;
  21.       // 超过100重置
  22.       if(i === 100){
  23.          i = 1;
  24.       }
  25.     }
  26.     function start() {
  27.       t = setInterval(setNum, 10)
  28.     }
  29.     function end() {
  30.       t = clearInterval(t)
  31.     }
  32. </script>
  33. </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. Java两种基础结构

    顺序结构 JAVA的基本结构就是顺序结构,除非特别指明,否则就按照顺序一句一句执行 顺序结构是最简单的算法结构 语句与语句之间,框与框之间是按从上到下的顺序进行的,它是由若干个依次执行的处理步骤组成的 ...

  2. 《HelloGitHub》第 66 期

    兴趣是最好的老师,HelloGitHub 让你对编程感兴趣! 简介 分享 GitHub 上有趣.入门级的开源项目. 这里有实战项目.入门教程.黑科技.开源书籍.大厂开源项目等,涵盖多种编程语言 Pyt ...

  3. 生动直观的Gif图告诉你如何安装Python安装第3方库，在线安装离线安装全都搞定

    前言 学Python的小伙伴都知道,Python学习过程中需要装不少的第3方的库,今天就和大家一起分享下第3方库的安装方法 在线安装(推荐安装式式) 点开Pycharm--file--Project- ...

  4. Gaussion

    # Kernel density estimation import numpy as np import matplotlib.pyplot as plt from scipy.stats impo ...

  5. 基于预计算的全局光照（Global Illumination Based On Precomputation）

    目录 基于图像的光照(Image Based Lighting,IBL) The Split Sum Approximation 过滤环境贴图 预计算BRDF积分 预计算辐射度传输(Precomput ...

  6. Serverless 在大规模数据处理的实践

    作者 | 西流 阿里云技术专家 前言 当您第一次接触 Serverless 的时候,有一个不那么明显的新使用方式:与传统的基于服务器的方法相比,Serverless 服务平台可以使您的应用快速水平扩展 ...

  7. 详解package-lock.json的作用

    目录 详解package-lock.json package-lock.json的作用 版本号的定义规则与前缀对安装的影响 改动package.json后依旧能改变项目依赖的版本 当前项目的真实版本号 ...

  8. C# 三种方式实现Socket数据接收(经典)

    Stream.Read 方法 当在派生类中重写时,从当前流读取字节序列,并将此流中的位置提升读取的字节数. 语法: public abstract int Read(byte[] buffer, in ...

  9. C++ 与 Visual Studio 2019 和 WSL(三)

    头文件 如果不小心修改了 Linux C/C++ 标准头文件,可以下面这样操作进行恢复: 项目 → 重新扫描解决方案

  10. C#特性知识图谱-一、委托

    一. 委托 1.1 委托定义 委托可以看成是一个方法的容器,将某一具体的方法装入后就可以把它当成方法一样调用.一个委托类型的变量可以引用任何一个满足其要求的方法.委托类似于C语言中的函数指针,但并不完 ...