<html>

 <head>

     <meta charset="utf-8"/>

     <title>jquery实现倒计时</title>

     <script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>

 </head> 

 <body>

 <div id="remainTime" style="font-size:20px;font-weight:800;color:#FF9900"></div> 

 <script type="text/javascript">

     $(function(){

         var now=new Date();

         var end=new Date(2018,2,3,16,10,00);//结束的时间：年，月，日，分，秒（月的索引是0~11）

         /*两个时间相减,得到的是毫秒ms,变成秒*/

         var result=Math.floor(end-now)/1000; 

         var interval=setInterval(sub,1000); //定时器 调度对象

         /*封装减1秒的函数*/

         function sub(){

             if (result>1) {

                result = result - 1;

                var second = Math.floor(result % 60);     // 计算秒 ，取余

                var minite = Math.floor((result / 60) % 60); //计算分 ，换算有多少分，取余，余出多少秒

                var hour = Math.floor((result / 3600) % 24); //计算小时，换算有多少小时，取余，24小时制除以24，余出多少小时

                var day = Math.floor(result / (3600*24));  //计算天 ，换算有多少天

                $("#remainTime").html(day + "天" + hour + "小时" + minite + "分" + second + "秒");

             } else{

                 alert("倒计时结束！");

                 window.clearInterval(interval);//这里可以添加倒计时结束后需要执行的事件

             }

         };

     });

 </script>

 </body>

 </html>

jquery实现倒计时的更多相关文章

  1. jQuery实现倒计时效果-杨秀徐

    本实例效果:剩余368天22小时39分57秒结束 代码简单易懂,适用各种倒计时: <!DOCTYPE html> <head> <title>jQuery实现倒计时 ...

  2. jQuery自适应倒计时插件

    jQuery自适应倒计时插件 在线演示本地下载

  3. jQuery实现倒计时重新发送短信验证码功能示例

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  4. jquery.countdown 倒计时插件的学习

    1.第一种简单的使用 第一个时间是你的倒计时截止时间,finalDate格式可以是YYYY/MM/DD MM/DD/YYYY YYYY/MM/DD hh:mm:ss MM/DD/YYYY hh:mm: ...

  5. jQuery控制倒计时

    1.1 秒杀的倒计时 做秒杀网页总免不了倒计时,但没有很好的服务器,啥资源都没有,只能将部分任务交给浏览器去处理,比如秒杀首页的倒计时,因为真正秒杀是在具体页面,首页只是展示而已,所以误差一点是允许的 ...

  6. jQuery简单倒计时插件

    一. 效果预览 二. 实现 1. 按照特定的类结构布局. 2. 需要先引入jQuery,再引入此文件. /** * Author: CC11001100 * * 简单倒计时 * * 1. 支持页面内同 ...

  7. jQuery TimeCircles 倒计时

    在线实例 默认 倒计时 使用方法 <h1 style="margin: 40px; font: 32px Microsoft Yahei; text-align: center;&qu ...

  8. jquery网页倒计时效果，秒杀，限时抢购！

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  9. jquery 60s倒计时

    前端开发中经常用到的发送按钮倒计时,每次都是重写,挺麻烦的,记录一下,以后直接来复制代码 <!DOCTYPE html> <html> <head> <met ...

随机推荐

  1. MySQL索引原理（三）

    多个单列索引和联合索引的区别详解 背景:为了提高数据库效率,建索引是家常便饭:那么当查询条件为2个及以上时,我们是创建多个单列索引还是创建一个联合索引好呢?他们之间的区别是什么?哪个效率高呢?我在这里 ...

  2. mysql关键字冲突

    在冲突的字段加上转移符,这样子就可以了: insert into test_table (wind_code,name,`read`,creade_time) values (?,?,?,?) (注意 ...

  3. android -------- VideoCache 视频播放(缓存视频到本地)

    先前做了一个小视频的功能,里面有播放多个视频的功能,为了效率,我加了视频缓存功能: 一方面耗费用户的流量,另一方面直接从本地播放要更流畅 网上看资料,一个视频缓存库,使用起来很方便,还不错,就分享给大 ...

  4. 在easyui-tabs中的href或 content的多种条件下的不同页面内容和页面地址的赋值?

    $('#tt').tabs('add', {.....});中 的 加载内容, 可以用content, 或用 href都是可以的. 虽然它们加载 的方式不一样, 但是 只要是加载进去后, 加载成功后, ...

  5. Office2019 Word 新建文档豆沙绿背景色失效零时解决方案

    如果只针对Word的话,可以尝试在开发者选项卡中新建一个宏,复制下面的内容进行运行: Sub WritingLayout() ActiveDocument.Background.Fill.Visibl ...

  6. JMETER - 连接MySQL数据库_函数助手_随机登录

    1. 导入mysql-connect.jar包 2. 添加配置原件-jdbc connection config 3. 添加jdbc请求 填写信息 4. 连接数据库 OK 5. 增加语句:jdbc r ...

  7. Java分布式：分布式锁之Redis实现

    Java分布式:分布式锁之Redis实现 分布式锁系列教程重点分享锁实现原理 Redis锁原理 核心命令 Redis分布式锁的原理是基于其SETNX命令,我们来看SETNX的解释. 实现过程 使用SE ...

  8. vue获取不到后端返回的响应头

    Response.ContentType = EPPlusHelpler.ExcelContentType; Response.Headers.Add("FileName", fi ...

  9. mysql 导入txt数据到数据表【原创】

    1.如何将数据表导入到mysql的表中,可以使用:load data infile ... into table  ... 示例: load data infile 'e:\datainfo.txt' ...

  10. 使用清华源进行pip install

    pypi 镜像使用帮助 pypi 镜像每 5 分钟同步一次. 临时使用 pip install -i https://pypi.tuna.tsinghua.edu.cn/simple some-pac ...