カウントダウンとテキストスクロール効果のJS実装例_JavaScriptスキル-jsチュートリアル-php.cn

カウントダウンとテキストスクロール効果のJS実装例_JavaScriptスキル

WBOY

リリース： 2016-05-16 16:32:54

オリジナル

1227 人が閲覧しました

この記事の例では、JS を使用してカウントダウンとテキストのスクロール効果を実装する方法を説明します。皆さんの参考に共有してください。具体的な実装方法は以下の通りです。

注: 通常、一部の淘宝網ストアでは入札などの活動が見られ、年次総会やその他の行事では、カウントダウン効果が見られることもあります。ランダムなスクロール効果も確認できます。ここではカウントダウンとテキストスクロールを実装する方法を紹介したいと思います。これは主に js を通じて実装されます。

1.カウントダウンエフェクトの実装

フロントエンド部分の完全なコードは次のとおりです:

コードをコピーコードは次のとおりです:

カウントダウン効果の実現

計算中です。。。

<スクリプトタイプ="text/javascript">
var i = 0;
function TimeTo(dd, nowtstr) {
var t = new Date(dd), //指定された時間の合計ミリ秒数を取得します
n = (new Date(nowtstr)) - (-100 * i), //現在のミリ秒数を取得します
c = t - n //時差を取得します
If (c document.getElementById('timer').innerHTML = 'アクティビティは終了しました';
Clearinterval (window ['ttt']) // タイマーをクリアします
Return; //実行を終了
}
var ds = 60 * 60 * 24 * 1000, //1 日は何ミリ秒
d = parseInt(c / ds), //合計ミリ秒を 1 日のミリ秒で割って、日数の差を取得します
h = parseInt((c - d * ds) / (3600 * 1000)), //日数の後の残りのミリ秒数を取得し、それを 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('timer').innerHTML = '

' d '' ; 時間' m '' ' ' //最後に、固定フォーマット文字列が
に更新されます。タイマーの div 私;
}
(関数() {
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, nowtstr); // カウントダウンの時間差を定義します。
の形式に注意してください。 }
}, 100); // タイマーを定義し、100 ミリ秒ごと、つまり 1 秒ごとに div の表示を計算して更新します
})();

補足:カウントダウンエフェクトのライトバージョン:

コードをコピーコードは次のとおりです:

<頭>

カウントダウンライト版エフェクトの実現

<テーブルボーダー="1">

<スクリプトタイプ="text/javascript">
関数 timestr()
{
var c = Date.parse("2014-11-11")-Date.parse((new Date()));
If(c {
alter('アクティビティは終了しました');
clearInterval(aa);//タイマーをクリア
}
var ds = 60 * 60 * 24 * 1000, //1 日は何ミリ秒
d = parseInt(c / ds), //合計ミリ秒を 1 日のミリ秒で割って、日数の差を取得します
h = parseInt((c - d * ds) / (3600 * 1000)), //日数の後の残りのミリ秒数を取得し、それを 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 = '

' d 'Day
document.getElementById('day2').innerHTML = '

'';
document.getElementById('day3').innerHTML = '

' 分

' document.getElementById('day4').innerHTML = '

' ''
}
var aa = setInterval(timestr,1000);