WebApi入门第十一章(定时器作用及语法)

WebAPI 专栏收录该内容
12 篇文章 1 订阅

1-setInterval

定时器:某一段代码并不是马上执行,而是隔一段时间执行

  • setInterval:创建定时器

    • 特点:一旦创建立即计时,必须要手动停止,否则会无限的每隔一段时间执行代码

  • clearInterval(定时器id):清除定时器

    • 一个页面可以创建很多个定时器,通过制定定时器id可以清除特定的定时器

  <script>
        /*1.定时器: 让一段代码每隔一定时间自动执行
          2.语法
            开启定时器:  setInterval()    一旦开启永久重复,只能手动调用语法停止
            清除定时器    clearInterval()
          */
        let p1 = document.querySelector('#p1');

        let timeID = null;//声明变量存储定时器
        //注册事件
        document.getElementById('start').onclick = function () {
            /**开启定时器
            第一个参数:一段代码  回调函数
            第二个参数:时间间隔 单位:ms
            返回值: 定时器ID timeID
                定时器ID:一个页面可以开启很多个不同的定时器,浏览器为了区分这些定时器,每开启一个定时器
                就会给它们一个编号,这个编号叫做定时器ID
            */
            timeID =  setInterval(function () {
                console.log('嘿嘿嘿');
                p1.innerText++;
                // let text = p1.innerText;
                // text++; // 只是变量text的值+1
                // console.log(text);
                // p1.innerText = text;
            }, 1000);
        };


        document.getElementById('end').onclick = function () {
            //清除定时器
            //参数:定时器ID
            clearInterval(timeID);
        };

       
    </script>

2-setTimeout

  • 定时器setTimeout与setInterval唯一的区别是,setTimeout定时器只会执行一次

  • 总结:

    • 1.如果你想让这个代码一段时间后只执行一次,使用setTimeout

    • 2.如果你想让这个代码每隔一段时间执行一次(执行多次),使用setInterval

 <script>
        /* 1. setInterval() :永久定时器   一旦开启会永久重复, 只能手动清除
                clearInterval() :清除

            2. setTimeout() : 一次定时器   一旦开启只会执行一次,执行完毕之后自动清除
        
         */
        
        let timeID =  setTimeout(function(){
             console.log('boom');
         },5000);

         //一次定时器也可以清除
        //  clearInterval(timeID);
        // clearTimeout(timeID);
    
    </script>

倒计时秒杀小案例

效果图

基本结构样式

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 100px auto;
        }


        span {
            display: inline-block;
            width: 30px;
            height: 40px;
            line-height: 40px;
            background-color: #222;
            color: #fff;
            text-align: center;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="box">
        <span id="spanHour">01</span>
        <span>:</span>
        <span id="spanMin">01</span>
        <span>:</span>
        <span id="spanSec">15</span>
    </div>

</body>

</html>

 思路分析

  思路分析

            1. 获取元素:#spanHour,#spanMin,#spanSec

            2. 每隔1000ms,代码执行:定时器 let timeId = setInterval()

            2.1 获取时分秒的具体数据:字符串,转成数字:parseInt()

            2.2 秒数-1

            2.3 判定:秒数如果小于 0

            2.3.1 重置描述为59

            2.3.2 分-1

            2.4 判定:分数如果小于 0

            2.4.1 分数重置为 59

            2.4.2 时-1

            2.5 数据加工:补充前导0(不改变大小,保持2位宽度)

            2.6 数据写回页面给用户看

            2.7 判定:所有数据是否都为0:为0 结束:开始秒杀

完整代码 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 100px;
            margin: 100px auto;
        }


        span {
            display: inline-block;
            width: 30px;
            height: 40px;
            line-height: 40px;
            background-color: #222;
            color: #fff;
            text-align: center;
            font-weight: 700;
        }
    </style>
</head>

<body>
    <div class="box">
        <span id="spanHour">01</span>
        <span>:</span>
        <span id="spanMin">01</span>
        <span>:</span>
        <span id="spanSec">15</span>
    </div>
    <script>
        // 需求:倒计时秒杀:时间到 0 :0 :0 执行秒杀效果
        /*
            思路分析
            1. 获取元素:#spanHour,#spanMin,#spanSec
            2. 每隔1000ms,代码执行:定时器 let timeId = setInterval()
            2.1 获取时分秒的具体数据:字符串,转成数字:parseInt()
            2.2 秒数-1
            2.3 判定:秒数如果小于 0
            2.3.1 重置描述为59
            2.3.2 分-1
            2.4 判定:分数如果小于 0
            2.4.1 分数重置为 59
            2.4.2 时-1
            2.5 数据加工:补充前导0(不改变大小,保持2位宽度)
            2.6 数据写回页面给用户看
            2.7 判定:所有数据是否都为0:为0 结束:开始秒杀
        */
        // 1. 获取元素:#spanHour,#spanMin,#spanSec
        let hour = document.getElementById('spanHour');
        let min = document.getElementById('spanMin');
        let sec = document.getElementById('spanSec');
        // console.log(hour, min, sec);
        //     2. 每隔1000ms,代码执行:定时器 let timeId = setInterval()
        let z = setInterval(function () {

            //     2.1 获取时分秒的具体数据:字符串,转成数字:parseInt()
            let h = parseInt(hour.innerText);
            let m = parseInt(min.innerText);
            let s = parseInt(sec.innerText);
            // console.log(h, m, s);
            //     2.2 秒数-1
            s--;
            //     2.3 判定:秒数如果小于 0
            if (s < 0) {
                //     2.3.1 重置描述为59
                s = 59;
                //     2.3.2 分-1
                m--;
            };
            //     2.4 判定:分数如果小于 0
            if (m < 0) {
                //     2.4.1 分数重置为 59
                m = 59;
                //     2.4.2 时-1
                h--;
            };
            //     2.5 数据加工:补充前导0(不改变大小,保持2位宽度)
            if (s < 10) {
                s = '0' + s;
            };
            if (m < 10) {
                m = '0' + m;
            };
            if (h < 10) {
                h = '0' + h;
            };
            //     2.6 数据写回页面给用户看
            hour.innerText = h;
            min.innerText = m;
            sec.innerText = s;
            //     2.7 判定:所有数据是否都为0:为0 结束:开始秒杀
            if (s == 0 && m == 0 && h == 0) {
                clearInterval(z);
                alert('秒杀开始');
            };
        }, 1000);

    </script>
</body>

</html>

下一章:WebApi入门第十章(本地存储 localstorage与sessionstorage) 

下一章:WebApi入门第十二章(原生轮播图 )  

  • 3
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!此时此景,笔者只专注Android、Iphone等移动平台开发,看着这些源码心中有万分感慨,写此文章纪念那时那景! Java 源码包 Applet钢琴模拟程序java源码 2个目标文件,提供基本的音乐编辑功能。编辑音乐软件的朋友,这款实例会对你有所帮助。 Calendar万年历 1个目标文件 EJB 模拟银行ATM流程操作源代码 6个目标文件,EJB来模拟银行ATM机的流程操作:获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除,从账户中取出amt,如果amt>账户余额抛出异常,一个实体Bean可以表示不同的数据实例,我们应该通过主键来判断删除哪个数据实例…… ejbCreate函数用于初始化一个EJB实例 5个目标文件,演示Address EJB的实现 ,创建一个EJB测试客户端,得到名字上下文,查询jndi名,通过强制转型得到Home接口,getInitialContext()函数返回一个经过初始化的上下文,用client的getHome()函数调用Home接口函数得到远程接口的引用,用远程接口的引用访问EJB。 EJB中JNDI的使用源码例子 1个目标文件,JNDI的使用例子,有源代码,可以下载参考,JNDI的使用,初始化Context,它是连接JNDI树的起始点,查找你要的对象,打印找到的对象,关闭Context…… ftp文件传输 2个目标文件,FTP的目标是:(1)提高文件的共享性(计算机程序和/或数据),(2)鼓励间接地(通过程序)使用远程计算机,(3)保护用户因主机之间的文件存储系统导致的变化,(4)为了可靠和高效地传输,虽然用户可以在终端上直接地使用它,但是它的主要作用是供程序使用的。本规范尝试满足大型主机、微型主机、个人工作站、和TACs 的不同需求。例如,容易实现协议的设计。 Java EJB中有、无状态SessionBean的两个例子 两个例子,无状态SessionBean可会话Bean必须实现SessionBean,获取系统属性,初始化JNDI,取得Home对象的引用,创建EJB对象,计算利息等;在有状态SessionBean中,用累加器,以对话状态存储起来,创建EJB对象,并将当前的计数器初始化,调用每一个EJB对象的count()方法,保证Bean正常被激活和钝化,EJB对象是用完毕,从内存中清除…… Java Socket 聊天通信演示代码 2个目标文件,一个服务器,一个客户端。 Java Telnet客户端实例源码 一个目标文件,演示Socket的使用。 Java 组播组中发送和接受数据实例 3个目标文件。 Java读写文本文件的示例代码 1个目标文件。 java俄罗斯方块 一个目标文件。 Java非对称加密源码实例 1个目标文件 摘要:Java源码,算法相关,非对称加密   Java非对称加密源程序代码实例,本例中使用RSA加密技术,定义加密算法可用 DES,DESede,Blowfish等。   设定字符串为“张三,你好,我是李四”   产生张三的密钥对(keyPairZhang)   张三生成公钥(publicKeyZhang)并发送给李四,这里发送的是公钥的数组字节   通过网络或磁盘等方式,把公钥编码传送给李四,李四接收到张三编码后的公钥,将其解码,李四用张三的公钥加密信息,并发送给李四,张三用自己的私钥解密从李四处收到的信息…… Java利用DES私钥对称加密代码实例 同上 java聊天室 2个目标文件,简单。 java模拟掷骰子2个 1个目标文件,输出演示。 java凭图游戏 一个目标文件,简单。 java求一个整数的因子 如题。 Java生成密钥的实例 1个目标文件 摘要:Java源码,算法相关,密钥   Java生成密钥、保存密钥的实例源码,通过本源码可以了解到Java如何产生单钥加密的密钥(myKey)、产生双钥的密钥对(keyPair)、如何保存公钥的字节数组、保存私钥到文件privateKey.dat、如何用Java对象序列化保存私钥,通常应对私钥加密后再保存、如何从文件中得到公钥编码的字节数组、如何从字节数组解码公钥。 Java数据压缩与传输实例 1个目标文件 摘要:Java源码,文件操作,数据压缩,文件传输   Java数据压缩与传输实例,可以学习一下实例化套按字、得到文件输入流、压缩输入流、文件输出流、实例化缓冲
©️2021 CSDN 皮肤主题: 深蓝海洋 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值