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/ ...
随机推荐
- LoRaWAN协议(五)--OTAA入网方式详述
前言 OTAA(Over-The-Air Activation),是LoRaWAN的一种空中入网方式.当node在上电的时候处于非入网状态时,需要先入网才能和服务器进行通信.其操作就是node发送jo ...
- finetuning caffe
还没解决,以下是解释fine-tune 比如说,先设计出一个CNN结构.然后用一个大的数据集A,训练该CNN网络,得到网络a.可是在数据集B上,a网络预测效果并不理想(可能的原因是数据集A和B存在一些 ...
- 【Pig源码分析】谈谈Pig的数据模型
1. 数据模型 Schema Pig Latin表达式操作的是relation,FILTER.FOREACH.GROUP.SPLIT等关系操作符所操作的relation就是bag,bag为tuple的 ...
- 【转载】HttpWebRequest开启gzip压缩简介
在用HttpWebRequest对象时,一般我们都没有开启gzip压缩,如果服务端返回的数据比较大,这是我们需要开启gzip压缩,怎么开启呢? 1.给HttpWebRequest对象,添加如下Head ...
- Socket开发框架之消息的回调处理
在一般的Socket应用里面,很多时候数据的发送和接收是分开处理的,也就是我们发送一个消息,不知道这个请求消息什么时候得到应答消息,而且收到对应的应答消息的时候,如果操作界面的内容,也是需要特别处理的 ...
- PHP类和对象等代码说明
1.定义和创建类和对象: 定义类要使用class关键字.例如:class 类名{//属性和方法} 创建对象使用new关键字.例如: $p1 = new 类名;,可以基于一个类创建多个对象. 2. 类属 ...
- DevExpress winform XtraEditor常用控件
最近在公司里面开始使用DevExpress winform的第三方控件进行开发和维护,这里整理一些常用控件的资料以便于后续查看 ComboBoxEdit 这个控件和winform自带的控件差不多,使用 ...
- mvc 修改 删除 linq
Models文件夹里面可以Linq,Entity两种映射框架,也允许有ADO的操作,甚至可以ADO代码和映射代码一起操作 控制器当中允许有相同的方法名,类似在做修改时有两个Modify方法,但是MVC ...
- Oracle数据库建表并用SQL编程分等级
--创建学生表create table XS_543 ( XH char(6) not null , XM varchar2(20) not null, ZYM varchar2(10), XB ch ...
- mysql学习笔记 第五天
使用分区数据表: 分区数据表和merge数据表具有相似的作用,但是分区数据表确确实实是一个数据表 ,不像merge是列出数据表的逻辑关系,并且分区数据表可以包括像myisam以外的 的数据表.创建分区 ...