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

原生JS写法:

HTML:

  1. <div class="time">
  2. <span id="t_d"></span>
  3. <span id="t_h"></span>
  4. <span id="t_m"></span>
  5. <span id="t_s"></span>
  6. </div>

JS:

  1. <script>
  2. function GetRTime(){
  3. var EndTime= new Date('2015/06/19 22:00:00');
  4. var NowTime = new Date();
  5. var t =EndTime.getTime() - NowTime.getTime();
  6. var d=Math.floor(t/1000/60/60/24);
  7. var h=Math.floor(t/1000/60/60%24);
  8. var m=Math.floor(t/1000/60%60);
  9. var s=Math.floor(t/1000%60);
  10.  
  11. document.getElementById("t_d").innerHTML = d + "天";
  12. document.getElementById("t_h").innerHTML = h + "时";
  13. document.getElementById("t_m").innerHTML = m + "分";
  14. document.getElementById("t_s").innerHTML = s + "秒";
  15. }
  16. setInterval(GetRTime,0);
  17. </script>

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

结合JQ修改后的版本:

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

  1. <script type="text/javascript">
  2. var EndTime= new Date('2015/06/19 22:00:00');
  3. var NowTime = new Date();
  4. var t =EndTime.getTime() - NowTime.getTime();
  5. var intDiff = parseInt(t/1000);//倒计时总秒数量,因为是以毫秒为单位的所以除以1000是秒
  6. function timer(intDiff){
  7. window.setInterval(function(){
  8. var day=0,
  9. hour=0,
  10. minute=0,
  11. second=0;//时间默认值
  12. if(intDiff > 0){
  13. day = Math.floor(intDiff / (60 * 60 * 24));
  14. hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
  15. minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
  16. second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
  17. }
  18. if (hour <= 9) hour = '0' + hour;
  19. if (minute <= 9) minute = '0' + minute;
  20. if (second <= 9) second = '0' + second;
  21. $('#t_d').html(day+"天");
  22. $('#t_h').html(hour+'时');
  23. $('#t_m').html(minute+'分');
  24. $('#t_s').html(second+'秒');
  25. intDiff--;
  26. }, 1000);
  27. }
  28. $(function(){
  29. timer(intDiff);
  30. });
  31. </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. CF 15/09/23

    CF580A 给出一个数列,求最长不下降子序列(连续) 直接DP,O(n) CF580B 主人公有n个朋友,每一个朋友有2个属性:m,sat 现在他想邀请部分朋友,邀请的人满足MAX_M-MIN_M& ...

  2. 张恭庆编《泛函分析讲义》第二章第4节 $Hahn$-$Banach$ 定理习题解答

    1.次线性泛函的性质 设 $p$ 是实线性空间 $\scrX$ 上的次线性泛函, 求证: (1)$p(0)=0$; (2)$p(-x)\geq -p(x)$; (3)任意给定 $x_0\in \scr ...

  3. MODBUS-RTU学习

    一 RTU比ASCII传输密度高.参数格式:起始位+8BITS数据位+校验位+停止位. 1.1校验默认为偶校验,建议为无校验,测试要多1个停止位(即停止位为2位) 1.2发送顺序为从左到右LSB-&g ...

  4. 将博客搬至51CTO

    为了统一博客文章,将文章搬至51cto个人博客

  5. Mac下安装JDK 6

    https://support.apple.com/kb/DL1572?viewlocale=zh_CN&locale=en_US 下载 , 安装

  6. ubuntu vi上下左右键无法使用?

    使用vm安装ubuntu出现vi上下左右键无法正常使用. 执行以下两句就可以了 $sudo apt-get remove vim-common    $sudo apt-get install vim

  7. 十一、jdk命令之Jstatd命令(Java Statistics Monitoring Daemon)

    目录 一.jdk工具之jps(JVM Process Status Tools)命令使用 二.jdk命令之javah命令(C Header and Stub File Generator) 三.jdk ...

  8. iOS 热点、通话时候TabView的Frame调整

    - (void)application:(UIApplication *)application didChangeStatusBarFrame:(CGRect)oldStatusBarFrame{ ...

  9. IronPython 设置包路径

    C#中添加对python文件或者对python包的引用时出现"no module .."的问题时的解决办法. 对hello.py 做一些简单的修改 添加 import syssys ...

  10. CentOS 安装 Chrome

    cd  /etc/yum.repos.d/ vi  google.repo [gogle] name=Google-x86_64 baseurl=http://dl.google.com/linux/ ...