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/ ...
随机推荐
- 在Mac下配置php开发环境:Apache+php+MySql
/private/etc/apache2/httpd.conf 一.启动Apache sudo apachectl start sudo apachectl -v 可以查看到Apache的版本信息 ...
- redis学习之二from github
大概敲了一遍基本命令,熟悉了redis的存储方式.现在开始进一步系统的学习.学习教程目前计划有三个,一个是github上的https://github.com/JasonLai256/the-litt ...
- NOIP模拟赛-旅行者问题 解题报告
旅行者问题 [问题描述] lahub是一个旅行者的粉丝,他想成为一个真正的旅行者,所以他计划开始一段旅行.lahub想去参观n个目的地(都在一条直道上).lahub在起点开始他的旅行.第i个目的地和起 ...
- SQL Server数字辅助表的实现
数字辅助表是一个连续整数的数列,通常用来实现多种不同的查询任务.大多分两类:足够大物理数字表和表函数,前者可以称为静态的,后者可以称为动态且按需生产. 物理数字表 物理数字表通常存在一 ...
- UTF-8 BOM头
BOM是什么 Unicode的学名是"Universal Multiple-Octet Coded Character Set",简称为UCS.UCS可以看作是"Unic ...
- ASP.NET Core开发-读取配置文件Configuration
ASP.NET Core 是如何读取配置文件,今天我们来学习. ASP.NET Core的配置系统已经和之前版本的ASP.NET有所不同了,之前是依赖于System.Configuration和XML ...
- 三星S4,呼转的来电,在来电界面上不显示的解决方案
因为工作关系,我有2个号码是呼叫转移到我现在的手机上的,如果有呼叫转移的来电的话,在通话界面里面没有提示该来电是呼叫转移来的.之前我用的诺基亚的,可以看到呼叫转移的来电,在号码的左边有个拐弯的箭头,提 ...
- linq 实现动态 orderby
class Pet { public string Name{get;set;} public int Age{get;set;} } void Main() { Pet[] pets = { }, ...
- webapi+entityframework分享
1. webapi允许跨域的增删改查要在web.config中加入以下文字 <system.webServer> <validation validateIntegratedMode ...
- [原创工具] ListView 调色盘 (Free)
说明:ListView 调色盘,用来快速调整 ListView Style 的颜色,能导出 Style 本文,及另存 *.style 或 *.fsf 文件. 适用:Android, iOS, Wind ...