<!DOCTYPE html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>

<style type="text/css">

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:12px/180%;background:#fff;}

.timerbg{background:url(images/bg.png) no-repeat;height:60px;width:980px;margin:20px auto;}

.timerbg div{float:right;font-size:16px;margin:24px 0 0 0;font-weight:800;text-align:left;width:335px;font-family:"微软雅黑","宋体";}

.timerbg div strong{font-size:28px;margin:0 13px;color:#D6000F;font-family:Arial;}

#daoend{margin:24px 0 0 0;width:324px;color:#D6000F;font-size:22px;}

</style>

</head>

<body>

    <div class="timerbg">

        <div id="daoend" style="display:none;">本次活动已结束。</div>

        <div id="dao"><strong id="RemainD"></strong>天<strong id="RemainH"></strong>时<strong id="RemainM"></strong>分<strong id="RemainS"></strong>秒</div>

    </div>

    <script type="text/javascript">

    var startTime = new Date();

    //定义参数可返回当天的日期和时间

    startTime.setFullYear(2016, 5, 27);

    //调用设置年份

    startTime.setHours(23);

    //调用设置指定的时间的小时字段

    startTime.setMinutes(59);

    //调用设置指定时间的分钟字段

    startTime.setSeconds(59);

    //调用设置指定时间的秒钟字段

    startTime.setMilliseconds(999);

    //调用置指定时间的毫秒字段

    var EndTime=startTime.getTime();

    //定义参数可返回距 1970 年 1 月 1 日之间的毫秒数

    function GetRTime(){

    //定义方法

        var NowTime = new Date();

        //定义参数可返回当天的日期和时间

        var nMS = EndTime - NowTime.getTime();

        //定义参数 EndTime减去NowTime参数获得返回距 1970 年 1 月 1 日之间的毫秒数

        var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));

        //定义参数 获得天数

        var nH = Math.floor(nMS/(1000*60*60)) % 24;

        //定义参数 获得小时

        var nM = Math.floor(nMS/(1000*60)) % 60;

        //定义参数 获得分钟

        var nS = Math.floor(nMS/1000) % 60;

        //定义参数 获得秒钟

        if (nMS < 0){

        //如果秒钟大于0

            $("#dao").hide();

            //获得天数隐藏

            $("#daoend").show();

            //获得活动截止时间展开

        }else{

        //否则

           $("#dao").show();

           //天数展开

           $("#daoend").hide();

           //活动截止时间隐藏

           $("#RemainD").text(nD);

           //显示天数

           $("#RemainH").text(nH);

           //显示小时

           $("#RemainM").text(nM);

           //显示分钟

           $("#RemainS").text(nS);

           //显示秒钟

        }

    }

    $(document).ready(function () {

    //定义方法

        var timer_rt = window.setInterval("GetRTime()", 1000);

        //定义参数 显示出GetRTime()方法 1000毫秒以后启动

    });

    </script>

</body>

</html>

html到计时特效（直接代码）的更多相关文章

  1. 14种网页jQuery和css3特效插件代码演示

    1.网页table增删样式代码 演示和下载地址 2.jQuery左右滑动幻灯片插件 演示和下载地址 3.jQuery文字轮播焦点图 演示和下载地址 4.网页文字焦点图切换 演示和下载地址 5.jQue ...

  2. Delphi实现图像文本旋转特效完整代码

    Delphi实现图像文本旋转特效完整代码,本程序利用的控件主要是Panel 控件.Image 控件.Edit 控件.Label 控件和Button 控件.本程序的关键是利用Delphi 的bmp_ro ...

  3. HTML特效文字代码大全

     HTML特效文字代码大全一.从右向左移代码<marquee direction=left>需要移动的文字</marquee>二.从左向右移代码<marquee dire ...

  4. 《Unity3D-播放被打中的时候粒子的特效的代码》

    //思路:首先我们需要给这个敌人身上放置上被打中的时候的粒子效果的组件,然后在获取和初始化这个组件然后在播放这个组件.虽然这个过程很简单但是我们要让 组件随着敌人的移动的时候随时触发就必须将这个组件的 ...

  5. 鼠标点击自定义文字展现特效JS代码

    JS特效使用方法 只需将如下JS代码放到</body>之前就好了 var a_idx = 0; jQuery(document).ready(function($) { $("b ...

  6. 纯js时钟特效详细代码分析实例教程

    电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先准备一 ...

  7. C程序运行计时

    在标准的C/C++中最小的时间单位是毫秒ms,下面代码中clock_t是long: 每经过1ms clock()的值就增加1:常量CLOCKS_PER_SEC,它用来表示一秒钟会有多少个时钟计时单元 ...

  8. 如何将Js代码封装成Jquery插件

    很多相同的Jquery代码会在很多页面使用,每次都复制粘贴太麻烦了,不如封装成一个Jquery插件就方便了,至于影响网页的速度不,我就没有测试了哈. 代码如下 这是一个自定闪烁打印文字的Jquery特 ...

  9. 静态页分页功能js代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. h5 getUserMedia error PermissionDeniedError

    HTML5 在使用非 localhost 地址访问时打开摄像头失败 .报getUserMedia error PermissionDeniedError,火狐下是可以正常调取的. 需要https: 火 ...

  2. POJ2942 Knights of the Round Table 点双连通分量 二分图判定

    题目大意 有N个骑士,给出某些骑士之间的仇恨关系,每次开会时会选一些骑士开,骑士们会围坐在一个圆桌旁.一次会议能够顺利举行,要满足两个条件:1.任意相互憎恨的两个骑士不能相邻.2.开会人数为大于2的奇 ...

  3. org.eclipse.swt.SWTError: No more handles的解决办法

    今天装了JBoss Tools 3.1 插件后,eclipse 打开jsp文件老是报错,或者要我关闭: org.eclipse.swt.SWTError: No more handles 网上找了两个 ...

  4. Struts错误信息回传

    <td height="20" align="center" class="loginMiddleDiv_loginInfo_window_wa ...

  5. Memory cycles about Block

    Block keeps a strong point to all object referenced in side of them, so all object will stay in heap ...

  6. springboot 多数据源（三种数据库连接池--JDBC，dbcp2，Druid）

    本文使用的是springboot2.0(在配置数据源时和springboot1.X略有区别) 首先:springboot默认支持的连接池有dbcp,dbcp2, tomcat, hikari四种连接池 ...

  7. Codeforces Round #Pi (Div. 2) C. Geometric Progression

    C. Geometric Progression time limit per test 1 second memory limit per test 256 megabytes input stan ...

  8. POJ1094 Sorting It All Out —— 拓扑排序

    题目链接:http://poj.org/problem?id=1094 Sorting It All Out Time Limit: 1000MS   Memory Limit: 10000K Tot ...

  9. Html5--6-46 渐变效果

    Html5--6-46 渐变效果 学习要点 掌握线性渐变和径向渐变的使用 线性渐变: 属性:linear-gradinet(开始位置 角度,起始颜色,终止颜色 ) 开始位置:渐变开始的位置,属性值可以 ...

  10. [Selenium] 如何使 InternetExplorerDriver 每次启动的端口不会随机变化

    InternetExplorerDriver 在不指定任何参数的情况下,启动监听端口会随机变化.如果需要保证其端口固定不变,可通过InternetExplorerDriverService 达到目的. ...