تصف هذه المقالة طريقة JS لتحقيق تأثيرات العد التنازلي والتمرير النصية. شاركه للرجوع إليه. طريقة التنفيذ المحددة هي كما يلي:
ملاحظة: عمومًا ، سنرى بعض الأنشطة مثل تقديم العطاءات في بعض متاجر Taobao. منهم ، سنجد أحيانًا بعض تأثيرات العد التنازلي. في بعض الاجتماعات السنوية والمناسبات الأخرى ، سنجد أيضًا بعض أنشطة اليانصيب ، ومنها ، يمكننا أيضًا رؤية بعض الآثار الفورية للتمرير. هنا سوف أشارككم طريقة لتحقيق العد التنازلي والتمرير النصية ، على أمل أن يكون مفيدًا لك. يتم تنفيذ هذا بشكل رئيسي من خلال JS.
1. تحقيق تأثير العد التنازلي
الرمز الكامل لجزء مكتب الاستقبال هو كما يلي:
نسخة الكود كما يلي: <html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> تنفيذ تأثير العد التنازلي </title>
</head>
<body>
<form runat = "server">
<div id = "timer"> حساب. . . </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 ('timer'). innerhtml = 'event قد انتهى' ؛
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) ؛ // احصل على آخر ميلي ثانية متبقية مقسومًا على 1000 وهي الثواني ، ويتم تجاهل المللي ثانية المتبقية تلقائيًا تلقائيًا
document.getElementById ('timer'). innerhtml = '<p style = "margin-top: 5px ؛"> <b>' + d + '</b> days <b>' + h + '</b> ساعات <b>' + m + '</b> دقيقة <b>' + s + '</b> </b>' // أخيرًا ، يتم تحديث سلسلة التنسيق الثابتة إلى DIV مع مؤقت المعرف
i ++ ؛
}
(وظيفة () {
نافذة ['ttt'] = setInterval (function () {
// 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" هنا
if (timestr! = "") {
Timeto (Timestr ، Nowstr) ؛ // تحديد وقت اختلاف المرحلة من العد التنازلي ، انتبه إلى التنسيق
}
} ، 100) ؛ // تحديد الموقت ، وحساب وتحديث عرض DIV كل 100 ميلي ثانية ، أي 1 ثانية
}) () ؛
</script>
</form>
</body>
</html>
الملحق: الإصدار Lite Effect Effect:
انسخ الرمز على النحو التالي: <! doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "content-type" content = "text /html ؛ charset = utf-8" />
<title> تنفيذ التأثير العد التنازلي </title>
</head>
<body>
<form runat = "server">
<griding>
<tr>
<th id = "day"> </h>
<th id = "day2" width = "100"> </h>
<th id = "day3" width = "100"> </h>
<th id = "day4" width = "100"> </h>
</r>
</table>
<script type = "text/javaScript">
وظيفة timestr ()
{
var c = date.parse ("2014-11-11")-Date.Parse ((New Date ())) ؛
إذا (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) ؛ // احصل على آخر ميلي ثانية متبقية مقسومًا على 1000 وهي الثواني ، ويتم تجاهل المللي ثانية المتبقية تلقائيًا تلقائيًا
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> عندما يكون </p>' ؛
document.getElementById ('day3'). innerhtml = '<p style = "margin-top: 5px ؛"> <b>' + m + '</b> points </p>'
document.getElementById ('day4'). innerhtml = '<p style = "margin-top: 5px ؛"> <b>' + s + '</b> Seconds </p>'
}
var aa = setInterval (timestr ، 1000) ؛
</script>
</form>
</body>
</html>
أخيرًا ، يمكننا أن نرى التأثير المشابه للتأثير الموضح في الشكل أدناه:
2. تنفيذ تأثير تمرير النص
جزء رمز مكتب الاستقبال كما يلي:
نسخة الكود كما يلي:
<html xmlns = "http://www.w3.org/1999/xhtml">
<head runat = "server">
<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 ؛ // أخيرًا ، يتم تحديث سلسلة التنسيق الثابتة إلى مربع النص مع معرف TextBox1.
}
$ (function () {
نافذة ['ttt'] = setInterval (aaa ، 100) ؛ // تنفيذ عندما يتم تحميل الصفحة
}) ؛
وظيفة stopinterval ()
{
ClearInterval (نافذة ['ttt']) ؛ // مسح المؤقت
نافذة ['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 leaveth = math.round (rdd) ؛
حروف var = arr [leth] .toString () ؛
document.getElementById ('textbox1'). value = Lefts ؛
}
وظيفة 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 leaveth = math.round (rdd) ؛
حروف var = arr [leth] .toString () ؛
Timeto (Leths)
}
وظيفة timeto2 () {
if (window ['ttt'] == "") {
نافذة ['ttt'] = setInterval (aaa ، 100) ؛
}
}
</script>
</head>
<body>
<form runat = "server">
<type type = "text" id = "textbox1"/>
<type type = "button" value = "ابدأ اليانصيب" onClick = "timeto2 () ؛"/>
<type type = "button" value = "get lucky remost" onClick = "stopInterval () ؛"/>
</form>
</body>
</html>
العروض النهائية هي كما يلي:
ملحق المعرفة:
var mydate = new date () ؛
mydate.getyear () ؛ // احصل على العام الحالي (رقمين)
myDate.getlyar () ؛ // احصل على السنة الكاملة (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.getMillIconds () ؛ // احصل على العدد الحالي للمللي ثانية (0-999)
mydate.tolocaledateString () ؛ // احصل على التاريخ الحالي
var mytime = myDate.tolocaletimestring () ؛ // احصل على الوقت الحالي
mydate.tolocalestring () ؛ // الحصول على موعد ووقت
آمل أن تكون هذه المقالة مفيدة لبرمجة الويب للجميع بناءً على JS.