您的位置：首页 > Web前端 > JQuery

JqueryfadeInfadeOutAnimate倒计时Demo

2015-08-10 10:07 706 查看

<html>

<head>

<meta http-equiv="content-type" content="text/html" charset="utf-8" \>

<meta name="viewport" content=" height = device-height, width = device-width,initial-scale =1.0 , user-scalable =no"/>

<title>计划时间程序</title>

<script src="./jquery2.1.4.js">

</script>



<script>

$(document).ready(function(){

// alert("测试");

$("#DivYear").hide();

$("#DivMonth").hide();

$("#DivDate").hide();

$("#DivHours").hide();

$("#DivMinutes").hide();

$("#DivSeconds").hide();

//--

$("#DivYear").fadeIn("slow");

$("#DivMonth").fadeIn("slow");

$("#DivDate").fadeIn("slow");

$("#DivHours").fadeIn("slow");

$("#DivMinutes").fadeIn("slow");

$("#DivSeconds").fadeIn("slow");

$("#textTip").animate({height:"100px"});//animate动画 {}里是json数据键:"值" 多个json数据用,隔开

//--打包进函数--

function setDivTime(){

//设置初始时间 2015-7-10-8:54:35

var orginalYear=2015;http://7xiv2m.com1.z0.glb.clouddn.com/djs.html

var orginalMonth=7;

var orginalDate=10;

var orginalHours=8;

var orginalMinutes=54;

var orginalSeconds=35;

//获取当前时间-

var dNow=new Date();

var nowYear=dNow.getFullYear();

var nowMonth=dNow.getMonth();

var nowDate=dNow.getDate();

var nowHours=dNow.getHours();

var nowMinutes=dNow.getMinutes();

var nowSeconds=dNow.getSeconds();

//获取当前时间

//var StringTime=nowYear+"-"+nowMonth+"-"+nowDate+"-"+nowHours+":"+nowMinutes+":"+nowSeconds;

//$("#DivTimer").text(StringTime);

//--计算差值--

var c_year=nowYear-orginalYear;

var c_month=nowMonth-orginalMonth;

var c_date=nowDate-orginalDate;

var c_hours=nowHours-orginalHours;

var c_minutes=nowMinutes-orginalMinutes;

var c_seconds=nowSeconds-orginalSeconds;

//---这个是差值全部需要重新组合-全部换算成秒数-

var all_c_sec=0;

all_c_sec=all_c_sec+c_year*31536000;//一年多少秒

all_c_sec=all_c_sec+c_month*2592000;//一个月多少秒

all_c_sec=all_c_sec+c_date*86400;//一天多少秒

all_c_sec=all_c_sec+c_hours*3600;//一小时

all_c_sec=all_c_sec+c_minutes*60;//一分钟

all_c_sec=all_c_sec+c_seconds;//分钟

//alert(all_c_sec);//秒差值

//--把秒差值化成准确的时分秒

//floor向下取整

var finish_year=parseInt(all_c_sec/31536000);//年数

all_c_sec=all_c_sec%31536000;//取模（余数）

var finish_months=parseInt(all_c_sec/2592000);//月数

all_c_sec=all_c_sec%2592000;//取余数

var finish_date=parseInt(all_c_sec/86400);//天数

all_c_sec=all_c_sec%86400;//余数

var finish_hours=parseInt(all_c_sec/3600);//时数

all_c_sec=all_c_sec%3600;//余数

var finish_minutes=parseInt(all_c_sec/60);//分数

var finish_seconds=all_c_sec%60;//秒数

//var StringTime=finish_year+"-"+finish_months+"-"+finish_date+"-"+finish_hours+":"+finish_minutes+":"+finish_seconds;

//$("#DivTimer").text(StringTime);

$("#DivYear").text(finish_year);

$("#DivMonth").text(finish_months);

$("#DivDate").text(finish_date);

$("#DivHours").text(finish_hours);

$("#DivMinutes").text(finish_minutes);

$("#DivSeconds").text(finish_seconds);

}

setInterval(setDivTime,1000);

});

</script>

</head>

<body style="background:url(./bgk_djs.jpg)">

<div id="textTip" style="width:100%;height:20px;border:1px solid yellow;background-color:yellow;">您坚持了:<br/>必须天天坚持哟~~涵涵~!</div>

<div id="DivTimer">

<div id="DivYear" style="width:50px;height:50px;border:1px solid black;background:white;float:left;border-radius:20px;color:black;font-size:25px;"></div>

<div id="DivMonth" style="width:50px;height:50px;border:1px solid black;background:green;float:left;border-radius:20px;font-size:25px;"></div>

<div id="DivDate" style="width:50px;height:50px;border:1px solid black;background:yellow;float:left;border-radius:20px;font-size:25px;"></div>

<div id="DivHours" style="width:50px;height:50px;border:1px solid black;background:blue;float:left;border-radius:20px;font-size:25px;color:white;"></div>

<div id="DivMinutes" style="width:50px;height:50px;border:1px solid black;background:black;float:left;border-radius:20px;font-size:25px;color:white;"></div>

<div id="DivSeconds" style="width:50px;height:50px;border:1px solid black; background:red;float:left;border-radius:20px;font-size:25px;"></div>

</div>

</body>

</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航