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/ ...
随机推荐
- Hibernate的session一级缓存
一级缓存是Session周期的,当session创建的时候就有,当session结束的时候,缓存被清空 当缓存存在的时候,每次查询的数据,都会放在缓存中,如果再次查询相同的数据,则不会再次查询数据库, ...
- 补充ICache
using System; using System.Collections.Generic; using System.Threading.Tasks; namespace System { /// ...
- 大M法(Big M Method)
前面一篇讲的单纯形方法的实现,但程序输入的必须是已经有初始基本可行解的单纯形表. 但实际问题中很少有现成的基本可行解,比如以下这个问题: min f(x) = –3x1 +x2 + x3 s.t. x ...
- HTML5实现3D和2D可视化QuadTree四叉树碰撞检测
QuadTree四叉树顾名思义就是树状的数据结构,其每个节点有四个孩子节点,可将二维平面递归分割子区域.QuadTree常用于空间数据库索引,3D的椎体可见区域裁剪,甚至图片分析处理,我们今天介绍的是 ...
- 局部页面传值Model
1:新建个局部页面,将这里页面的Model数据传递过去,在局部页面进行和一般页面一样的操作就行. 这里和HTML.Action不一样,对于HTML.action来说,它是新建了一个action来进行传 ...
- LeetCode - Binary Tree Level Order Traversal II
题目: Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from ...
- ASP.NET MVC网站在opera mobile emulator中浏览
众所周知,ASP.NET MVC4有一个Moblie Application,我们都可以通过这个来开发手机网站,当然为了简单,也可以在一般的MVC中的View下面加个后缀mobile,形如I ...
- Unicode中文和特殊字符的编码范围
编程中有时候需要用到匹配中文的正则,一般用 [ \u4e00-\u9fa5]+ 即可搞定.不过这正则对一般的火星文鸟语就不太适用了,甚至全角的标点符号都不包含在内.例如游戏里面的玩家名,普通青年一般都 ...
- 【SQL】靠谱的TRIM函数,附赠过程一枚
SQL中有LTRIM和RTRIM这两个函数分别用于去除字符串的首.尾空格,缺乏常见的能同时去除首尾的TRIM函数,另外,这俩函数都只对[空格]有效,所以如果首尾是制表符.换行符等等[空白],它们是不处 ...
- 15天玩转redis —— 第三篇 无敌的列表类型
据说60%的人使用redis看重的是redis中的list类型,那这个list有什么用呢???不用我说大家都明白,做队列使用呗,为什么用它呢,很简单呗, 因为有了它我就不需要专门的MQ产品啦,比如说 ...