文档章节

【js与jquery】倒计时代码

 蜗牛奔跑
发布于 2015/10/30 15:42
字数 334
阅读 25
收藏 0

1.效果图如下:

2.html代码:

[php] view plaincopy

  1. <div class="timeFix">  

  2.     <div class="daojishi" id="09/04/2012 00:00:00">  

  3.         <span class="timeh"></span>  

  4.         <span class="timem"></span>  

  5.         <span class="times"></span>  

  6.         <span class="timen"></span>  

  7.     </div>  

  8. </div>  


3.js代码:

[php] view plaincopy

  1. setInterval(lxfEndtime,60);  

  2. //倒计时  

  3. function lxfEndtime(){  

  4.       $(".daojishi").each(function(){  

  5.             //var lxfday=$(this).attr("lxfday");//用来判断是否显示天数的变量  

  6.             var endtime = new Date($(this).attr("id")).getTime();//取结束日期(毫秒值)  

  7.             var nowtime = new Date().getTime();        //今天的日期(毫秒值)  

  8.             var youtime = endtime-nowtime;//还有多久(毫秒值)  

  9.             var seconds = youtime/1000;//秒  

  10.             var minutes = Math.floor(seconds/60);//分  

  11.             var hours = Math.floor(minutes/60);//小时  

  12.             var days = Math.floor(hours/24);//天  

  13.             var CDay= days ;  

  14.             var CHour= hours % 24;  

  15.             var CMinute= minutes % 60;  

  16.             var CSecond= Math.floor(seconds%60);//"%"是取余运算,可以理解为60进一后取余数,然后只要余数。  

  17.             var c=new Date();     

  18.             var millseconds=c.getMilliseconds();  

  19.             var Cmillseconds=Math.floor(millseconds %100);  

  20.             if(CSecond<10){//如果秒数为单数,则前面补零  

  21.                 CSecond="0"+CSecond;  

  22.             }  

  23.             if(CMinute<10){ //如果分钟数为单数,则前面补零  

  24.                 CMinute="0"+CMinute;  

  25.             }  

  26.             if(CHour<10){//如果小时数为单数,则前面补零  

  27.                 CHour="0"+CHour;  

  28.             }  

  29.             if(Cmillseconds<10)  {//如果毫秒数为单数,则前面补零      

  30.                 Cmillseconds="0"+Cmillseconds;     

  31.             }     

  32.             if(endtime<=nowtime){  

  33.                 $(this).html("已过期")//如果结束日期小于当前日期就提示过期啦  

  34.             }else{  

  35.                 $(this).html("<span class='timeh'>"+CHour+"</span><span class='timem'>"+CMinute+"</span><span class='times'>"+CSecond+"</span><span class='timen'>"+Cmillseconds+"</span>");   

  36.             }  

  37.       });  



本文转载自:

粉丝 38
博文 615
码字总数 118352
作品 0
海淀
私信 提问
《JavaScript实用效果整理》系列分享专栏

整理一些使用的JavaScript效果,在Web开发中遇到的比较好的动态效果,都收藏在这里,对以后的网站开发增加不少的色彩 《JavaScript实用效果整理》已整理成PDF文档,点击可直接下载至本地查阅...

开元中国2015
2018/10/29
63
0
8款实用jQuery插件实例欣赏及源码下载

jQuery的确是一款非常轻巧强大的JS框架,相信每一位WEB开发者都非常喜欢他。许多jQuery插件不仅开源,而且代码和设计都十分优雅,对自己的JS开发能力也会有很大提高。下面分享8款实用jQuery插...

yykj
2012/12/12
5
0
10 个jQuery/JavaScript的圣诞主题效果

圣诞节快到了,赶快为你的网站打扮一番,换上节日的盛装吧!本文为你整理了10款使用jQuery和 JavaScript打造的圣诞主题效果,希望能给你带来些许惊喜。(PS:经过小编测试,下面的部分效果仅...

开心303
2011/12/13
2.5K
8
8 款实用的 jQuery 插件及源码

jQuery的确是一款非常轻巧强大的JS框架,相信每一位Web开发者都非常喜欢。许多jQuery插件不仅开源,而且代码和设计都十分优雅,对自己的JS开发能力也会有很大提高。下面分享8款实用jQuery插件...

yykj
2013/11/13
747
0
简析JavaScript中的Function类型(三)——作为值的函数

因为在ECMAScript中,函数名本身就是变量,所以函数也可以作为值来使用。也就是说,不仅可以像传递参数一样把一个函数传递给另一个函数,而且可以将一个函数作为另一个函数的结果返回。 1. 作...

Bob2100
03/23
10
0

没有更多内容

加载失败,请刷新页面

加载更多

代理模式之JDK动态代理 — “JDK Dynamic Proxy“

动态代理的原理是什么? 所谓的动态代理,他是一个代理机制,代理机制可以看作是对调用目标的一个包装,这样我们对目标代码的调用不是直接发生的,而是通过代理完成,通过代理可以有效的让调...

code-ortaerc
今天
5
0
学习记录(day05-标签操作、属性绑定、语句控制、数据绑定、事件绑定、案例用户登录)

[TOC] 1.1.1标签操作v-text&v-html v-text:会把data中绑定的数据值原样输出。 v-html:会把data中值输出,且会自动解析html代码 <!--可以将指定的内容显示到标签体中--><标签 v-text=""></......

庭前云落
今天
8
0
VMware vSphere的两种RDM磁盘

在VMware vSphere vCenter中创建虚拟机时,可以添加一种叫RDM的磁盘。 RDM - Raw Device Mapping,原始设备映射,那么,RDM磁盘是不是就可以称作为“原始设备映射磁盘”呢?这也是一种可以热...

大别阿郎
今天
12
0
【AngularJS学习笔记】02 小杂烩及学习总结

本文转载于:专业的前端网站☞【AngularJS学习笔记】02 小杂烩及学习总结 表格示例 <div ng-app="myApp" ng-controller="customersCtrl"> <table> <tr ng-repeat="x in names | orderBy ......

前端老手
昨天
16
0
Linux 内核的五大创新

在科技行业,创新这个词几乎和革命一样到处泛滥,所以很难将那些夸张的东西与真正令人振奋的东西区分开来。Linux内核被称为创新,但它又被称为现代计算中最大的奇迹,一个微观世界中的庞然大...

阮鹏
昨天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部