Artikel ini menjelaskan metode JS untuk mencapai penghitungan mundur dan efek pengguliran teks. Bagikan untuk referensi Anda. Metode implementasi spesifik adalah sebagai berikut:
Catatan: Secara umum, kita akan melihat beberapa kegiatan seperti penawaran di beberapa toko Taobao. Dari mereka, kami kadang -kadang akan menemukan beberapa efek hitung mundur. Dalam beberapa pertemuan tahunan dan acara -acara lainnya, kami juga akan menemukan beberapa kegiatan lotre, dan dari mereka, kami juga dapat melihat beberapa efek gulir langsung. Di sini saya akan berbagi dengan Anda cara untuk mencapai hitungan mundur dan menggulir teks, berharap ini akan membantu Anda. Ini terutama diimplementasikan melalui JS.
1. Realisasi efek hitung mundur
Kode lengkap untuk bagian meja depan adalah sebagai berikut:
Salinan kode adalah sebagai berikut: <html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> Implementasi efek hitung mundur </iteme>
</head>
<body>
<form runat = "server">
<Div ID = "Timer"> Perhitungan. . . </div>
<type skrip = "Teks/JavaScript">
var i = 0;
function timeto (dd, nowtstr) {
var t = Tanggal baru (dd), // Dapatkan jumlah total milidetik untuk waktu yang ditentukan
n = (Tanggal Baru (NowTStr)) - (-100 * i), // Dapatkan jumlah milidetik saat ini
c = t - n; // Dapatkan perbedaan waktu
if (c <= 0) {// Jika perbedaannya kurang dari atau sama dengan 0, yaitu, ia kedaluwarsa atau baru saja kedaluwarsa, maka program akan diluncurkan
document.geteLementById ('timer'). innerHtml = 'event telah berakhir';
clearInterval (window ['ttt']); // Bersihkan timer
kembali; // Akhiri eksekusi
}
var ds = 60 * 60 * 24 * 1000, // Berapa milidetik yang ada dalam sehari
D = ParseInt (C/DS), // Total milidetik dibagi dengan milidetik satu hari untuk mendapatkan jumlah hari perbedaan
h = parseInt ((c - d * ds) / (3600 * 1000)), // Kemudian ambil sisa milidetik setelah jumlah hari dan bagi dengan milidetik per jam untuk mendapatkan jam
m = parseInt ((c - d * ds - h * 3600 * 1000) / (60 * 1000)), // Kurangi milidetik hari dan jam dan bagi dengan milidetik per menit untuk mendapatkan menit
s = parseInt ((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); // Dapatkan milidetik terakhir yang tersisa dibagi dengan 1000 dan merupakan detik, dan milidetik yang tersisa secara otomatis diabaikan
document.geteLementById ('timer'). innerHtml = '<p style = "margin-top: 5px;"> <b>' + d + '</b> hari <b>' + h + '</b> jam <b>' + m + '</b> menit <b>' + s + '</b> </p> detik; // Akhirnya, string format tetap diperbarui ke Div dengan ID Timer
i ++;
}
(fungsi () {
window ['ttt'] = setInterval (function () {
// var timestr = "< %= endtimestr %>"; // Di sini Anda dapat meneruskan tenggat waktu aktivitas ke latar depan melalui latar belakang. Perhatikan bahwa itu dalam format "yyyy-mm-dd"
// var nowtstr = "< %= nowtimestr %>"; // Demikian pula, waktu saat ini dapat diteruskan ke latar depan melalui latar belakang. Perhatikan bahwa itu juga dalam format "yyyy-mm-dd"
var timestr = "2013-10-21"; // Anda juga dapat menyesuaikan tenggat waktu format "yyyy-mm-dd".
var nowtstr = "2013-08-23"; // Anda juga dapat menyesuaikan waktu saat ini dari format "yyyy-mm-dd" di sini
if (timestr! = "") {
Timeto (timestr, nowstr); // Tentukan waktu perbedaan fase hitungan mundur, perhatikan format
}
}, 100); // Tentukan timer, hitung dan perbarui tampilan div setiap 100 milidetik, yaitu, 1 detik
}) ();
</script>
</form>
</body>
</html>
Suplemen: Efek Hitung Mundur Versi Lite:
Salin kode sebagai berikut: <! Doctype html public "-// w3c // dtd xhtml 1.0 transisi // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> Implementasi Efek Hitung mundur Lite </iteme>
</head>
<body>
<form runat = "server">
<able>
<tr>
<tH id = "day"> </th>
<tH id = "day2" width = "100"> </th>
<tH id = "day3" width = "100"> </th>
<tH id = "day4" width = "100"> </th>
</tr>
</boable>
<type skrip = "Teks/JavaScript">
fungsi timestr ()
{
var c = date.parse ("2014-11-11")-date.parse ((tanggal baru ()));
if (c <= 0)
{
waspada ('aktivitas telah berakhir');
ClearInterval (AA); // Hapus timer
}
var ds = 60 * 60 * 24 * 1000, // Berapa milidetik yang ada dalam sehari
D = ParseInt (C/DS), // Total milidetik dibagi dengan milidetik satu hari untuk mendapatkan jumlah hari perbedaan
h = parseInt ((c - d * ds) / (3600 * 1000)), // Kemudian ambil sisa milidetik setelah jumlah hari dan bagi dengan milidetik per jam untuk mendapatkan jam
m = parseInt ((c - d * ds - h * 3600 * 1000) / (60 * 1000)), // Kurangi milidetik hari dan jam dan bagi dengan milidetik per menit untuk mendapatkan menit
s = parseInt ((c - d * ds - h * 3600 * 1000 - m * 60 * 1000) / 1000); // Dapatkan milidetik terakhir yang tersisa dibagi dengan 1000 dan merupakan detik, dan milidetik yang tersisa secara otomatis diabaikan
document.geteLementById ('day'). innerHtml = '<p style = "margin-top: 5px;"> <b>' + d + '</b> day </p>';
document.geteLementById ('day2'). innerHtml = '<p style = "margin-top: 5px;"> <b>' + h + '</b> ketika </p>';
document.geteLementById ('day3'). innerHtml = '<p style = "margin-top: 5px;"> <b>' + m + '</b> poin </p>'
document.geteLementById ('day4'). innerHtml = '<p style = "margin-top: 5px;"> <b>' + s + '</b> detik </p>'
}
var aa = setInterval (timestr, 1000);
</script>
</form>
</body>
</html>
Akhirnya kita dapat melihat efek yang mirip dengan yang ditunjukkan pada gambar di bawah ini:
2. Implementasi Efek Gulir Teks
Bagian kode meja depan adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta http-equiv = "konten tipe" content = "text /html; charset = utf-8" />
<title> Implementasi Efek Gulir Teks </iteme>
<script type = "text/javascript" src = "jQuery-1.6.2.min.js"> </script>
<type skrip = "Teks/JavaScript">
function timeto (dd) {
document.geteLementById ('textbox1'). value = dd; // Akhirnya, string format tetap diperbarui ke kotak teks dengan ID TextBox1.
}
$ (function () {
window ['ttt'] = setInterval (AAA, 100); // Jalankan saat halaman dimuat
});
fungsi stopInterval ()
{
clearInterval (window ['ttt']); // Bersihkan timer
window ['ttt'] = "";
var aa = "zhang san, li si, wang wu, zhao liu, sun qi, hu ba, zeng jiu, liu shi, yi yi, park er";
var arr = aa.split (',');
var rdd = 9 * math.random ();
var lreaveth = math.round (rdd);
var letters = arr [leth] .toString ();
document.geteLementById ('textbox1'). value = kiri;
}
fungsi aaa () {
var aa = "zhang san, li si, wang wu, zhao liu, sun qi, hu ba, zeng jiu, liu shi, yi yi, park er";
var arr = aa.split (',');
var rdd = 9 * math.random ();
var lreaveth = math.round (rdd);
var letters = arr [leth] .toString ();
Timeto (leths)
}
function timeTo2 () {
if (window ['ttt'] == "") {
window ['ttt'] = setInterval (AAA, 100);
}
}
</script>
</head>
<body>
<form runat = "server">
<input type = "text" id = "textbox1"/>
<input type = "tombol" value = "Mulai lotre" onclick = "timeTo2 ();"/>
<input type = "Tombol" value = "Get Lucky Audience" OnClick = "StopInterval ();"/>
</form>
</body>
</html>
Rendering terakhir adalah sebagai berikut:
Suplemen Pengetahuan:
var mydate = tanggal baru ();
mydate.getYear (); // Dapatkan tahun berjalan (2 digit)
mydate.getlyear (); // Dapatkan setahun penuh (4 digit, 1970-????)
mydate.getmonth (); // Dapatkan bulan saat ini (0-11, 0 mewakili Januari)
mydate.getDate (); // Dapatkan hari ini (1-31)
mydate.getday (); // Dapatkan minggu saat ini x (0-6, 0 mewakili hari Minggu)
mydate.gettime (); // Dapatkan waktu saat ini (jumlah milidetik mulai dari tahun 1970.1.1)
mydate.getHours (); // Dapatkan jumlah jam saat ini (0-23)
mydate.getMinutes (); // Dapatkan jumlah menit saat ini (0-59)
mydate.getSeconds (); // Dapatkan jumlah detik saat ini (0-59)
mydate.getmilliseconds (); // Dapatkan jumlah milidetik saat ini (0-999)
mydate.tolocaledateString (); // Dapatkan tanggal saat ini
var mytime = mydate.tolocaletimestring (); // Dapatkan waktu saat ini
mydate.tolocalestring (); // Dapatkan tanggal dan waktu
Saya harap artikel ini akan membantu pemrograman web semua orang berdasarkan JS.