1. <!doctype html>
  2. <html>
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <title>jquery版的网页倒计时效果</title>
  7.     <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
  8.     <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" name="viewport" id="viewport">
  9.     <meta name="format-detection" content="telephone=no" />
  10.     <meta content="yes" name="apple-mobile-web-app-capable" />
  11.     <meta content="black" name="apple-mobile-web-app-status-bar-style" />
  12.     <style type="text/css">
  13.     .time-item strong {
  14.         background: #C71C60;
  15.         color: #fff;
  16.         line-height: 49px;
  17.         font-size: 36px;
  18.         font-family: Arial;
  19.         padding: 0 10px;
  20.         margin-right: 10px;
  21.         border-radius: 5px;
  22.         box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
  23.     }
  24.  
  25.     #day_show {
  26.         float: left;
  27.         line-height: 49px;
  28.         color: #c71c60;
  29.         font-size: 32px;
  30.         margin: 0 10px;
  31.         font-family: Arial, Helvetica, sans-serif;
  32.     }
  33.  
  34.     .item-title .unit {
  35.         background: none;
  36.         line-height: 49px;
  37.         font-size: 24px;
  38.         padding: 0 10px;
  39.         float: left;
  40.     }
  41.     </style>
  42.     <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
  43.     <script type="text/javascript">
  44.     var endTime = '2020/07/13 23:59:59';
  45.     var end_time = new Date(endTime);
  46.     var  now = parseInt(new Date().getTime()/1000);
  47.     var end = parseInt(end_time.getTime() / 1000);
  48.     var intDiff = end - now;
  49.     // var intDiff = parseInt(30); //倒计时总秒数量
  50.  
  51.     function timer(intDiff) {
  52.         window.setInterval(function() {
  53.             var day = 0,
  54.                 hour = 0,
  55.                 minute = 0,
  56.                 second = 0; //时间默认值
  57.             if (intDiff > 0) {
  58.                 day = Math.floor(intDiff / (60 * 60 * 24));
  59.                 hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
  60.                 minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
  61.                 second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
  62.             }
  63.             if (minute <= 9) minute = '0' + minute;
  64.             if (second <= 9) second = '0' + second;
  65.             $('#day_show').html(day + "天");
  66.             $('#hour_show').html('<s id="h"></s>' + hour + '时');
  67.             $('#minute_show').html('<s></s>' + minute + '分');
  68.             $('#second_show').html('<s></s>' + second + '秒');
  69.             intDiff--;
  70.         }, 1000);
  71.     }
  72.  
  73.     $(function() {
  74.         timer(intDiff);
  75.     });
  76.     </script>
  77. </head>
  78.  
  79. <body>
  80.     <div class="time-item">
  81.         <span id="day_show">0天</span>
  82.         <strong id="hour_show">0时</strong>
  83.         <strong id="minute_show">0分</strong>
  84.         <strong id="second_show">0秒</strong>
  85.     </div>
  86. </body>
  87.  
  88. </html>

效果

　　

【转载】jquery版的网页倒计时效果的更多相关文章

  1. jquery版的网页倒计时效果

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

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

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

  3. [转载]jquery版小型婚礼（可动态添加祝福语）

    原文链接:http://www.cnblogs.com/tattoo/p/3788019.html 前两天在网上不小心看到“js许愿墙”这几个字,我的神经就全部被调动了.然后就开始我 的百度生涯,一直 ...

  4. jQuery CircleCounter的环形倒计时效果

    在线演示1 本地下载 使用jQuery插件CircleCounter生成的环形倒计时效果,这个插件使用HTML5画布生成动画效果,还不错,大家可以试试! 顺带手录制了个代码,大家不吝赐教:http:/ ...

  5. jquery网页倒计时效果，秒杀

    function FreshTime(){ var endtime=new Date('2019-4-12 18:00:00');//结束时间 var nowtime = new Date();//当 ...

  6. 【jquery插件】-网页下雪效果

        又到了年底,从圣诞节开始,可以发现各大网站的活动是越来越多,都变的银装素裹,本人由于业务需求也需要做这么一个效果,所以就通过google大神找了一下相关资源,结果就出现了N种雪花效果的方式.种 ...

  7. 【jQuery】手机验证码倒计时效果

    <ul class="ulist"> <li class="group"> <label class="label&qu ...

  8. javascript实现网页倒计时效果

    一.HTML代码如下: <div class="timer" id="timer"> <span style="color: bla ...

  9. jquery页面多个倒计时效果

    <div class="timeBox" data-times="2019/06/30,23:59:59"> 距结束 <span class= ...

随机推荐

  1. BootStrap之X-editable插件使用

    项目背景 刚加入公司的新项目,主要在做开发工作.由于是新手,本周的工作是配合另外一个同事写前台页面.前台框架是Bootstrap,本文主要介绍一下项目需求的一个功能——表格行内编辑事件. 使用X-ed ...

  2. [翻译]剖析C#中的异步方法

    翻译自一篇博文,原文:Dissecting the async methods in C# 有些括号里的是译注或我自己的理解. 异步系列 剖析C#中的异步方法 扩展C#中的异步方法 C#中异步方法的性 ...

  3. Apache配置转发

    第一种: LoadModule proxy_module modules/mod_proxy.so LoadModule proxy_http_module modules/mod_proxy_htt ...

  4. Error:Connection activation failed: No suitable device found for this connection

    原文链接: https://blog.csdn.net/baiboya/article/details/80452822 ens33这个网卡一直无法激活,在网上找了半天,找到这个博主的文章,才解决,虽 ...

  5. TCP之LAST_ACK状态

    前提: A:主动关闭: B:被动关闭: A执行主动关闭,发送FIN,B收到FIN,发送ACK,进入CLOSE_WAIT,B发送FIN,进入LAST_ACK等待最后一个ACK到来: 关闭方式: (1) ...

  6. 套接字之sendmsg系统调用

    sendmsg系统调用允许在用户空间构造消息头和控制信息,用此函数可以发送多个数据缓冲区的数据,并支持控制信息:当调用进入内核后,会将用户端的user_msghdr对应拷贝到内核的msghdr中,然后 ...

  7. 【git】本地git bash连接远程库github

    重要参考: https://www.liaoxuefeng.com/wiki/896043488029600 https://segmentfault.com/a/1190000003728094 正 ...

  8. 有关sublime的一些使用

    习惯了vs的快捷键,用sublime的时候始终感觉不太跟手. 点击 “首选项”→“按键绑定-默认” 在新的界面中就可以更改你想要的快捷键了. 1.自动格式化对齐: 查找 "command&q ...

  9. 一、基础篇--1.2Java集合-Arraylist 与 LinkedList 区别

     Arraylist 与 LinkedList 区别  结构上的区别 ArrayList底层实现基于动态数组,LinkedList底层实现基于双向链表.  性能上区别 ArrayList查询快,增删慢 ...

  10. 从pip+requirements.txt+virtualenv管理依赖到使用pipenv管理依赖-修改布署方式

    背景: 已经使用pip+requirements.txt+virtualenv管理了项目一段时间,为了不要每次都 导出依赖(本地),安装依赖(服务器) 现在要使用pipenv来管理项目的依赖关系 思路 ...