<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <title>jquery版的网页倒计时效果</title>

    <meta http-equiv="Content-type" content="text/html;charset=UTF-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">

    <meta name="format-detection" content="telephone=no" />

    <meta content="yes" name="apple-mobile-web-app-capable" />

    <meta content="black" name="apple-mobile-web-app-status-bar-style" />

    <style type="text/css">

    .time-item strong {

        background: #C71C60;

        color: #fff;

        line-height: 49px;

        font-size: 36px;

        font-family: Arial;

        padding: 0 10px;

        margin-right: 10px;

        border-radius: 5px;

        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);

    }

    #day_show {

        float: left;

        line-height: 49px;

        color: #c71c60;

        font-size: 32px;

        margin: 0 10px;

        font-family: Arial, Helvetica, sans-serif;

    }

    .item-title .unit {

        background: none;

        line-height: 49px;

        font-size: 24px;

        padding: 0 10px;

        float: left;

    }

    </style>

    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <script type="text/javascript">

    var endTime = '2020/07/13 23:59:59';

    var end_time = new Date(endTime);

    var  now = parseInt(new Date().getTime()/1000);

    var end = parseInt(end_time.getTime() / 1000);

    var intDiff = end - now;

    // var intDiff = parseInt(30); //倒计时总秒数量

    function timer(intDiff) {

        window.setInterval(function() {

            var day = 0,

                hour = 0,

                minute = 0,

                second = 0; //时间默认值

            if (intDiff > 0) {

                day = Math.floor(intDiff / (60 * 60 * 24));

                hour = Math.floor(intDiff / (60 * 60)) - (day * 24);

                minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);

                second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);

            }

            if (minute <= 9) minute = '0' + minute;

            if (second <= 9) second = '0' + second;

            $('#day_show').html(day + "天");

            $('#hour_show').html('<s id="h"></s>' + hour + '时');

            $('#minute_show').html('<s></s>' + minute + '分');

            $('#second_show').html('<s></s>' + second + '秒');

            intDiff--;

        }, 1000);

    }

    $(function() {

        timer(intDiff);

    });

    </script>

</head>

<body>

    <div class="time-item">

        <span id="day_show">0天</span>

        <strong id="hour_show">0时</strong>

        <strong id="minute_show">0分</strong>

        <strong id="second_show">0秒</strong>

    </div>

</body>

</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. JS框架_(JQuery.js)点赞按钮动画

    百度云盘 传送门 密码: 0ihy 点赞按钮动画效果: (点击一次随机生成一颗小爱心,作为点赞动画~) <!doctype html> <html lang="en&quo ...

  2. [CSP-S模拟测试]:中间值（二分）

    题目背景 $Maxtir$喜欢序列的中间值. 题目传送门(内部题127) 输入格式 第一行输入两个正整数$n,m$,其中$m$是操作和询问次数. 接下来两行每行输入$n$个非负整数,每一行分别表示两个 ...

  3. jQuery实现表单动态添加与删除数据操作示例

    <!DOCTYPE html> <html lang="en"> <head>   <meta charset="UTF-8&q ...

  4. 查看线程的cpu占用率

    1)         top -H -p 进程pid 查看线程的线程ID与CPU占用情况.或者使用 ps -eLo pid,lwp,pcpu | grep 进程pid2)         pstack ...

  5. java期末总结

    java期末总结: java语言特点:1.简洁有效 2.可移植性 3.面向对象 4.解释型 5.适合分布式计算 6.拥有较好的性能 7.健壮.防患于未然 8.具有多线程处理能力 9.具有较高的安全性 ...

  6. 【攻克RabbitMQ】常见问题

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/zlt995768025/article/ ...

  7. WIN10下命令行禁用编辑模式

    在开发的时候 控制台输出信息 点一下右键就进入编辑模式了,WIN7没有这个问题.网上搜了一下 说是要 禁用编辑模式,下面是代码VS2005可用 { #ifndef ENABLE_EXTENDED_FL ...

  8. T83312 【音乐会】达拉崩吧·上

    T83312 [音乐会]达拉崩吧·上 题解 线段树板子题 把原来的 + 变成 ^ 但是注意一下懒标记,这里讲一下小技巧 代码 #include<bits/stdc++.h> using n ...

  9. T78748 【lcez模拟赛】机场Ⅰ

    T78748 [lcez模拟赛]机场Ⅰ 其实这就是最小生成树的题辣 注意输入毒瘤 输入的话要避免记录中间这个‘ , ’ 如下操作可以解决 特别注意%d之间的‘ , ’ 边的权值要现算 存点的话存横纵坐 ...

  10. N2RR

    一.背景 氨(NH 3)是一种新兴的能量载体,在液氨中含有17.6%(重量)的氢,而在甲醇中的含量为12.5%(重量),很可能成为未来氢能经济的有希望的候选者.然而,如果基于NH 3的肥料不足以养活世 ...