首页 web前端 js教程 基于jQuery的倒计时实现代码_jquery

基于jQuery的倒计时实现代码_jquery

May 16, 2016 pm 05:53 PM
倒计时

在线演示:http://demo.jb51.net/js/2012/mydaojishi/
打包下载:mydaojishi_jb51
核心代码:

复制代码 代码如下:

$(function(){
var tYear = ""; //输入的年份
var tMonth = ""; //输入的月份
var tDate = ""; //输入的日期
var iRemain = ""; //开始和结束之间相差的毫秒数
var sDate = ""; //倒计的天数
var sHour = ""; //倒计时的小时
var sMin = ""; //倒计时的分钟
var sSec = ""; //倒计时的秒数
var sMsec = ""; //毫秒数
//通用工具函数,在个位数上加零,根据传的N的参数,来设前面加几个零
function setDig(num,n){
var str = ""+num;
while(str.lengthstr="0"+str
}
return str;
}
//获得相差的天,小时,分钟,秒
function getdate(){
//创建开始时间和结束时间的日期对象
var oStartDate = new Date();
var oEndDate = new Date();
//获取文本框的值
tYear = $("#tyear").val();
tMonth = $("#tmonth").val();
tDate = $("#tdate").val();
//设置结束时间
oEndDate.setFullYear(parseInt(tYear));
oEndDate.setMonth(parseInt(tMonth)-1);
oEndDate.setDate(parseInt(tDate));
oEndDate.setHours(0);
oEndDate.setMinutes(0);
oEndDate.setSeconds(0);
//求出开始和结束时间的秒数(除以1000)
iRemain = (oEndDate.getTime() - oStartDate.getTime())/1000;
//总的秒数除以一天的秒数,再取出整数部分,就得出有多少天。
sDate = setDig(parseInt(iRemain/(60*60*24)),3);
//总的秒数除以一天的秒数,然后取其中的余数,就是把整数天扣除之后,剩下的总秒数。
iRemain %= 60*60*24;
//剩下的总秒数除以一个小时的秒数,再取整数部分,就是有多少小时。
sHour = setDig(parseInt(iRemain/(60*60)),2)
//剩下的总秒数除以一个小时的秒数,再取其余数,这个余数,就是扣除小时这后,剩下的总秒数。
iRemain %= 60*60;
//剩下的总秒数除以一分钟的秒数,再取其整数部分,就是有多少分钟。
sMin = setDig(parseInt(iRemain/60),2)
//剩下的总秒数除以一分钟的秒数,再取其余数,这个余数,就是扣除分钟之后,剩下的总秒数。
iRemain%=60;
//剩下的秒数
sSec = setDig(iRemain,2);
//毫秒数
sMsec = sSec*100;
}
//更改显示的时间
function updateShow(){
$(".showdate span").text(tYear+"-"+tMonth+"-"+tDate);
$(".count span").each(function(index, element) {
if(index==0){
$(this).text(sDate);
}else if(index==1){
$(this).text(sHour);
}else if(index == 2){
$(this).text(sMin);
}else if(index == 3){
$(this).text(sSec);
}else if(index == 4){
$(this).text(sMsec);
}
});
}
//每一秒执行一次时间更新
function autoTime(){
getdate();
//如果小于零,清除调用自己,并且返回
if(iRemainclearTimeout(setT);
return;
}
updateShow();
var setT = setTimeout(autoTime,1000);
}
//点击按钮开始计时
$("button").click(function(){
autoTime();
})
})


记录需要注意的地方:

1.取模运算:

  iRemain %= 60*60*24;
就是返回余数,在这个实例中的余数,就是把整数拿走后,剩下的秒数。

2.工具函数 setDig(num,n)  可以根据传入的参数,自动在传入的数字前加零
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

如何通过C++编写一个简单的倒计时程序? 如何通过C++编写一个简单的倒计时程序? Nov 03, 2023 pm 01:39 PM

C++是一种广泛使用的编程语言,在编写倒计时程序方面非常方便和实用。倒计时程序是一种常见的应用,它能为我们提供非常精确的时间计算和倒计时功能。本文将介绍如何使用C++编写一个简单的倒计时程序。实现倒计时程序的关键就是使用计时器来计算时间的流逝。在C++中,我们可以使用time.h头文件中的函数来实现计时器的功能。下面是一个简单的倒计时程序的代码

如何使用Vue实现按钮倒计时特效 如何使用Vue实现按钮倒计时特效 Sep 21, 2023 pm 02:03 PM

如何使用Vue实现按钮倒计时特效随着Web应用程序的日益普及,我们经常需要在用户与页面进行交互时使用一些动态效果来提升用户体验。其中,按钮的倒计时特效是非常常见且实用的一种效果。本文将介绍如何使用Vue框架来实现按钮倒计时特效,并给出具体的代码示例。首先,我们需要创建一个Vue组件,包含一个按钮和倒计时的功能。在Vue中,组件是一种可复用的Vue实例,视图会

win10开机10秒倒计时怎么取消? Win10取消开机倒计时的三种方法 win10开机10秒倒计时怎么取消? Win10取消开机倒计时的三种方法 Feb 29, 2024 pm 07:25 PM

在win10中,开机倒数默认是启用的。当我们在开机之后,会看到一个倒数计时的界面,通常是10秒的倒数。在这个时间之内,我们可以选择是否继续开机或者进行一些其它的操作。虽然开机倒数为我们的系统带来了些许便利,但在一些情况下也可能带来麻烦。想取消显示,但是不知道怎么操作,这篇文章是本站给大家带来的Win10开机几秒倒计时取消方法。了解win10开机倒数在win10中,开机倒数默认是启用的。当我们在开机之后,会看到一个倒数计时的界面,通常是10秒的倒数。在这个时间之内,我们可以选择是否继续开机或者进行

如何使用CSS制作倒计时效果的实现步骤 如何使用CSS制作倒计时效果的实现步骤 Oct 26, 2023 am 10:36 AM

如何使用CSS制作倒计时效果的实现步骤倒计时效果是网页开发中常见的一个功能,可以为用户呈现倒计时的动态效果,给人以紧迫感和期待感。本文将介绍如何使用CSS来实现倒计时效果,并给出详细的实现步骤和代码示例。实现步骤如下:步骤一:HTML结构搭建首先,在HTML中创建一个div容器,用于包裹倒计时的内容。例如:<divclass="countd

基于JavaScript开发网页倒计时应用 基于JavaScript开发网页倒计时应用 Aug 08, 2023 am 09:55 AM

基于JavaScript开发网页倒计时应用随着互联网的发展,网页应用在我们的生活中扮演着越来越重要的角色。其中,倒计时应用是一种常见的功能,在各种场合都有广泛的应用。本文将介绍如何使用JavaScript开发一个简单的网页倒计时应用,并附上相应的代码示例。一、创建HTML结构首先,我们需要创建一个HTML文件,用于构建网页倒计时应用的基本结构。在文档的&lt

uniapp实现如何使用定时器实现页面倒计时效果 uniapp实现如何使用定时器实现页面倒计时效果 Oct 18, 2023 am 11:18 AM

Uniapp是一个跨平台的开发框架,可以使用它来开发多种类型的应用程序,包括小程序、H5、安卓、iOS等。在Uniapp中,页面倒计时效果可以使用定时器来实现。定时器可以设置一个时间间隔,在每个时间间隔内执行指定的代码,从而实现页面倒计时的效果。下面是一个示例,演示如何使用定时器实现页面倒计时效果。首先,在需要显示倒计时的页面中的.vue文件中添加以下代码:

如何使用Vue实现验证码倒计时特效 如何使用Vue实现验证码倒计时特效 Sep 19, 2023 am 11:36 AM

如何使用Vue实现验证码倒计时特效随着互联网的发展,验证码已经成为了保护用户安全的重要手段之一。为了提高用户体验,我们可以使用倒计时特效来提示用户获取验证码的剩余时间。本文将介绍如何使用Vue来实现验证码倒计时的特效,并提供具体的代码示例。首先,我们需要创建一个Vue组件来实现验证码倒计时功能。在该组件中,我们可以定义一个倒计时的时间变量,用于存储剩余的秒数

如何在uniapp中实现倒计时和闹钟功能 如何在uniapp中实现倒计时和闹钟功能 Oct 20, 2023 pm 06:36 PM

如何在uniapp中实现倒计时和闹钟功能一、倒计时功能的实现:倒计时功能在实际开发中非常常见,可以用于实现各种倒计时功能,如验证码倒计时、秒杀倒计时等。下面通过uniapp框架来介绍如何实现倒计时功能。在uniapp项目中创建一个倒计时组件,可以命名为Countdown.vue。在Countdown.vue中,我们可以定义一个倒计时的变量和一个计时器的标志位

See all articles