JS与JQ倒计时的写法

页面需要制作一个倒计时的功能;然后度娘了一遍,找到两种写法,原生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>
时间: 2024-08-13 08:13:37

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

js和jq倒计时10S

<body> <div id="we">4</div>s <script> window.onload = function(){ var we = document.getElementById("we") console.log(we.innerHTML); var int=setInterval(function(){ we.innerHTML--; if(we.innerHTML==0){ clearInter

jq用法:入口写法

jq入口写法demo: 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>jq用法:入口写法</title> 6 </head> 7 <body></body> 8 <script src ="http://code.jquery.co

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

1.js,jq,css,html属性必须双,如果同时出现需要嵌套使用,属性的规范是双但是也可以用单测试有效 单引号现象举例:jq中获取元素标签是单引号:$('input').click:弹出也是单引号: alert('aaaa'):jq根据id获取元素和设置css都一般用单引号:$('#box').css('color', 'red'); 上述两种情况全部换成双引号也是行的!2.分号的用法: {}作为函数体一般是不需要分号结束的,()一般需要分号结束,除非作为一个函数的参数就不需要分号:3.js

JS简单的倒计时(代码优化)

倒计时网上一大堆,所以也没有什么好说的,支持:1.年,月,日,天,时分秒等倒计时. JS代码如下: /* * js简单的倒计时 * @param {date,obj} 日期 对象格式 */ function CountDown(date,obj) { var self = this; self.date = date; self.obj = obj; self._init(); }; $.extend(CountDown.prototype,{ _init: function(){ var se

JS和JQ的event对象对比和应用

摘要 js和jq的event对象大同小异,本文简单对比下它们的'click'事件下的不同和应用 js jquery jq event 代码测试: ? 1 2 3 4 5 6 7 <div id= "test" ><p>test text<p></div> <script src= "vendor/jquery-2.1.1.js" ></script> <script> test.ad

可拖动弹窗的JS和jQuery两种写法

最近在慕课网上学习了一个网页可拖动对话框js实现的演示视频,这个demo中的例子是百度首页登录按钮的弹窗,如下图: 当点击左上角的登录按钮时,弹窗出现并自动居中,同时窗口可拖动的范围被限制在了可视区域内,即浏览器视窗的上下左右边界,弹窗无法移出移动出四个边界,也不会出现滚动条. 另一个效果就是,当改变窗口大小时,对话框自动居中. 这个视频中用了原生js,jQuery两种写法实现案例,但本质上,对话框居中,限制拖动范围的的计算思路是一致的. 为了简化页面,总结核心思路,我重新写了一个小demo,界

js模拟jq获取id

js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js模拟jq的点击效果</title> <style> * {margin: 0; padding: 0;} #btn {display:block;height: 30px; width:

JavaScript 逼真图片倒计时实现代码 js时间图片倒计时

JavaScript 逼真图片倒计时实现代码   js时间图片倒计时 效果图: <!doctype html> <html> <head> <meta charset="utf-8"> <head> <title>逼真图片倒计时</title> <style type="text/css"> .time{width:200px;height:25px;border:1px

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

源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>原生js 当前时间 倒计时代码</ti