이 기사에서는 카운트 다운 및 텍스트 스크롤 효과를 달성하기위한 JS 방법에 대해 설명합니다. 참조를 위해 공유하십시오. 특정 구현 방법은 다음과 같습니다.
참고 : 일반적으로 일부 타오 바오 매장에서 입찰과 같은 일부 활동이 보입니다. 그들로부터, 우리는 때때로 몇 가지 카운트 다운 효과를 찾을 것입니다. 일부 연례 회의 및 기타 행사에서는 복권 활동도 찾을 수 있으며, 그로부터 즉각적인 스크롤 효과를 볼 수 있습니다. 여기에서는 카운트 다운 및 텍스트 스크롤을 달성하는 방법을 공유하겠습니다. 도움이되기를 바랍니다. 이것은 주로 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 = "타이머"> 계산. . . </div>
<script type = "text/javaScript">
var i = 0;
함수 Timeto (dd, nowtstr) {
var t = 새 날짜 (dd), // 지정된 시간 동안 총 밀리 초 수를 얻습니다.
n = (새 날짜 (nowtstr)) - (-100 * i), // 현재 밀리 초 수를 얻습니다.
c = t -n; // 시차를 얻습니다
if (c <= 0) {// 차이가 0보다 작거나 같으면 만료되거나 만료되면 프로그램이 시작됩니다.
document.getElementById ( 'Timer'). 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); // 남은 마지막 밀리 초를 1000으로 나눈 값을 1000으로, 나머지 밀리 초는 자동으로 무시됩니다.
document.getElementById ( 'Timer'). innerHtml = '<p style = "margin-top : 5px;"> <b>' + d + '</b> days <b>' + h + '</b> 시간 <b>' + m + '</b> ming <b>' + s + '</b> secords </p>'; // 마지막으로 고정 형식 문자열이 ID 타이머로 div로 업데이트됩니다.
i ++;
}
(기능 () {
창 [ 'ttt'] = setInterval (function () {
// var timest = "< %= endTimeStrest %>"; // 여기서는 활동 마감일을 배경을 통해 전경으로 전달할 수 있습니다. "yyyy-mm-dd"형식입니다.
// var nowtstr = "< %= nowtimeStret %>"; // 유사하게, 현재 시간은 배경을 통해 전경으로 전달 될 수 있습니다. "yyyy-mm-dd"형식도 있습니다.
var timest = "2013-10-21"; // "yyyy-mm-dd"형식의 마감일을 사용자 정의 할 수도 있습니다.
var nowtstr = "2013-08-23"; // 여기에서 "yyyy-mm-dd"형식의 현재 시간을 사용자 정의 할 수도 있습니다.
if (timest! = "") {
Timeto (Timest, Nowstr); // 카운트 다운의 위상차 정의, 형식에주의를 기울이십시오.
}
}, 100); // 타이머 정의, 100 밀리 초마다 DIV의 표시를 계산 및 업데이트합니다. 즉, 1 초
}) ();
</스크립트>
</form>
</body>
</html>
보충 : 카운트 다운 효과 라이트 버전 :
코드를 다음과 같이 복사하십시오.
<html xmlns = "http://www.w3.org/1999/xhtml">
<헤드>
<meta http-equiv = "content-type"content = "text /html; charset = utf-8" />
<title> 카운트 다운 라이트 효과의 구현 </title>
</head>
<body>
<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>
</테이블>
<script type = "text/javaScript">
함수 timest ()
{
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으로 나눈 값을 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);
</스크립트>
</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">
함수 시간 (dd) {
document.getElementById ( 'textbox1'). value = dd; // 마지막으로 고정 형식 문자열은 ID 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 ();
타임 토 (leths)
}
함수 timeto2 () {
if (창 [ 'ttt'] == "") {
창 [ 'ttt'] = setInterval (aaa, 100);
}
}
</스크립트>
</head>
<body>
<form runat = "Server">
<입력 유형 = "text"id = "textbox1"/>
<입력 유형 = "버튼"value = "복권 시작"onclick = "timeto2 ();"/>
<input type = "button"value = "운이 좋은 잠재 고객"onclick = "stopinterval ();"/>
</form>
</body>
</html>
최종 렌더링은 다음과 같습니다.
지식 보충 :
var mydate = 새로운 날짜 ();
mydate.getyear (); // 현재 연도 얻기 (2 자리)
mydate.getlyear (); // 1 년 내내 얻습니다 (4 자리, 1970- ????)
mydate.getmonth (); // 현재 달 받기 (0-11, 0은 1 월을 나타냅니다)
mydate.getDate (); // 현재 날짜를 얻습니다 (1-31)
mydate.getday (); // 현재 주 X를 받기 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를 기반으로 한 모든 사람의 웹 프로그래밍에 도움이되기를 바랍니다.