网页前端设计

http://www.86y.org
feedskyQQ邮箱

搜索文章

jq倒计时插件实例源码，特效切换

用声音读出全文关注我吧
 2015/7/24 20:07:10 阅读次数:6926

本实例是由JQ库写的JQ倒计时实例，使用的是上下切换显示。使用方法简单易用。只是写法过程中使用的比较笨的方法，大家可以修改并改良本实例。

本实例的思路是根据倒计时的时间分为：天时分秒，所以大块需要分开,然后每一块又要细分，具体到每个数字一个标签，然后对比哪些数据有变化然后切换变化的数字切换时需要另一个标签来做效果，但是另一个标签的值是旧值（说的不是很清楚，看的懂的）。

使用方法非常简单支持自定义结束内容提示!代码如下：

<div class="lefttime" date="2015-10-8 21:58:00" overtext="倒计时已结束"></div>

 

效果如下：

jq倒计时插件实例

源代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQ倒计时控件</title>
<style>
.timecontent{position:relative;display:inline-block;margin-bottom:10px;border:1px solid #ccc;border-radius:5px;}
.lefttime{padding:5px;display:inline-block;background:#e4e4e4;color:#333;}
.lefttime span{margin:5px;}
.lefttime span i{background:#333;color:#fff;padding:3px 5px;margin:0 1px;height:40px;width:30px;overflow:hidden;display:inline-block;font-style:normal;font-size:40px;font-family:Arial;border-radius:5px;position:relative; font-style:normal;}
.lefttime span i em{position:absolute;left:5px;top:0;font-style:normal;width:30px;text-align:center;}
.lefttime span i bdo{position:absolute;top:-40px;left:5px;font-style:normal;width:30px;text-align:center;}
</style>

</head>

<body>

<div class="timecontent"><div class="lefttime" date="2015-8-8 21:58:00" overtext="倒计时已结束"></div></div>
<br />
<div class="timecontent"><div class="lefttime" date="2015-8-8 22:02:00" overtext="倒计时已结束"></div></div>
<br />
<div class="timecontent"><div class="lefttime" date="2015-8-9 17:25:00" overtext="倒计时已结束"></div></div>
<br />
<div class="timecontent"><div class="lefttime" date="2020-1-1 9:30:21" overtext="倒计时已结束"></div></div>
<script src="http://www.86y.org/js/jquery.min.js" type="text/javascript"></script>
<script>

function getDiffDate(m) {
	m -= (D = parseInt(m / 86400000)) * 86400000;
	m -= (H = parseInt(m / 3600000)) * 3600000;
	S = parseInt((m -= (M = parseInt(m / 60000)) * 60000) / 1000);
	M=M < 10 & M > 0? '0' + M:M;
	H=H < 10 & H > 0? '0' + H:H;
	S=S < 10? '0' + S:S;
	
	D=D== 0?"":D;
	H=H== 0?"":H;
	M=M== 0?"00":M;
		
	if (m > 0) return trans("'"+D+"'","D")+""+trans("'"+H+"'","H")+""+trans("'"+M+"'","M")+"" + trans("'"+S+"'","S");
	else return "完";
}

//填充格式
function trans(leg,t){
	var strlist="";
	var type="";
	var tclas="";
	if(leg.length>=3)
	{
		if(t=="D"){type="天";tclas="days"}else if(t=="H"){type="时";tclas="hous"}else if(t=="M"){type="分";tclas="mins"}else{ type="秒";tclas="secs"}	
		strlist="<span class='"+tclas+"'>";		
		for(i=0;i<leg.length;i++)
		{
			leg.substring(i,i+1)!="'"?strlist+="<i><em>"+leg.substring(i,i+1)+"</em></i>":"";
		}
		strlist+="</span>"+type;
	}
	return strlist;
	
}
function clearclass(str){
	return clearspan(str.replace(/<i>/g,"").replace(/<\/i>/g,""));
}
function clearspan(str){
	return str.replace(" class='mins'","").replace(" class='days'","").replace(" class='hous'","").replace(" class='secs'","").replace(/<span>/g,"").replace(/<\/span>/g,"").replace(/<em>/g,"").replace(/<\/em>/g,"");
}

//对比旧日期与新日期哪些不同，将不同的切换显示
function secondSplit(str,oldstr,obj){
	var strlist="";
	var strlist2="";
	for(i=0;i<str.length;i++)
	{
		i!=str.length-1?strlist+=str.substring(i,i+1)+"|":strlist+=str.substring(i,i+1);
	}
	for(i=0;i<oldstr.length;i++)
	{
		i!=oldstr.length-1?strlist2+=oldstr.substring(i,i+1)+"|":strlist2+=oldstr.substring(i,i+1);
	}
	var strarray1=strlist.split("|");
	var strarray2=strlist2.split("|");
	
	if($(obj).find("i").length==0)
	{
		var ilist="";
		for(d=0;d<strarray1.length;d++)
			ilist+="<i><em></em></i>";
		$(obj).html(ilist);
	}
	
	for(j=0;j<strarray1.length;j++)
	{
		//alert(strarray1[j]+"--"+strarray2[j]);
		if(typeof(strarray2[j])=="undefined")
		{
			$(obj).find("i").eq(j).find("bdo").eq(0).text(strarray1[j]);
			$(obj).find("i").eq(j).find("em").eq(0).text(strarray1[j]);
		}
		if(strarray1[j]!=strarray2[j] && typeof(strarray2[j])!="undefined")
		{	
			$(obj).find("i").eq(j).find("bdo").length==0?$(obj).find("i").eq(j).append("<bdo>"+strarray2[j]+"</bdo>"):"";
			$(obj).find("i").eq(j).find("bdo").eq(0).animate({top: "45"}, 0);	
			$(obj).find("i").eq(j).find("em").eq(0).animate({top: "-45"}, 0);
			$(obj).find("i").eq(j).find("bdo").eq(0).animate({top:"0"}, 0);
			$(obj).find("i").eq(j).find("em").eq(0).text(strarray1[j]).animate({top:"0"}, "slow");
			$(obj).find("i").eq(j).find("bdo").eq(0).animate({top: "45"}, "slow");
		}
	}
}



$(function () {
	//倒计时
    $(".lefttime").each(function (i) {
		var firstt=0;
        var activeInterval = setInterval(function () {
			var obj=$(".lefttime").eq(i);		
            var severtime = $(obj).attr("date").replace(/-/g, "/");
            var stdf = getDiffDate(new Date(severtime) - new Date());
            if (stdf != "完")
			{	
				var st=stdf.replace("天","|").replace("时","|").replace("分","|").replace("秒","").split("|");
				//效果需要添加bdo标签，此时对比时需要删除bdo标签
				$(obj).find("bdo").remove("bdo");
				var days,hous,mins,secs=0;
				//第一次加载判断倒计时有哪些时间，从高往低				
				if(firstt==0)
				{
					st.length>=4?$(obj).append("<span class='days'></span>天"):"";
					st.length>=3?$(obj).append("<span class='hous'></span>时"):"";
					st.length>=2?$(obj).append("<span class='mins'></span>分"):"";	
					st.length>=1?$(obj).append("<span class='secs'></span>秒"):"";
					firstt=1;
				}
				/**/
				if(st.length>=4)
				{
					days=$(obj).find("span.days").eq(0);
					clearclass(st[0])!=$(days).text()?secondSplit(clearclass(st[0]),$(days).text(),$(days)):"";
					
					hous=$(obj).find("span.hous").eq(0);
					clearclass(st[1])!=$(hous).text()?secondSplit(clearclass(st[1]),$(hous).text(),$(hous)):"";
					
					mins=$(obj).find("span.mins").eq(0);
					clearclass(st[2])!=$(mins).text()?secondSplit(clearclass(st[2]),$(mins).text(),$(mins)):"";
					
					secs=$(obj).find("span.secs").eq(0);
					clearclass(st[3])!=$(secs).text()?secondSplit(clearclass(st[3]),$(secs).text(),$(secs)):"";
				}
				else if(st.length>=3)
				{
					hous=$(obj).find("span.hous").eq(0);
					clearclass(st[0])!=$(hous).text()?secondSplit(clearclass(st[0]),$(hous).text(),$(hous)):"";
					
					mins=$(obj).find("span.mins").eq(0);
					clearclass(st[1])!=$(mins).text()?secondSplit(clearclass(st[1]),$(mins).text(),$(mins)):"";
					
					secs=$(obj).find("span.secs").eq(0);
					clearclass(st[2])!=$(secs).text()?secondSplit(clearclass(st[2]),$(secs).text(),$(secs)):"";
				}
				else if(st.length>=2)
				{
					mins=$(obj).find("span.mins").eq(0);
					clearclass(st[0])!=$(mins).text()?secondSplit(clearclass(st[0]),$(mins).text(),$(mins)):"";
					
					secs=$(obj).find("span.secs").eq(0);
					clearclass(st[1])!=$(secs).text()?secondSplit(clearclass(st[1]),$(secs).text(),$(secs)):"";
				}
				else if(st.length>=1)
				{
					secs=$(obj).find("span.secs").eq(0);
					clearclass(st[0])!=$(secs).text()?secondSplit(clearclass(st[0]),$(secs).text(),$(secs)):"";
				}
			}
            else {
                $(obj).html($(".lefttime").eq(i).attr("overtext"));
                clearInterval(activeInterval);
            }
			
        }, 1000);
    });	
});
</script>
</body>
</html>

写到这里大家可以去预览下效果(完)

http://www.86y.org/demo/time/daojishi.html

大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：【幸凡前端技术交流群】
如需转载请注明出处:http://www.86y.org/art_detail.aspx?id=751【jq倒计时插件实例源码，特效切换】幸凡学习网
0

如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)

相关文章

阅读全文内容关闭

copyright ©2010-86y.org - ALL RIGHTS RESERUED -TEMPLATE CREATED BY CHARRY-may 3,2010
粤ICP备13053249号-1谷歌地图