预览效果图：

使用到的知识点：

　　定时器 setInterval(函数，毫秒)：在指定的毫秒数后调用函数或执行一段代码

　　取消定时器 clearInterval：取消由setInterval设置的定时器

　　函数(日期函数、parseInt函数)

　　　　parseInt()函数 ：可解析一个字符串,并返回一个整数

示例代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

    <!--

        需求：

        电子商务网站中，商家为了促销商品而策划一些活动，刺激消费者进行盲目消费  限时秒杀就是其中一种手段。
　　　　　本次我们模拟的商品是 农夫山泉限时秒杀抢购

    -->

        <title>农夫山泉限时秒杀</title>

        <!--CSS代码：-->

        <style type="text/css">

            .box{        /*外围的大盒子样式*/

                width: 702px;/*宽度702像素*/

                height: 378px;/*高度378像素*/

                background: url(../img/flash_sale.png);/*背景图片*/

                margin: 0 auto;/*上下为0  水平居中*/

            }

            .box div{    /*外围的大盒子内部的小盒子样式*/

                width: 50px; /*宽度50像素*/

                height: 50px;/*高度50像素*/

                border: 1px solid darkgray;/*边界线1像素 实线 浅灰色*/

                position: relative; /*使用相对定位*/

                top: 260px;            /*相对定位顶部距离260像素*/

                float: left;        /*使小盒子左浮动*/

                left:305px ;        /*相对定位左侧距离305像素*/

                margin-left: 5px;    /*两个小盒子之间空出5px*/

                color: red;            /*字体颜色为红色*/

                text-align: center;    /*字体居中显示*/

                line-height: 50px;    /*字体行高50像素*/

            }

        </style>

    </head>

    <body>

        <!--外围的大盒子-->

        <div class="box">

            <!--剩余的天数-->

            <div id="d"></div>

            <!--剩余的小时-->

            <div id="h"></div>

            <!--剩余的分钟-->

            <div id="m"></div>

            <!--剩余的秒数-->

            <div id="s"></div>

        </div>

    </body>

</html>

<!--JavaScript代码:-->

<script type="text/javascript">

        //设置秒杀结束时间

    var endTime = new Date("2018-05-18 09:29:00");

    //把年月日时分秒的时间转换成为毫秒数

    endSeconds = endTime.getTime();//结束时间的毫秒数

    //定义变量  天数 小时 分钟  秒数

    var d = h = m = s =  0;

    //设置定时器  实现一个秒杀效果

    var timer = setInterval(qiang,1000);

    function qiang(){

        // 获取当前系统时间

        var nowTime = new Date();

        // 获取当前时间差---nowTime.getTime()现在时间的毫秒数

        var remain = parseInt((endSeconds-nowTime.getTime())/1000);

        //判断秒杀是否过期

        if(remain>0){

            //1.计算剩余天数  （除以60*60*24  取整数  获取剩余天数）

            d = parseInt(remain/86400)

            //2.计算剩余小时（除以60*60 转换成为小时了  与24进行取模   获取剩余小时）

            h = parseInt((remain/3600) % 24);

            //3.计算剩余分钟（除以60  转换成为分钟了  与60进行取模   获取剩余分钟）

            m = parseInt((remain/60) % 60);

            //4.计算剩余秒数（与60进行取模   获取剩余秒数）

            s = parseInt((remain) % 60);

            //统一利用两位数 表示 剩余的天、小时、分钟、秒

            d= d < 10 ? '0' + d:d;

            h= h < 10 ? '0' + h:h;

            m= m < 10 ? '0' + m:m;

            s= s < 10 ? '0' + s:s;

        }else{

            // 秒杀过期  取消定时器

            clearInterval(timer);

            d = h = m = s = '00'

        }

        //将剩余的天数、小时、分钟、秒  小时到指定网页中去

        document.getElementById("d").innerHTML = d + '天';

        document.getElementById("h").innerHTML = h + '时';

        document.getElementById("m").innerHTML = m + '分';

        document.getElementById("s").innerHTML = s + '秒';

    }

</script>

图片素材

 
作者： 杨校

出处： https://www.cnblogs.com/xiaoxiao5016/

分享是快乐的，也见证了个人成长历程，文章大多都是工作经验总结以及平时学习积累，基于自身认知不足之处在所难免，也请大家指正，共同进步。

本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出, 如有问题， 可邮件（397583050@qq.com）咨询。

杨老师课堂之JavaScript定时器_农夫山泉限时秒杀案例的更多相关文章

  1. 杨老师课堂_Java核心技术下之控制台模拟微博用户注册案例

    案例设计背景介绍: 编写一个新浪微博用户注册的程序,要求使用HashSet集合实现.  假设当用户输入用户名.密码.确认密码.生日(输入格式yyyy-mm-dd为正确).手机号码(手机长度为11位,并 ...

  2. 杨校老师课堂之JavaScript右下角广告弹框教程

    案例制作思路: 1.先制作界面 添加一个盒子包含一个按钮,使盒子绝对定位在右上角 添加一个大盒子,同理,将盒子居于左下角:其中内部包含一个顶端盒子和底部盒子 顶端盒子因为是属于大盒子内部的存在,所以宽 ...

  3. 杨老师课堂_Java核心技术下之控制台模拟记事本案例

    预览效果图: 背景介绍: 编写一个模拟记事本的程序通过在控制台输入指令,实现在本地新建文件打开文件和修改文件等功能. 要求在程序中: 用户输入指令1代表"新建文件",此时可以从控制 ...

  4. 杨老师课堂_VBA学习教程之根据部门列创建工作表

    课件下载 : 方式1:本节课件下载地址:链接: https://pan.baidu.com/s/1rf5pRmZ95fjVbz70KYi6Aw 密码: q9yk 方式2:或点击此处下载 效果预览图: ...

  5. Final互评------《弹球学成语》---- 杨老师粉丝群

    一.基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题;  N(Need,需求):本产品面相青少年及小学生,基于这些用户数量再加上一些休闲玩家,需求量还是比较大的.   A ...

  6. 互评Alpha版本——杨老师粉丝群——Pinball

    一．基于NABCD评论作品,及改进建议 1.根据(不限于)NABCD评论作品的选题 (1)N(Need,需求) 成语学习对除汉语言专业外的大学生的需求并不是很高,初中生和高中生因为在升学时需要参加语文 ...

  7. Javascript定时器(三)——setTimeout(func, 0)

    setTimeout(func, 0)可以使用在很多地方,拆分循环.模拟事件捕获.页面渲染等 一.setTimeout中的delay参数为0,并不是指马上执行 <script type=&quo ...

  8. Javascript定时器(二)——setTimeout与setInterval

    一.解释说明 1.概述 setTimeout:在指定的延迟时间之后调用一个函数或者执行一个代码片段 setInterval:周期性地调用一个函数(function)或者执行一段代码. 2.语法 set ...

  9. COJ 0500 杨老师的路径规划（MST）最小生成树

    杨老师的路径规划(MST) 难度级别:B: 运行时间限制:1000ms: 运行空间限制:51200KB: 代码长度限制:2000000B 试题描述 为满足同学们需求,杨老师在实验楼4层新建了好多个计算 ...

随机推荐

  1. Linux下使用GDAL进行开发（automake使用）

    首先写三个源代码文件,分别是GDALTest.cpp.Fun.cpp和Fun.h,将这三个存放在一个叫GDALTest的文件夹中,然后打开终端,切换到该目录,如下图所示(注:这个图是最后截图的,所以文 ...

  2. .bash_profile和.bashrc的什么区别及启动过程

    /etc/profile:此文件为系统的每个用户设置环境信息,当用户第一次登录时,该文件被执行.并从/etc/profile.d目录的配置文件中搜集shell的设置./etc/bashrc:为每一个运 ...

  3. Maven部署项目到Tomcat

    首先需要用MyEclipse建立一个Maven项目 为了不报403错误,tomcat目录下的tomcat-user.xml文件的配置如下: setting.xml配置如下,大家关注下Server的配置 ...

  4. iOS监听模式系列之iOS开发证书、秘钥

    补充--iOS开发证书.秘钥 iOS开发过程中如果需要进行真机调试.发布需要注册申请很多证书,对于初学者往往迷惑不解,再加上今天的文章中会牵扯到一些特殊配置,这里就简单的对iOS开发的常用证书和秘钥等 ...

  5. iOS多线程篇：NSThread简单介绍和使用

    一.什么是NSThread NSThread是基于线程使用,轻量级的多线程编程方法(相对GCD和NSOperation),一个NSThread对象代表一个线程, 需要手动管理线程的生命周期,处理线程同 ...

  6. 在linux下制作静态库和动态链接库的方法

    静态库 .o文件的集合 制作 ar -cr libxxx.a xxx1.o xxx2.o xxx3.o ... 编译 gcc main.c -l xxx [-L 库路径] (如果不加-L则在标准库路径 ...

  7. 本人在CSDN上的技术博客访问量突破了10万次，特此截图留念

                从 2011-11-16在CSDN开博至今,将近三年.  在近三年的时间里,本博的访问量于2014-07-01突破了10万次,单篇博文<软件开发高手须掌握的4大SQL精髓 ...

  8. Redis 协议为例谈简单的协议分析

    怎样去研究一个协议的过程,协议的格式,好处,怎么样模拟发包等,下面是一个简单的过程记录. 研究的步骤: 协议相关的资料,RFC,官方文档等.弄清楚协议工作在4层还是7层,是二进制还是文本协议等 抓包, ...

  9. LeetCode(60)-ZigZag Conversion

    题目: The string "PAYPALISHIRING" is written in a zigzag pattern on a given number of rows l ...

  10. 解决idea的项目启动报404的问题

    最近在学习IDEA,由于之前一直使用的是Eclipse,所以初次接触IDEA就接触到了不少的坑,其中最让人头疼的大概就是如何让IDEA顺利的启动起来了,这方面我就不细讲了,网上已经有了不少的教程,稍后 ...