jQuery倒计时
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效果
jQuery倒计时的更多相关文章
- 20个非常棒的jQuery倒计时脚本
使用jQuery倒计时插件可能是最简单最好的方式添加动态和交互式倒数计时器到您的网站上.我相信你已经注意到了,例如倒计时功能运行网站,显示倒计时,直到一个大事件.当网站正在维护,告诉用户什么时候回来, ...
- jQuery倒计时插件
倒计时jQuery插件 引言 最近又换工作了,还不错,我换工作的次数其实有点频繁,2014年7月份毕业,到现在工作已经换了3份了,工资跟刚毕业时候相比也涨了点儿,最近一次换工作我离开了深圳,来到了北京 ...
- jquery倒计时(仿团购)转至 http://justcoding.iteye.com/blog/2210962
倒计时一般是用来表示未来某一时刻距现在时刻还剩多少时间.倒计时在WEB上应用非常广泛,如考试系统倒计时,团购网站中的优惠活动倒计时等等.今天,我们来使用jQuery实现一个简单的倒计时功能.
- jquery倒计时按钮常用于验证码倒计时
<!doctype html><html><head> <meta charset="utf-8"> <title>jq ...
- jquery 倒计时
今天让我公司前端大神,李杨哥,给做了一个jquery倒计时功能 很牛逼 看下面的效果图 这个倒计时是需要传值的,看效果代码讲解 百度云盘 ,压缩包永久有效 链接: https://pan.bai ...
- jquery倒计时代码
jquery倒计时代码<pre> <span id="day_show">0天</span> <strong id="hour_ ...
- jQuery倒计时组件(jquery.downCount.js)
//html <span class="days">00</span> <span class="hours">00< ...
- Jquery倒计时源码分享
在静态页添加显示倒计时的容器,并引用下面脚本,代入时间参数即可使用. timeoutDate——到期时间,时间格式为2014/01/01或2014/1/1 D——天 H——小时 M——分钟 S——秒 ...
- jQuery倒计时实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
随机推荐
- [New Portal]Windows Azure Virtual Machine (20) 关闭Azure Virtual Machine与VIP Address,Internal IP Address的关系(2)
<Windows Azure Platform 系列文章目录> 默认情况下,通过Azure Management Portal创建的Public IP和Private IP都是随机分配的. ...
- 用redux完成事务清单
今天再来一个例子,我们从组件开始. App.js import React, { PropTypes } from 'react' import { bindActionCreators } from ...
- JavaScript基础—插曲
Javascript基础 1:js中我们最好使用单引号,其实可以使用双引号的但是为了区别所以js中全部使用单引号.注释和C#的是一样的.网页里面的执行顺序是从上到下依次执行的,不管你js放到哪里,都会 ...
- PHPcms 系统简单使用
1.站点/发布点的新建 1.1 发布点的新建: 发布点是设置站点与服务器之间的链接配置. 设置 - 发布点管理 - 添加发布点 发布点名:可以与接下来的站点名称相同 ftp服务器:用于设置PHPcms ...
- Android 手机上获取物理唯一标识码[转]
所有添加有谷歌账户的设备可以返回一个 ANDROID_ID 所有的CDMA设备对于 ANDROID_ID 和 TelephonyManager.getDeviceId() 返回相同的值(只要在设置时添 ...
- 【转载】MVC使用HandleErrorAttribute自定义异常
本文导读:在ASP.NET MVC中,可以使用HandleErrorAttribute特性来具体指定如何处理Action抛出的异常.只要某个Action设置了HandleErrorAttribute特 ...
- C语言学习015:联合(union)与枚举(enum)
联合 联合和结构的区别是,结构会为每个字段申请一片内存空间,而联合只是申请了一片内存空间然后所有字段都会保存到这片空间中,这片空间的大小由字段中最长的决定,下面我们就开始定义一个联合 //联合的定义 ...
- Socket接收大数据的方法
byte[] buffer = new byte[BufferSize]; int bytesRead; // 读取的字节数 MemoryStream msStream = new MemoryStr ...
- WinPhone学习笔记(一)——页面导航与页面相关
最近学一下Windows Phone(接下来简称“WinPhone”)的开发,在很久很久前稍探究一下WinPhone中对一些传感器的开发,那么现在就从头来学学WinPhone的开发.先从WinPhon ...
- C#写快速排序
//先上快排代码------------------------------------------------------------------------public static void Q ...