jQuery团购倒计时特效实现方法


Posted in Javascript onMay 07, 2015

本文实例讲述了jQuery团购倒计时特效实现方法。分享给大家供大家参考。具体实现方法如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>倒计时测试</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script>
 function lxfEndtime(){
 $(".lxftime").each(function(){
  var lxfday=$(this).attr("lxfday");//用来判断是否显示天数的变量
  var endtime = new Date($(this).attr("endtime")).getTime();
  //取结束日期(毫秒值)
  var nowtime = new Date().getTime();
  //今天的日期(毫秒值)
  var youtime = endtime-nowtime;//还有多久(毫秒值)
  var seconds = youtime/1000;
  var minutes = Math.floor(seconds/60);
  var hours = Math.floor(minutes/60);
  var days = Math.floor(hours/24);
  var CDay= days ;
  var CHour= hours % 24;
  var CMinute= minutes % 60;
  var CSecond= Math.floor(seconds%60);
  //"%"是取余运算,可以理解为60进一后取余数,然后只要余数。
  if(endtime<=nowtime){
    $(this).html("已过期")
    //如果结束日期小于当前日期就提示过期啦
    }else{
    if($(this).attr("lxfday")=="no"){
    $(this).html("<i>剩余时间:</i><span>"+CHour+"</span>时<span>"+CMinute+"</span>分<span>"+CSecond+"</span>秒");
    //输出没有天数的数据
    }else{
    $(this).html("<i>剩余时间:</i><span>"+days+"</span><em>天</em><span>"+CHour+"</span><em>时</em><span>"+CMinute+"</span><em>分</em><span>"+CSecond+"</span><em>秒</em>");
    //输出有天数的数据
    }
   }
 });
 setTimeout("lxfEndtime()",1000);
 };
$(function(){
 lxfEndtime();
});
</script>
<style type="text/css">
<!--
*{
  font-style: normal;
  font-weight: normal;}
.haveday {
  padding: 20px;
  border: 1px dashed #000;
  margin-right: auto;
  margin-left: auto;
  width: 300px;
}
-->
</style>
</head>
<body>
<div class="haveday">
<h1>含有天数的倒计时</h1>
<div class="lxftime" endtime="11/15/2015 17:24:0"></div>
<div class="lxftime" endtime="11/8/2015 3:3:20"></div>
<div class="lxftime" endtime="9/6/2015 6:1:0"></div>
<div class="lxftime" endtime="6/6/2016 9:3:5"></div>
</div>
<p></p>
<div class="haveday">
<h1>没有天数的倒计时</h1>
<div class="lxftime" endtime="11/15/2015 17:24:0" lxfday="no"></div>
<div class="lxftime" endtime="11/8/2015 3:3:20" lxfday="no"></div>
<div class="lxftime" endtime="9/6/2015 6:1:0" lxfday="no"></div>
<div class="lxftime" endtime="6/6/2016 9:3:5" lxfday="no"></div>
</div>
</body>
</html>

希望本文所述对大家的jQuery程序设计有所帮助。

Javascript 相关文章推荐
Juqery Html(),append()等方法的Bug解决方法
Dec 13 Javascript
jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态
Oct 29 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JQuery中节点遍历方法实例
May 18 Javascript
js实现发送验证码后的倒计时功能
May 28 Javascript
浅谈js中test()函数在正则中的使用
Aug 19 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
Jun 12 Javascript
Vue实现百度下拉提示搜索功能
Jun 21 Javascript
layui 给数据表格加序号的方法
Aug 20 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
Aug 06 Javascript
Swiper实现导航栏滚动效果
Oct 16 Javascript
js由下向上不断上升冒气泡效果实例
May 07 #Javascript
jQuery动态效果显示人物结构关系图的方法
May 07 #Javascript
js显示文本框提示文字的方法
May 07 #Javascript
js实现模拟计算器退格键删除文字效果的方法
May 07 #Javascript
浅谈document.write()输出样式
May 07 #Javascript
js库Modernizr的介绍和使用
May 07 #Javascript
详谈LABJS按需动态加载js文件
May 07 #Javascript
You might like
关于PHP中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
php中用于检测一个地理IP地址是否可用的代码
2012/02/19 PHP
php连接函数implode与分割explode的深入解析
2013/06/26 PHP
PHP实现的大文件切割与合并功能示例
2018/04/10 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
laravel实现上传图片的两种方式小结
2019/10/12 PHP
JQuery 学习笔记 选择器之五
2009/07/23 Javascript
JS打开新窗口的2种方式
2013/04/18 Javascript
JS 实现点击a标签的时候让其背景更换
2013/10/15 Javascript
JavaScript函数详解
2015/02/27 Javascript
JavaScript简单修改窗口大小的方法
2015/08/03 Javascript
JavaScript中的继承之类继承
2016/05/01 Javascript
Easyui的组合框的取值与赋值
2016/10/28 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
2017/01/11 Javascript
微信小程序 支付功能实现PHP实例详解
2017/05/12 Javascript
react-native中ListView组件点击跳转的方法示例
2017/09/30 Javascript
JavaScript分步实现一个出生日期的正则表达式
2018/03/22 Javascript
Vue-不允许嵌套式的渲染方法
2018/09/13 Javascript
微信小程序textarea层级过高(盖住其他元素)问题的解决办法
2019/03/04 Javascript
three.js 制作动态二维码的示例代码
2020/07/31 Javascript
[58:25]VP vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python入门篇之条件、循环
2014/10/17 Python
举例详解Python中threading模块的几个常用方法
2015/06/18 Python
python 转换 Javascript %u 字符串为python unicode的代码
2016/09/06 Python
Python扩展内置类型详解
2018/03/26 Python
python调用staf自动化框架的方法
2018/12/26 Python
Python assert语句的简单使用示例
2019/07/28 Python
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
浅谈html5 video 移动端填坑记
2018/01/15 HTML / CSS
英国鹦鹉店:Parrot Essentials
2018/12/03 全球购物
初中生评语大全
2014/04/24 职场文书
英语三分钟演讲稿
2014/08/19 职场文书
出租房屋协议书
2014/09/14 职场文书
建筑技术负责人岗位职责
2015/04/13 职场文书
Python中for后接else的语法使用
2021/05/18 Python
详解Laravel框架的依赖注入功能
2021/05/27 PHP