页面需要制作一个倒计时的功能;然后度娘了一遍,找到两种写法,原生JS与JQ 的,经过测试原生JS在IE可能会有不刷新的现象所以结合了一个大神的JQ写法修改好了一个。

原生JS写法:

HTML:

<div class="time">
<span id="t_d"></span>
<span id="t_h"></span>
<span id="t_m"></span>
<span id="t_s"></span>
</div>

JS:

<script>
function GetRTime(){
var EndTime= new Date('2015/06/19 22:00:00');
var NowTime = new Date();
var t =EndTime.getTime() - NowTime.getTime();
var d=Math.floor(t/1000/60/60/24);
var h=Math.floor(t/1000/60/60%24);
var m=Math.floor(t/1000/60%60);
var s=Math.floor(t/1000%60); document.getElementById("t_d").innerHTML = d + "天";
document.getElementById("t_h").innerHTML = h + "时";
document.getElementById("t_m").innerHTML = m + "分";
document.getElementById("t_s").innerHTML = s + "秒";
}
setInterval(GetRTime,0);
</script>

这种写法,JS部分很容易看懂。

结合JQ修改后的版本:

HTML部分和上面是一样的,主要是JS部分:

<script type="text/javascript">
var EndTime= new Date('2015/06/19 22:00:00');
var NowTime = new Date();
var t =EndTime.getTime() - NowTime.getTime();
var intDiff = parseInt(t/1000);//倒计时总秒数量,因为是以毫秒为单位的所以除以1000是秒
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 (hour <= 9) hour = '0' + hour;
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
$('#t_d').html(day+"天");
$('#t_h').html(hour+'时');
$('#t_m').html(minute+'分');
$('#t_s').html(second+'秒');
intDiff--;
}, 1000);
}
$(function(){
timer(intDiff);
});
</script>

JS与JQ倒计时的写法的更多相关文章

  1. js事件委托篇(附js一般写法和js、jq事件委托写法)

    参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...

  2. JS与JQ的对比与提高

    来吧, 案例1:先上个例子js写的省市二级联动 <!DOCTYPE html><html> <head> <meta charset="UTF-8& ...

  3. JS实现自动倒计时

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  4. js模拟jq获取id

    js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <m ...

  5. 前端双引号单引号,正则反向引用,js比较jq

    1.js,jq,css,html属性必须双,如果同时出现需要嵌套使用,属性的规范是双但是也可以用单测试有效 单引号现象举例:jq中获取元素标签是单引号:$('input').click:弹出也是单引号 ...

  6. JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)

    JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...

  7. 通过js或jq增加的代码,点击事件或其他一些事件不起作用时

    通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...

  8. 原生js 当前时间 倒计时代码

    源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...

  9. 用JS和JQ来获取子节点!

    用JS和JQ来获取子节点!   在JS中,如果通过document.getElementsByTagName来获取子元素有个弊端:它不单会获取符合要求的子元素,就连同孙元素也会获取.如果有特殊要求,那 ...

随机推荐

  1. JavaScript正则详谈

    JavaScript RegExp 基础详谈   前言: 正则对于一个码农来说是最基础的了,而且在博客园中,发表关于讲解正则表达式的技术文章,更是数不胜数,各有各的优点,但是就是这种很基础的东西,如果 ...

  2. Android开发问题笔记

    1.Toolbar问题:最低版本15,必须使用support,才能使用Toolbar,Toobar是5.0引入的 2.BottomTab:这个用TabLayout解决了 3.后端API最好采用一个成熟 ...

  3. codeforces 557 D. Vitaly and Cycle 组合数学 + 判断二分图

    D. Vitaly and Cycle       time limit per test 1 second memory limit per test 256 megabytes input sta ...

  4. Java同步块

    原文:http://ifeve.com/synchronized-blocks/ Java 同步块(synchronized block)用来标记方法或者代码块是同步的.Java同步块用来避免竞争.本 ...

  5. 解决xcode打开时loading假死的问题

    症状如下: 点击打开xcode后,就一直会看到loading,但是CPU消耗很高,基本上就是死了(动弹不得),通过活动监测器看到xcode显示为“未响应” 以为是安装程序的问题,结果选中xcode拉到 ...

  6. Oracle迁移MySQL笔记

    1,--在oracle代表注释 ,mysql/* */,# 2,|| oracle里面是表示连接符号,比如 A||B 那么就是AB 3,databaseLink创建好之后,比如名字为db_link_b ...

  7. C语言位运算符及作用:与、或、异或、取反、左移和右移

    一.& 按位与 如果两个相应的二进制位都为1,则该位的结果值为1,否则为0应用:(1)清零 若想对一个存储单元清零,即使其全部二进制位为0,只要找一个二进制数,其中各个位符合一下条件:原来的数 ...

  8. 【转】oracle数据库中varchar2陷阱

    源地址:http://www.cnblogs.com/iyangyuan/p/3491215.html oracle数据库相信大家都比较熟悉,数据库中有一种非常常用的数据类型:字符串型. 对应该类型, ...

  9. C++学习45 流成员函数put输出单个字符 cin输入流详解 get()函数读入一个字符

    在程序中一般用cout和插入运算符“<<”实现输出,cout流在内存中有相应的缓冲区.有时用户还有特殊的输出要求,例如只输出一个字符.ostream类除了提供上面介绍过的用于格式控制的成员 ...

  10. CRM PrincipalObjectAccess(POA)

    PrincipalObjectAccess (POA) table is an important table which holds all grants share on CRM objects. ...