<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. Maven 项目中依赖的搜索顺序

    Maven 项目中依赖的搜索顺序 http://www.manongjc.com/article/13422.html 执行过程中使用 -e -X 查看详细的搜索地址: 1,中央仓库,这是默认的仓库 ...

  2. Octet和byte的差异(转)

    在不严谨的前提下,byte和octet都表示为8 bits,但是严格意义上来讲,octet才是严格意义上的8 bits,而历史上的byte其实可以表示为4 bits ~ 10 bits,只不过现在的计 ...

  3. 解决window的bat脚本执行出现中文乱码的问题

    window下通过新建txt文件然后改成.bat的文件,输入内容后,执行出现中文乱码?原因: 批处理文件,是以ANSI编码方式.若以别的方式(如UTF-8)编辑了批处理,转换成ANSI格式即可,正常创 ...

  4. HDFS API 测试用例

    增加依赖 <!--hadoop--> <dependency> <groupId>org.apache.hadoop</groupId> <art ...

  5. 搭建npm私服流程

    npm私服必要性 1. 如果公司处于隐私保护的需要,不想将自己封的包推到npm社区,但又急需要一套完整的包管理工具来管理越来越多的组件,模块,项目.对于前端,最熟悉的莫过于npm,bower等,但是b ...

  6. 锐捷交换机如何配置远程管理地址（telnet）

    基本命令如下: hostname(config)#username admin password 123456  ------>telnet 登录账号为admin密码为123456 hostna ...

  7. sqlserver2012 用户指定数据库访问权限

    这样 用户进入的时候 就只能访问指定数据库 点击其他 显示

  8. Xshell连接SqlPlus无法使用退格、删除键

    问题:在使用xshell连接CentOS7,进入SQLPLUS进行命令操作时,如果输错了信息,无法进行退格键删除(显示“^H”),同样按删除键,显示“^[[3~”. 解决:网上查找了相关资料,可以通过 ...

  9. Docker下打包FastDFS镜像以及上传遇到的问题

    官方地址:https://github.com/happyfish100/fastdfs 一.先下载个包,然后解压(自己找个目录下载即可) [root@localhost soft]# wget ht ...

  10. 005 SpringCloud 学习笔记01-----系统架构的演变

    1.系统架构的演变 随着互联网的发展,网站应用的规模不断扩大.需求的激增,带来的是技术上的压力.系统架构也因此不断的演进.升级.迭代.从单一应用,到垂直拆分,到分布式服务,到SOA,以及现在火热的微服 ...