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>
JS与JQ倒计时的写法的更多相关文章
- js事件委托篇(附js一般写法和js、jq事件委托写法)
参考: jQuery代码优化:事件委托篇 使用该技术能让你避免对特定的每个节点添加事件监听器:相反,事件监听器被添加在他们的父元素上,事件监听器会分析从子元素上冒泡上来的事件,并找到是哪个子元素事件. ...
- JS与JQ的对比与提高
来吧, 案例1:先上个例子js写的省市二级联动 <!DOCTYPE html><html> <head> <meta charset="UTF-8& ...
- JS实现自动倒计时
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- js模拟jq获取id
js模拟jq获取id: (jquery)需要自己添加 <!DOCTYPE html> <html lang="en"> <head> <m ...
- 前端双引号单引号,正则反向引用,js比较jq
1.js,jq,css,html属性必须双,如果同时出现需要嵌套使用,属性的规范是双但是也可以用单测试有效 单引号现象举例:jq中获取元素标签是单引号:$('input').click:弹出也是单引号 ...
- JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- 通过js或jq增加的代码,点击事件或其他一些事件不起作用时
通过js或jq增加的代码,点击事件或其他一些事件不起作用时,可使用 $(document).on("click",".noshow",function() { ...
- 原生js 当前时间 倒计时代码
源:https://www.oschina.net/code/snippet_2318153_54763 <!DOCTYPE html> <html> <head> ...
- 用JS和JQ来获取子节点!
用JS和JQ来获取子节点! 在JS中,如果通过document.getElementsByTagName来获取子元素有个弊端:它不单会获取符合要求的子元素,就连同孙元素也会获取.如果有特殊要求,那 ...
随机推荐
- NeHe OpenGL教程 第四十四课:3D光晕
转自[翻译]NeHe OpenGL 教程 前言 声明,此 NeHe OpenGL教程系列文章由51博客yarin翻译(2010-08-19),本博客为转载并稍加整理与修改.对NeHe的OpenGL管线 ...
- MYSQL 安装更新,使用,管理,备份和安全等
如何安装更新,使用,管理,备份和安全,维护优化一个MYSQL系统. 一.MYSQL发展历史,特点.对SQL语法进行介绍 二.如何安装一个MYSQL系统 三四.如何利用SQL语言以及其他的客户工具对MY ...
- php 预定义接口
Traversable Traversable { } 作用:检测一个类是否可以使用 foreach 进行遍历的接口. php代码中不能用.只有内部的PHP类(用C写的类)才可以直接实现Travers ...
- Idea KeyGen
import java.math.BigInteger; import java.util.Date; import java.util.Random; import java.util.Scanne ...
- 资源文件assets和 res下面raw文件的使用不同点
在建立项目中一般会默认建立assets文件,当然我们还可以在res文件下面建立raw文件夹,这里面都可以存放一些图片,音频或者文本信息,可以供我们在程序当中进行使用,不过他们两个也有不同点: asse ...
- 在ScrollView中嵌入GridView
做android程序开发的都知道,不能在一个拥有Scrollbar的组件中嵌入另一个拥有Scrollbar的组件,因为这不科学,会混淆滑动事件,导致只显示一到两行数据.那么就换一种思路,首先让子控件的 ...
- webim-界面细节调整
1)左侧css调整 3)界面和滚动条美化 8)界面
- div滚动到页面顶端后固定住
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title> ...
- [SQL]select scope_identity()传回插入相同范围之识别资料行中的最后一个识别值
传回插入相同范围之识别资料行中的最后一个识别值.范围是一个模组:预存程序.触发程序.函数或批次.因此,如果两个陈述式在相同预存程序.函数或批次中,它们就在相同范围中. 语法: SCOPE_IDENTI ...
- nyoj 88 汉诺塔(一)
点击打开链接 汉诺塔(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描述 在印度,有这么一个古老的传说:在世界中心贝拿勒斯(在印度北部)的圣庙里,一块黄铜板上插着三根宝 ...