この記事では、カウントダウンとテキストスクロール効果を達成するための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;
function timeto（dd、nowtstr）{
var t = new Date（dd）、//指定された時間のミリ秒の総数を取得します
n =（new Date（nowtstr）） - （-100 * i）、//現在のミリ秒数を取得します
c = t -n; //時差を取得します
（c <= 0）{//差は0以下、つまり有効期限が切れるか、有効期限が切れている場合、プログラムは起動されます
document.getElementById（ 'タイマー'）。innerhtml = 'イベントが終了しました';
ClearInterval（window ['ttt']）; //タイマーをクリアします
戻る; //実行を終了します
}
var ds = 60 * 60 * 24 * 1000、// 1日に何ミリ秒がありますか
d = parseint（c/ds）、//合計ミリ秒を1日のミリ秒で割って、日数の差を得る
h = parseint（（c -d * ds） /（3600 * 1000））、//残りのミリ秒を1日後に取り、1時間あたりミリ秒単位で分割して時間を取得する
m = parseint（（c -d * ds -h * 3600 * 1000） /（60 * 1000））、//日と時間のミリ秒を減算し、1分あたりミリ秒単位で分割して議事録を取得する
s = parseint（（c -d * ds -h * 3600 * 1000 -m * 60 * 1000） / 1000）; //最後の残りのミリ秒を1000で割って秒であり、残りのミリ秒は自動的に無視されます
document.getElementById（ 'タイマー'）。innerhtml = '<p style = "marve-top：5px;"> <b>' + d + '</b> days <b>' + h + '</b> hours <b>' + '</b> minutes <b>' + s + '</b> seconds; //最後に、固定形式の文字列がIDタイマー付きDIVに更新されます
i ++;
}
（関数 （） {
window ['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）; //タイマーを定義し、100ミリ秒ごとにDIVの表示を計算して更新します。つまり、1秒
}）（）;
</script>
</form>
</body>
</html>
サプリメント：CountDown Effect Liteバージョン：
次のようにコードをコピーします。
<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 = "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">
function timestr（）
{
var c = date.parse（ "2014-11-11"） - date.parse（（new date（）））;
if（c <= 0）
{
アラート（ 'アクティビティが終了しました'）;
ClearInterval（AA）; //タイマーをクリアします
}
var ds = 60 * 60 * 24 * 1000、// 1日に何ミリ秒がありますか
d = parseint（c/ds）、//合計ミリ秒を1日のミリ秒で割って、日数の差を得る
h = parseint（（c -d * ds） /（3600 * 1000））、//残りのミリ秒を1日後に取り、1時間あたりミリ秒単位で分割して時間を取得する
m = parseint（（c -d * ds -h * 3600 * 1000） /（60 * 1000））、//日と時間のミリ秒を減算し、1分あたりミリ秒単位で分割して議事録を取得する
s = parseint（（c -d * ds -h * 3600 * 1000 -m * 60 * 1000） / 1000）; //最後の残りのミリ秒を1000で割って秒であり、残りのミリ秒は自動的に無視されます
document.getElementById（ 'day'）。innerhtml = '<p style = "mign-top：5px;"> <b>' + d + '</b> day </p>';
document.getElementById（ 'day2'）。innerhtml = '<p style = "mirvish-top：5px;"> <b>' + h + '</b> </p>';
document.getElementById（ 'day3'）。innerhtml = '<p style = "mign-top：5px;"> <b>' + m + '</b>ポイント</p>'
document.getElementById（ 'day4'）。innerhtml = '<p style = "mign-top：5px;"> <b>' + s + '</b>秒</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"> </scrip>
<script type = "text/javascript">
function timeto（dd）{
document.getElementById（ 'textbox1'）。value = dd; //最後に、固定形式の文字列は、ID TextBox1を使用してテキストボックスに更新されます。
}
$（function（）{
window ['ttt'] = setinterval（aaa、100）; //ページが読み込まれているときに実行します
}）;
function 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 letthes = 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 letthes = arr [leth] .tostring（）;
タイムト（レス）
}
function timeto2（）{
if（window ['ttt'] == ""）{
window ['ttt'] = setinterval（aaa、100）;
}
}
</script>
</head>
<body>
<form runat = "server">
<入力型= "text" id = "textbox1"/>
<入力型= "button" value = "lotteryを起動" onclick = "timeto2（）;"/>
<入力型= "ボタン"値= "ラッキーオーディエンスを取得" onclick = "stopinterval（）;"/>
</form>
</body>
</html>
最終的なレンダリングは次のとおりです。
知識サプリメント：
var mydate = new date（）;
mydate.getyear（）; //今年を取得する（2桁）
mydate.getThyear（）; //通年を取得（4桁、1970- ????）
mydate.getMonth（）; //今月を取得します（0-11、0は1月を表します）
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に基づいたすべての人のWebプログラミングに役立つことを願っています。