บทความนี้อธิบายวิธีการของ JS เพื่อให้ได้เอฟเฟกต์การนับถอยหลังและการเลื่อนข้อความ แบ่งปันสำหรับการอ้างอิงของคุณ วิธีการใช้งานเฉพาะมีดังนี้:
หมายเหตุ: โดยทั่วไปเราจะเห็นกิจกรรมบางอย่างเช่นการเสนอราคาในร้าน Taobao บางแห่ง จากพวกเขาเราจะพบเอฟเฟกต์การนับถอยหลังบางครั้ง ในการประชุมประจำปีและโอกาสอื่น ๆ เราจะพบกิจกรรมลอตเตอรีและจากพวกเขาเรายังสามารถเห็นเอฟเฟกต์การเลื่อนทันที ที่นี่ฉันจะแบ่งปันวิธีที่จะบรรลุการนับถอยหลังและการเลื่อนข้อความโดยหวังว่ามันจะเป็นประโยชน์กับคุณ นี่คือการใช้งานส่วนใหญ่ผ่าน JS
1. การรับรู้ของเอฟเฟกต์การนับถอยหลัง
รหัสที่สมบูรณ์สำหรับส่วนหน้าแผนกต้อนรับมีดังนี้:
การคัดลอกรหัสมีดังนี้: <html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "เซิร์ฟเวอร์">
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> การใช้งาน Countdown Effect </title>
</head>
<body>
<form runat = "เซิร์ฟเวอร์">
<div id = "ตัวจับเวลา"> การคำนวณ - - </div>
<script type = "text/javascript">
var i = 0;
ฟังก์ชั่น timeto (dd, nowtstr) {
var t = วันที่ใหม่ (dd), // รับจำนวนมิลลิวินาทีทั้งหมดสำหรับเวลาที่กำหนด
n = (วันที่ใหม่ (NOWTSTR)) - (-100 * i), // รับจำนวนมิลลิวินาทีปัจจุบัน
c = t - n; // รับความแตกต่างของเวลา
ถ้า (c <= 0) {// ถ้าความแตกต่างน้อยกว่าหรือเท่ากับ 0 นั่นคือมันจะหมดอายุหรือหมดอายุแล้วโปรแกรมจะเปิดตัว
document.getElementById ('ตัวจับเวลา'). innerhtml = 'เหตุการณ์สิ้นสุดลงแล้ว';
ClearInterval (หน้าต่าง ['ttt']); // ล้างตัวจับเวลา
กลับ; // สิ้นสุดการดำเนินการ
-
var ds = 60 * 60 * 24 * 1000, // มีกี่มิลลิวินาทีในหนึ่งวัน
d = parseint (c/ds), // มิลลิวินาทีรวมหารด้วยมิลลิวินาทีของหนึ่งวันเพื่อให้ได้จำนวนวันที่แตกต่างกัน
H = ParseInt ((C - D * DS) / (3600 * 1000)), // จากนั้นใช้เวลาที่เหลืออยู่ในมิลลิวินาทีหลังจากจำนวนวันและหารด้วยมิลลิวินาทีต่อชั่วโมงเพื่อให้ได้ชั่วโมง
M = ParseInt ((C - D * DS - H * 3600 * 1000) / (60 * 1000)), // ลบมิลลิวินาทีของวันและชั่วโมงและหารด้วยมิลลิวินาทีต่อนาทีเพื่อรับนาที
S = ParseInt ((C - D * DS - H * 3600 * 1000 - M * 60 * 1000) / 1000); // รับมิลลิวินาทีสุดท้ายที่เหลือหารด้วย 1,000 และเป็นวินาทีและมิลลิวินาทีที่เหลือจะถูกละเว้นโดยอัตโนมัติ
document.getElementById ('ตัวจับเวลา'). innerhtml = '<p style = "margin-top: 5px;"> <b>' + d + '</b> วัน <b>' + h + '</b> ชั่วโมง <b>' + m + '</b> นาที <b>' // ในที่สุดสตริงรูปแบบคงที่จะได้รับการอัปเดตเป็น DIV พร้อมตัวจับเวลา ID
i ++;
-
(การทำงาน () {
หน้าต่าง ['ttt'] = setInterval (ฟังก์ชัน () {
// var timestr = "< %= endtimestr %>"; // ที่นี่คุณสามารถผ่านกำหนดเวลากิจกรรมไปยังเบื้องหน้าผ่านพื้นหลัง โปรดทราบว่าอยู่ในรูปแบบ "yyyy-mm-dd"
// var nowtstr = "< %= nowtimestr %>"; // ในทำนองเดียวกันเวลาปัจจุบันสามารถส่งผ่านไปยังเบื้องหน้าผ่านพื้นหลัง โปรดทราบว่ามันอยู่ในรูปแบบ "yyyy-mm-dd"
var timestr = "2013-10-21"; // นอกจากนี้คุณยังสามารถปรับแต่งกำหนดเวลาของรูปแบบ "yyyy-mm-dd"
var nowtstr = "2013-08-23"; // นอกจากนี้คุณยังสามารถปรับแต่งเวลาปัจจุบันของรูปแบบ "yyyy-mm-dd" ได้ที่นี่
ถ้า (timestr! = "") {
Timeto (Timestr, Nowstr); // กำหนดเวลาที่แตกต่างเฟสของการนับถอยหลังให้ความสนใจกับรูปแบบ
-
}, 100); // กำหนดตัวจับเวลาคำนวณและอัปเดตการแสดงผลของ DIV ทุก ๆ 100 มิลลิวินาทีนั่นคือ 1 วินาที
-
</script>
</form>
</body>
</html>
ภาคผนวก: Countdown Effect Lite เวอร์ชัน:
คัดลอกรหัสดังนี้: <! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> การใช้งาน Countdown Lite Effect </title>
</head>
<body>
<form runat = "เซิร์ฟเวอร์">
<table>
<tr>
<th id = "วัน"> </th>
<th id = "day2" width = "100"> </th>
<th id = "day3" width = "100"> </th>
<th id = "day4" width = "100"> </th>
</tr>
</table>
<script type = "text/javascript">
ฟังก์ชั่น timestr ()
-
var c = date.parse ("2014-11-11")-date.parse ((วันที่ใหม่ ()));
ถ้า (c <= 0)
-
การแจ้งเตือน ('กิจกรรมสิ้นสุดลง');
ClearInterval (aa); // ล้างตัวจับเวลา
-
var ds = 60 * 60 * 24 * 1000, // มีกี่มิลลิวินาทีในหนึ่งวัน
d = parseint (c/ds), // มิลลิวินาทีรวมหารด้วยมิลลิวินาทีของหนึ่งวันเพื่อให้ได้จำนวนวันที่แตกต่างกัน
H = ParseInt ((C - D * DS) / (3600 * 1000)), // จากนั้นใช้เวลาที่เหลืออยู่ในมิลลิวินาทีหลังจากจำนวนวันและหารด้วยมิลลิวินาทีต่อชั่วโมงเพื่อให้ได้ชั่วโมง
M = ParseInt ((C - D * DS - H * 3600 * 1000) / (60 * 1000)), // ลบมิลลิวินาทีของวันและชั่วโมงและหารด้วยมิลลิวินาทีต่อนาทีเพื่อรับนาที
S = ParseInt ((C - D * DS - H * 3600 * 1000 - M * 60 * 1000) / 1000); // รับมิลลิวินาทีสุดท้ายที่เหลือหารด้วย 1,000 และเป็นวินาทีและมิลลิวินาทีที่เหลือจะถูกละเว้นโดยอัตโนมัติ
document.getElementById ('วัน'). innerhtml = '<p style = "margin-top: 5px;"> <b>' + d + '</b> วัน </p>';
document.getElementById ('day2'). innerhtml = '<p style = "margin-top: 5px;"> <b>' + h + '</b> เมื่อ </p>';
document.getElementById ('day3'). innerhtml = '<p style = "margin-top: 5px;"> <b>' + m + '</b> คะแนน </p>'
document.getElementById ('day4'). innerhtml = '<p style = "margin-top: 5px;"> <b>' + s + '</b> วินาที </p>'
-
var aa = setInterval (timestr, 1,000);
</script>
</form>
</body>
</html>
ในที่สุดเราสามารถเห็นเอฟเฟกต์คล้ายกับที่แสดงในรูปด้านล่าง:
2. การใช้เอฟเฟกต์การเลื่อนข้อความ
ส่วนรหัสแผนกต้อนรับมีดังนี้:
การคัดลอกรหัสมีดังนี้:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "เซิร์ฟเวอร์">
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<title> การใช้งานเอฟเฟกต์การเลื่อนข้อความ </title>
<script type = "text/javascript" src = "jQuery-1.6.2.min.js"> </script>
<script type = "text/javascript">
ฟังก์ชั่น timeto (dd) {
document.getElementById ('textbox1'). value = dd; // ในที่สุดสตริงรูปแบบคงที่จะได้รับการอัปเดตไปยังกล่องข้อความด้วย ID TextBox1
-
$ (function () {
หน้าต่าง ['ttt'] = setInterval (aaa, 100); // ดำเนินการเมื่อหน้ากำลังโหลด
-
ฟังก์ชั่น stopInterval ()
-
ClearInterval (หน้าต่าง ['ttt']); // ล้างตัวจับเวลา
หน้าต่าง ['ttt'] = "";
var aa = "จางซาน, Li Si, วังวู, Zhao Liu, Sun Qi, Hu Ba, Zeng Jiu, Liu Shi, Yi Yi, Park ER";
var arr = aa.split (',');
var rdd = 9 * math.random ();
var leaveth = math.round (rdd);
ตัวอักษร var = arr [leth] .tostring ();
document.getElementById ('textbox1'). value = lefts;
-
ฟังก์ชั่น aaa () {
var aa = "จางซาน, Li Si, วังวู, Zhao Liu, Sun Qi, Hu Ba, Zeng Jiu, Liu Shi, Yi Yi, Park ER";
var arr = aa.split (',');
var rdd = 9 * math.random ();
var leaveth = math.round (rdd);
ตัวอักษร var = arr [leth] .tostring ();
Timeto (Leths)
-
ฟังก์ชั่น timeto2 () {
if (window ['ttt'] == "") {
หน้าต่าง ['ttt'] = setInterval (aaa, 100);
-
-
</script>
</head>
<body>
<form runat = "เซิร์ฟเวอร์">
<input type = "text" id = "textbox1"/>
<อินพุต type = "button" value = "เริ่มลอตเตอรี" onclick = "timeto2 ();"/>
<อินพุต type = "button" value = "รับผู้ชมโชคดี" onclick = "stopInterval ();"/>
</form>
</body>
</html>
การเรนเดอร์สุดท้ายมีดังนี้:
เสริมความรู้:
var myDate = วันที่ใหม่ ();
mydate.geteyear (); // รับปีปัจจุบัน (2 หลัก)
mydate.getlyear (); // รับทั้งปี (4 หลัก, 1970-????)
mydate.getMonth (); // รับเดือนปัจจุบัน (0-11, 0 แสดงถึงเดือนมกราคม)
myDate.getDate (); // รับวันปัจจุบัน (1-31)
mydate.getday (); // รับสัปดาห์ปัจจุบัน x (0-6, 0 หมายถึงวันอาทิตย์)
mydate.getTime (); // รับเวลาปัจจุบัน (จำนวนมิลลิวินาทีเริ่มต้นจาก 1970.1.1)
mydate.getHours (); // รับจำนวนชั่วโมงปัจจุบัน (0-23)
mydate.getMinutes (); // รับจำนวนนาทีปัจจุบัน (0-59)
mydate.getSeconds (); // รับหมายเลขปัจจุบันของวินาที (0-59)
mydate.getMilliseconds (); // รับจำนวนมิลลิวินาทีปัจจุบัน (0-999)
MyDate.TolocalEdatestring (); // รับวันที่ปัจจุบัน
var mytime = mydate.tolocaletimestring (); // รับเวลาปัจจุบัน
myDate.tolocalestring (); // รับวันที่และเวลา
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรมเว็บของทุกคนตาม JS