В этой статье описывается метод 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>
<тело>
<form runat = "server">
<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 ('timer'). innerhtml = 'событие закончилось';
clearInterval (window ['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> дней <b>' + h + '</b> часов <b>' + m + '</b> минуты <b>' + s + '</b> секунд </p>'; // Наконец, строка фиксированного формата обновляется до Div с таймером идентификатора
i ++;
}
(function () {
window ['ttt'] = setInterval (function () {
// var TimeStR = "< %= endTimeStr %>"; // Здесь вы можете передать крайний срок действия на передний план через фон. Обратите внимание, что это в формате "yyyy-mm-dd"
// var nowststr = "< %= nowtimest %>"; // Аналогично, текущее время может быть передано на передний план через фон. Обратите внимание, что это также в формате "yyyy-mm-dd"
var TimeStR = "2013-10-21"; // Вы также можете настроить крайний срок формата "yyyy-mm-dd".
var nowtstr = "2013-08-23"; // Вы также можете настроить текущее время формата "yyyy-mm-dd" здесь
if (timest! = "") {
Timeto (Timestry, Nowstr); // Определите время разницы в фазах обратного отсчета, обратите внимание на формат
}
}, 100); // Определите таймер, вычислите и обновляете отображение DIV каждые 100 миллисекунд, то есть 1 секунду
}) ();
</script>
</form>
</body>
</html>
Дополнение: Effectday 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">
<голова>
<meta http-equiv = "content-type" content = "text /html; charset = utf-8" />
<Title> реализация Countdown Lite Effect </title>
</head>
<тело>
<form runat = "server">
<Таблица>
<tr>
<th id = "day"> </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 ((new Date ()));
if (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> when </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> секунды </p>'
}
var aa = setInterval (timest, 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" />
<TILE> реализация эффекта прокрутки текста </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 () {
Window ['ttt'] = setInterval (AAA, 100); // выполнять при загрузке страницы
});
Функция StopInterval ()
{
clearInterval (window ['ttt']); // очистить таймер
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 leaveth = math.round (rdd);
var witds = 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 witds = arr [leth] .toString ();
Вимто (Летс)
}
функция timeTo2 () {
if (window ['ttt'] == "") {
Window ['ttt'] = setInterval (AAA, 100);
}
}
</script>
</head>
<тело>
<form runat = "server">
<input type = "text" id = "textbox1"/>
<input type = "button" value = "запустить лотерею" onclick = "timeTo2 ();"/>
<input type = "button" value = "Get Lucky Audiuty" onclick = "stopInterval ();"/>
</form>
</body>
</html>
Окончательные визуализации следующие:
Дополнение знаний:
var mydate = new Date ();
mydate.getyear (); // Получить текущий год (2 цифры)
mydate.getfyear (); // Получить полный год (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.