基于jQuery的倒计时实现代码_jquery
在线演示: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.length
}
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) 可以根据传入的参数,自动在传入的数字前加零

Heiße KI -Werkzeuge

Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool
Ausziehbilder kostenlos

Clothoff.io
KI-Kleiderentferner

Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem völlig kostenlosen KI-Gesichtstausch-Tool aus!

Heißer Artikel

Heiße Werkzeuge

Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6
Visuelle Webentwicklungstools

SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Heiße Themen



C++ ist eine weit verbreitete Programmiersprache, die sich beim Schreiben von Countdown-Programmen sehr praktisch und praktisch eignet. Das Countdown-Programm ist eine gängige Anwendung, die uns sehr genaue Zeitberechnungs- und Countdown-Funktionen bieten kann. In diesem Artikel wird erläutert, wie Sie mit C++ ein einfaches Countdown-Programm schreiben. Der Schlüssel zur Implementierung eines Countdown-Programms besteht darin, einen Timer zur Berechnung des Zeitablaufs zu verwenden. In C++ können wir die Funktionen in der Header-Datei time.h verwenden, um die Timer-Funktion zu implementieren. Das Folgende ist der Code für ein einfaches Countdown-Programm

So verwenden Sie Vue zum Implementieren von Button-Countdown-Effekten Mit der zunehmenden Beliebtheit von Webanwendungen müssen wir häufig einige dynamische Effekte verwenden, um die Benutzererfahrung zu verbessern, wenn Benutzer mit der Seite interagieren. Unter diesen ist der Countdown-Effekt der Taste ein sehr häufiger und praktischer Effekt. In diesem Artikel wird die Verwendung des Vue-Frameworks zum Implementieren von Button-Countdown-Effekten vorgestellt und spezifische Codebeispiele gegeben. Zuerst müssen wir eine Vue-Komponente erstellen, die eine Schaltfläche und eine Countdown-Funktion enthält. In Vue ist eine Komponente eine wiederverwendbare Vue-Instanz, und eine Ansicht ist dies

In Win10 ist der Boot-Countdown standardmäßig aktiviert. Wenn wir den Computer einschalten, sehen wir eine Countdown-Oberfläche, normalerweise einen 10-Sekunden-Countdown. Innerhalb dieser Zeit können wir wählen, ob wir mit dem Booten fortfahren oder andere Vorgänge ausführen möchten. Obwohl der Boot-Countdown unserem System eine gewisse Bequemlichkeit bringt, kann er in manchen Fällen auch zu Problemen führen. Ich möchte die Anzeige abbrechen, weiß aber nicht, wie das geht. In diesem Artikel erfahren Sie, wie Sie den Countdown von mehreren Sekunden nach dem Hochfahren von Win10 abbrechen. Verstehen Sie den Boot-Countdown von Win10. In Win10 ist der Boot-Countdown standardmäßig aktiviert. Wenn wir den Computer einschalten, sehen wir eine Countdown-Oberfläche, normalerweise einen 10-Sekunden-Countdown. Innerhalb dieser Zeit können wir wählen, ob wir mit dem Booten fortfahren oder fortfahren möchten

So erstellen Sie mit CSS einen Countdown-Effekt. Der Countdown-Effekt ist eine häufige Funktion in der Webentwicklung. Er kann Benutzern einen dynamischen Countdown-Effekt verleihen und den Menschen ein Gefühl von Dringlichkeit und Erwartung vermitteln. In diesem Artikel wird erläutert, wie Sie mit CSS den Countdown-Effekt erzielen, und es werden detaillierte Implementierungsschritte und Codebeispiele aufgeführt. Die Implementierungsschritte sind wie folgt: Schritt 1: Aufbau der HTML-Struktur Erstellen Sie zunächst einen div-Container in HTML, um den Countdown-Inhalt einzuschließen. Zum Beispiel: <divclass="countd

Entwicklung von Web-Countdown-Anwendungen auf Basis von JavaScript Mit der Entwicklung des Internets spielen Webanwendungen eine immer wichtigere Rolle in unserem Leben. Unter diesen ist die Countdown-Anwendung eine häufige Funktion und wird bei verschiedenen Gelegenheiten häufig verwendet. In diesem Artikel wird erläutert, wie Sie mit JavaScript eine einfache Web-Countdown-Anwendung entwickeln und entsprechende Codebeispiele anhängen. 1. Erstellen Sie die HTML-Struktur. Zuerst müssen wir eine HTML-Datei erstellen, um die Grundstruktur der Web-Countdown-Anwendung aufzubauen. < im Dokument

Uniapp ist ein plattformübergreifendes Entwicklungsframework, mit dem verschiedene Arten von Anwendungen entwickelt werden können, darunter Applets, H5, Android, iOS usw. In Uniapp kann der Seiten-Countdown-Effekt mithilfe eines Timers erreicht werden. Der Timer kann ein Zeitintervall festlegen und den angegebenen Code innerhalb jedes Zeitintervalls ausführen, um den Seiten-Countdown-Effekt zu erzielen. Unten sehen Sie ein Beispiel, das zeigt, wie Sie mit einem Timer einen Seiten-Countdown-Effekt erzielen. Fügen Sie zunächst den folgenden Code zur .vue-Datei auf der Seite hinzu, auf der der Countdown angezeigt werden soll:

So implementieren Sie mit Vue Countdown-Effekte für Bestätigungscodes Mit der Entwicklung des Internets sind Bestätigungscodes zu einem wichtigen Mittel zum Schutz der Benutzersicherheit geworden. Um das Benutzererlebnis zu verbessern, können wir Countdown-Effekte verwenden, um Benutzer an die verbleibende Zeit zum Erhalt des Bestätigungscodes zu erinnern. In diesem Artikel wird erläutert, wie Sie mit Vue die Spezialeffekte des Countdowns für den Bestätigungscode implementieren, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir eine Vue-Komponente erstellen, um die Countdown-Funktion für den Bestätigungscode zu implementieren. In dieser Komponente können wir eine Countdown-Zeitvariable definieren, um die verbleibenden Sekunden zu speichern

So implementieren Sie Countdown- und Weckerfunktionen in Uniapp 1. Implementierung der Countdown-Funktion: Die Countdown-Funktion ist in der tatsächlichen Entwicklung sehr verbreitet und kann zur Implementierung verschiedener Countdown-Funktionen verwendet werden, z. B. Countdown für Bestätigungscodes, Countdown für Flash-Verkäufe usw. Im Folgenden wird das Uniapp-Framework verwendet, um die Implementierung der Countdown-Funktion vorzustellen. Erstellen Sie im Uniapp-Projekt eine Countdown-Komponente mit dem Namen Countdown.vue. In Countdown.vue können wir eine Countdown-Variable und ein Timer-Flag definieren.
