Rumah hujung hadapan web tutorial js 基于jQuery的倒计时实现代码_jquery

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

May 16, 2016 pm 05:53 PM
undur

在线演示: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)  可以根据传入的参数,自动在传入的数字前加零
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk menulis program undur mudah dalam C++? Bagaimana untuk menulis program undur mudah dalam C++? Nov 03, 2023 pm 01:39 PM

C++ ialah bahasa pengaturcaraan yang digunakan secara meluas yang sangat mudah dan praktikal dalam menulis program undur. Program undur ialah aplikasi biasa yang boleh memberikan kita pengiraan masa dan fungsi kira detik yang sangat tepat. Artikel ini akan memperkenalkan cara menggunakan C++ untuk menulis program kira detik yang mudah. Kunci untuk melaksanakan program kira detik ialah menggunakan pemasa untuk mengira peredaran masa. Dalam C++, kita boleh menggunakan fungsi dalam fail pengepala time.h untuk melaksanakan fungsi pemasa. Berikut ialah kod untuk program kira detik yang mudah

Cara menggunakan Vue untuk melaksanakan kesan undur butang Cara menggunakan Vue untuk melaksanakan kesan undur butang Sep 21, 2023 pm 02:03 PM

Cara menggunakan Vue untuk melaksanakan kesan undur butang Dengan peningkatan populariti aplikasi web, kami selalunya perlu menggunakan beberapa kesan dinamik untuk meningkatkan pengalaman pengguna apabila pengguna berinteraksi dengan halaman. Antaranya, kesan undur butang adalah kesan yang sangat biasa dan praktikal. Artikel ini akan memperkenalkan cara menggunakan rangka kerja Vue untuk melaksanakan kesan undur butang dan memberikan contoh kod khusus. Pertama, kita perlu mencipta komponen Vue yang mengandungi butang dan fungsi kira detik. Dalam Vue, komponen ialah contoh Vue yang boleh diguna semula dan paparan akan

Bagaimana untuk membatalkan kira detik 10 saat untuk boot Win10? Bagaimana untuk membatalkan kira detik 10 saat untuk boot Win10? Feb 29, 2024 pm 07:25 PM

Dalam win10, kira detik but didayakan secara lalai. Apabila kita menghidupkan komputer, kita akan melihat antara muka undur, biasanya kira detik 10 saat. Dalam masa ini, kita boleh memilih sama ada untuk meneruskan but atau melakukan beberapa operasi lain. Walaupun kira detik but membawa sedikit kemudahan kepada sistem kami, ia juga boleh menyebabkan masalah dalam beberapa kes. Saya mahu membatalkan paparan, tetapi saya tidak tahu bagaimana untuk melakukannya Artikel ini membawa anda cara membatalkan kira detik beberapa saat selepas Win10 dimulakan. Fahami kira detik but win10 Dalam win10, kira detik but didayakan secara lalai. Apabila kita menghidupkan komputer, kita akan melihat antara muka undur, biasanya kira detik 10 saat. Dalam masa ini, kita boleh memilih sama ada untuk meneruskan but atau meneruskan

Cara menggunakan CSS untuk mencipta kesan undur Cara menggunakan CSS untuk mencipta kesan undur Oct 26, 2023 am 10:36 AM

Cara menggunakan CSS untuk mencipta kesan undur Kesan undur ialah fungsi biasa dalam pembangunan web Ia boleh memberikan pengguna kesan dinamik undur dan memberi orang rasa terdesak dan jangkaan. Artikel ini akan memperkenalkan cara menggunakan CSS untuk mencapai kesan undur, dan memberikan langkah pelaksanaan terperinci serta contoh kod. Langkah pelaksanaan adalah seperti berikut: Langkah 1: Pembinaan struktur HTML Mula-mula, cipta bekas div dalam HTML untuk membungkus kandungan undur. Contohnya: <divclass="countd

Membangunkan aplikasi kira detik web berdasarkan JavaScript Membangunkan aplikasi kira detik web berdasarkan JavaScript Aug 08, 2023 am 09:55 AM

Membangunkan aplikasi kira detik web berdasarkan JavaScript Dengan perkembangan Internet, aplikasi web memainkan peranan yang semakin penting dalam kehidupan kita. Antaranya, aplikasi undur adalah fungsi biasa dan digunakan secara meluas dalam pelbagai majlis. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk membangunkan aplikasi kira detik web yang mudah dan melampirkan contoh kod yang sepadan. 1. Cipta struktur HTML Mula-mula, kita perlu mencipta fail HTML untuk membina struktur asas aplikasi undur web. &lt dalam dokumen

Cara menggunakan pemasa untuk mencapai kesan undur halaman dalam uniapp Cara menggunakan pemasa untuk mencapai kesan undur halaman dalam uniapp Oct 18, 2023 am 11:18 AM

Uniapp ialah rangka kerja pembangunan merentas platform yang boleh digunakan untuk membangunkan pelbagai jenis aplikasi, termasuk applet, H5, Android, iOS, dll. Dalam Uniapp, kesan kira detik halaman boleh dicapai menggunakan pemasa. Pemasa boleh menetapkan selang masa dan melaksanakan kod yang ditentukan dalam setiap selang masa untuk mencapai kesan undur halaman. Di bawah ialah contoh yang menunjukkan cara menggunakan pemasa untuk mencapai kesan kira detik halaman. Mula-mula, tambahkan kod berikut pada fail .vue dalam halaman di mana kira detik perlu dipaparkan:

Cara menggunakan Vue untuk melaksanakan kesan kira detik kod pengesahan Cara menggunakan Vue untuk melaksanakan kesan kira detik kod pengesahan Sep 19, 2023 am 11:36 AM

Cara menggunakan Vue untuk melaksanakan kesan kira detik kod pengesahan Dengan perkembangan Internet, kod pengesahan telah menjadi salah satu cara penting untuk melindungi keselamatan pengguna. Untuk meningkatkan pengalaman pengguna, kami boleh menggunakan kesan kira detik untuk mengingatkan pengguna tentang baki masa untuk mendapatkan kod pengesahan. Artikel ini akan memperkenalkan cara menggunakan Vue untuk melaksanakan kesan khas kira detik kod pengesahan dan memberikan contoh kod khusus. Pertama, kita perlu mencipta komponen Vue untuk melaksanakan fungsi kira detik kod pengesahan. Dalam komponen ini, kita boleh menentukan pembolehubah masa undur untuk menyimpan saat yang tinggal

Bagaimana untuk melaksanakan fungsi kira detik dan penggera dalam uniapp Bagaimana untuk melaksanakan fungsi kira detik dan penggera dalam uniapp Oct 20, 2023 pm 06:36 PM

Cara melaksanakan fungsi kira detik dan jam penggera dalam uniapp 1. Pelaksanaan fungsi kira detik: Fungsi kira detik adalah sangat biasa dalam pembangunan sebenar dan boleh digunakan untuk melaksanakan pelbagai fungsi kira detik, seperti kira detik kod pengesahan, kira detik jualan kilat, dsb. Yang berikut menggunakan rangka kerja uniapp untuk memperkenalkan cara melaksanakan fungsi kira detik. Buat komponen undur dalam projek uniapp, yang boleh dinamakan Countdown.vue. Dalam Countdown.vue, kita boleh menentukan pembolehubah undur dan bendera pemasa.

See all articles