Css--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
.sjc
{
font-size: 12px; line-height: 20px;
}
.s_time
{
}
.end_time
{
}
.endtime_div
{
font-size: 12px; line-height: 20px;
}
.endtime_div_hide
{
font-size: 12px; line-height: 20px; display:none; color:Red;
}
.time_d
{
}
.time_h
{
}
.time_m
{
}
.time_s
{
}
jQuery---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- $(".sjc").each(function(){
/*获得开始时间*/
var x= $(this).children(".s_time").html();
/*获得结束时间*/
var x2=$(this).children(".end_time").text();
/*************************倒计时*************************/
//判断活动是否已经过期的函数
function ck_guoqi(jssj)
{
var ck=true;
var dn_0=new Date();//获得当前时间;
var dtArr2 = jssj.split("-");
var dt2 = new Date(dtArr2[0]+"/"+dtArr2[1]+"/"+dtArr2[2]);
if(dn_0>dt2)
{
ck=false;
}
return ck;
}
if(ck_guoqi(x2))
{
$(this).parent().next().next().children(".endtime_div_hide").hide();
var myendtime_div=$(this).parent().next().next().children(".endtime_div").show();
alert(myendtime_div.html());
time_cha();
function time_cha()
{
//********当前时间*********
var time_start=new Date().getTime();
//
//********结束时间*********
// var etime=$(this).parent().prev().prev().children().find(".end_time").text();
var dtArr = x2.split("-");
var time_end = new Date(dtArr[0]+"/"+dtArr[1]+"/"+dtArr[2]).getTime();
// 计算时间差
var time_distance = time_end - time_start;
// 天
var int_day = Math.floor(time_distance/86400000)
time_distance -= int_day * 86400000;
// 时
var int_hour = Math.floor(time_distance/3600000)
time_distance -= int_hour * 3600000;
// 分
var int_minute = Math.floor(time_distance/60000)
time_distance -= int_minute * 60000;
// 秒
var int_second = Math.floor(time_distance/1000)
// 时分秒为单数时、前面加零
if(int_day < 10){
int_day = "0" + int_day;
}
if(int_hour < 10){
int_hour = "0" + int_hour;
}
if(int_minute < 10){
int_minute = "0" + int_minute;
}
if(int_second < 10){
int_second = "0" + int_second;
}
// 显示时间
myendtime_div.children(".time_d").text(int_day);
myendtime_div.children(".time_h").text(int_hour);
myendtime_div.children(".time_m").text(int_minute);
myendtime_div.children(".time_s").text(int_second);
// 设置定时器
setTimeout(time_cha,1000);
}
}else{
$(this).parent().next().next().children(".endtime_div_hide").show();
$(this).parent().next().next().children(".endtime_div").hide();
}
});
div-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
<div style="width: 150px; height: 20px; float: left;">
<span class="sjc">
<span class="s_time">2015-11-20</span>
至<span class="end_time">2015-12-9</span></span>
</div>
<div style="width: 40px; height: 20px; float: left; margin-left: 10px;">
<img src="data:images/lmfwxqy/clock_grey.png" /></div>
<div style="width: 160px; height: 20px; float: left;">
<div class="endtime_div">
<span class="time_d" ></span><span>天</span><span class="time_h"></span><span>时</span><span class="time_m" ></span><span>分</span><span class="time_s" ></span><span>秒</span>
</div>
<div class="endtime_div_hide">
活动已结束!
</div>
</div>
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------作为小白编写的第一个js效果