【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. IDEA快捷键（未使用）

    1.ctrl Ctrl + Y 删除光标所在行 或 删除选中的行 Ctrl + W 递进式选择代码块.可选中光标所在的单词或段落,连续按会在原有选中的基础上再扩展选中范围 Ctrl + E 显示最近打 ...

  2. 一凡老师亲录视频，Python从零基础到高级进阶带你飞

    如需Q群交流 群:893694563 不定时更新2-3节视频 零基础学生请点击 Python基础入门视频 如果你刚初入测试行业 如果你刚转入到测试行业 如果你想学习Python,学习自动化,搭建自动化 ...

  3. Redis三种集群模式介绍

    三种集群模式 redis有三种集群模式,其中主从是最常见的模式. Sentinel 哨兵模式是为了弥补主从复制集群中主机宕机后,主备切换的复杂性而演变出来的.哨兵顾名思义,就是用来监控的,主要作用就是 ...

  4. Linux环境yum,安装MySQL

    Linux 使用yum命令安装mysql [安装步骤] 1.先检查系统是否安装有mysql [root@localhost ~]#yum list installed mysql* [root@loc ...

  5. 【LeetCode】300.最长递增子序列——暴力递归（O(n^3)），动态规划（O(n^2)），动态规划+二分法（O(nlogn)）

    算法新手,刷力扣遇到这题,搞了半天终于搞懂了,来这记录一下,欢迎大家交流指点. 题目描述: 给你一个整数数组 nums ,找到其中最长严格递增子序列的长度. 子序列是由数组派生而来的序列,删除(或不删 ...

  6. 题解 「SDOI2017」硬币游戏

    题目传送门 Description 周末同学们非常无聊,有人提议,咱们扔硬币玩吧,谁扔的硬币正面次数多谁胜利. 大家纷纷觉得这个游戏非常符合同学们的特色,但只是扔硬币实在是太单调了. 同学们觉得要加强 ...

  7. ToString()字符串转换你用正确了吗？

    前言 在开发中,ToString()这个方法太方便了,以致于误解大家转换时都是直接Object.ToString()直接转换, 其实不然, 一般都是转之前先判断是否为null后再进行转换,否则会直接报 ...

  8. ffmpeg剪视频

    ffmpeg裁剪合并视频   ffmpeg提供简单的命令参数: ffmpeg -ss START -t DURATION -i INPUT -vcodec copy -acodec copy OUTP ...

  9. Java：并发笔记-05

    Java:并发笔记-05 说明:这是看了 bilibili 上 黑马程序员 的课程 java并发编程 后做的笔记 4. 共享模型之内存 本章内容 上一章讲解的 Monitor 主要关注的是访问共享变量 ...

  10. 同人逼死官方系列！基于sddc 协议的SDK框架 sddc_sdk_lib 解析

    基于sddc 协议的SDK框架 sddc_sdk_lib 解析 之前在移植 libsddc 库的时候感觉官方 demo 太低效了(￣.￣),复制粘贴代码好累,而且写出一个BUG,其他复制的代码整个就裂 ...