ホームページ  >  記事  >  ウェブフロントエンド  >  Javascriptでフラッシュセール、共同購入、カウントダウン表示記録共有を実装_JavaScriptスキル

Javascriptでフラッシュセール、共同購入、カウントダウン表示記録共有を実装_JavaScriptスキル

WBOY
WBOYオリジナル
2016-05-16 17:29:071141ブラウズ

最近、不動産のフラッシュセール、共同購入用の電子商取引サイトを行いました(住宅のフラッシュセールもあります、価格は低くありません)、主に決定するためにフラッシュセールのカウントダウン表示があります現在時刻からフラッシュセール開始までの残り時間や、フラッシュセールの開始と終了を示すさまざまな表示があります。
最も重要な点は、いわゆる現在時刻には、ブラウザーが new Date() を通じて取得したクライアント時刻を使用できないということです。このように、ユーザーが自分のマシン時刻を変更している限り、カウントダウンは行われます。めちゃくちゃなので、現在時刻は次のようにする必要があります。 サーバー時刻が使用されるため、静的キャッシュページが使用されるため、現在時刻は ajax を使用して取得されます
Javascriptでフラッシュセール、共同購入、カウントダウン表示記録共有を実装_JavaScriptスキル

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




< /title><br><meta http-equiv="コンテンツ タイプ" content="text/html; charset=gb2312" /><br><meta http-equiv="コンテンツ言語" content=" zh-CN" /><br><meta http-equiv="X-UA-互換" content="IE=EmulateIE7" /><br><meta content="all" name="ロボット" /><br><meta name="author" content="" /><br></head><br><body onload='start()'><br>.<br>イベントの開始までまだ日があります: <span id="sk_time"></span> <!-- これはカウントダウン表示です--><br>.<br><br/ ><br><span id="wyz"><br><span class="btn_02"> フラッシュセールに参加してください! ! ! </span> <!-- これはフラッシュキルボタンです。カウントダウンが 0 に達すると、フラッシュキルスタイルになります--><br></span><br>.<br>< ;script type= "text/javascript"><br>var msbegintime = "1323446400000"; //これはアクティビティ開始時のタイムスタンプです<br>var msendtime = "1325174400000" //これはアクティビティ開始時のタイムスタンプですopens<br>function start (){<br> callBackServerTime("sk_time", "wyz", msbegintime, msendtime);<br>}<br>//_showtimediv: 時間表示領域、_showqdiv: ステータス表示領域<br> //これはサーバーに送信されます。 ajax リクエストにより、サーバーはサーバーの現在のタイムスタンプを返します。つまり、xmlobj.responseText はサーバーのタイムスタンプです<br>関数 callBackServerTime(_showtimediv, _showqdiv, _ms_begintime, _ms_endtime) {<br> var now = new Date();<br> var urlstr = "random=" Math.round(Math.random() * 10000000);<br> var ajaxobj = new AJAXRequest // AJAX オブジェクトを作成します ajaxobj.method = "GET"; // リクエストメソッドは GET<br> ajaxobj.url = "/gz/source/getServerTime.do?" // ajax のクロスドメインの問題に注意してください。 🎜> ajaxobj.callback = function(xmlobj) {<br> //ShowQTime (xmlobj.responseText, _showtimediv, _showqdiv, _ms_begintime, _ms_endtime, _tryid,sourceid); j.responseText はテストに便利です<br> }<br> ajaxobj .send(); // リクエスト送信<br>}<br>//「フラッシュセール」時間の動的表示 function<br>function ShowQTime(_showtimediv, _showqdiv, _nowtime, _ms_begintime, _ms_endtime) {<br> _nowtime = Number (_nowtime);<br> var timmer = Math.floor((_ms_endtime - _nowtime) / (1000)); <br> if (_nowtime >= _ms_begintime && timmer > 0) {;<br> // フラッシュセール進行中 <br> document.getElementById(_showtimediv).innerHTML = "<span class='pim_time'>0</span>days<span class='pim_time'>0</span>hours <span class ='pim_time'>0</span>分<span class='pim_time'>0</span>秒";<br> document.getElementById(_showqdiv).innerHTML = "<span class='btn_01' ><a href='/gz/sk/v/'> フラッシュセールが始まりました! ! !</a></span>";<br> } else {<br> > var n D = Math.floor(nMS / (1000 * 60 * 60 * 24));<br> var nH = Math.floor(nMS / (1000 * 60 * 60 * 24)); Floor(nMS / (1000 * 60 * 60)) % 24;<br> var nM = Math.floor(nMS / (1000 * 60)) % 60;<br> var nS = Math.floor(nMS / 1000) % 60;<br> var nMS = Math.floor(nMS / 100) % 10;<br> if (nD >= 0) {<br> var _timestr = "";<br> var snd = nD.toString ();<br> if (snd.length == 1) {<br> snd = "0" snd;<br> }<br> _timestr = "<span class='pim_time'>" (0, 1) snd.substring(1, 2) "</span>day" ;<br> var snH = nH.toString();<br> if (snH.length == 1) {<br> snH = "0" snH;<br> }<br> _timestr = "<span class ='pim_time'>" snH.substring(0, 1) snH.substring(1, 2) "</span>時間";<br> var snM = nM.toString();<br> .length == 1) {<br> 1, 2) "</span> minutes";<br> var snS = nS.toString ();<br> if (snS.length == 1) {<br> snS = "0" snS;<br> (_showtimediv).innerHTML = _timestr;<br>日 <span class='pim_time'> ;0</span>時間<span class='pim_time'>0</span>分<span class='pim_time'>0</span>秒"; <br> document.getElementById(_showqdiv).innerHTML = "<span class='btn_01'><a href='/gz/sk/v/'> フラッシュ セールは終了しました。 ! !  </a></span>";<br> }<br> }<br> //注意 (_nowtime 1000) 增加 1 秒<br> setTimeout("ShowQTime('" _showtimediv "','" _showqdiv) "','" (_nowtime 1000) "','" _ms_begintime "','" _ms_endtime "')", 1000);<br>}<br>function AJAXRequest() {<br> var xmlObj = false;<br> var CBfunc,ObjSelf;<br> ObjSelf=this;<br> try { xmlObj=new XMLHttpRequest; }<br> catch(e) {<br> try { xmlObj=new ActiveXObject("MSXML2.XMLHTTP"); }<br> catch(e2) {<br> try { xmlObj=new ActiveXObject("Microsoft.XMLHTTP"); }<br> catch(e3) { xmlObj=false }<br> }<br> } <br> if (!xmlObj) return false;<br> this.method="POST";<br> this.url;<br> this.async=true;<br> this.content="";<br> this .callback=function(cbobj) {return;}<br> this.send=function() {<br> if(!this.method||!this.url||!this.async) return false;<br> xmlObj.open (this.method, this.url, this.async);<br> if(this.method=="POST") xmlObj.setRequestHeader("Content-Type","application/x-www-form- urlencoded");<br> xmlObj.onreadystatechange=function() {<br> if(xmlObj.readyState==4) {<br> if(xmlObj.status==200) {<br> ObjSelf.callback(xmlObj) ;<br> }<br> }<br> }<br> if(this.method=="POST") xmlObj.send(this.content);<br> else xmlObj.send(nu ll);<br> }<br>}<br></script><br></body><br></html><br> </div></div><div class="nphpQianMsg"><div class="clear"></div></div><div class="nphpQianSheng"><span>声明:</span><div>この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。</div></div></div><div class="nphpSytBox"><span>前の記事:<a class="dBlack" title="js jquery がランダムに生成された ID を持つサーバー コントロールを取得する 3 つの方法" href="http://m.php.cn/ja/faq/16747.html">js jquery がランダムに生成された ID を持つサーバー コントロールを取得する 3 つの方法</a></span><span>次の記事:<a class="dBlack" title="js jquery がランダムに生成された ID を持つサーバー コントロールを取得する 3 つの方法" href="http://m.php.cn/ja/faq/16749.html">js jquery がランダムに生成された ID を持つサーバー コントロールを取得する 3 つの方法</a></span></div><div class="nphpSytBox2"><div class="nphpZbktTitle"><h2>関連記事</h2><em><a href="http://m.php.cn/ja/article.html" class="bBlack"><i>続きを見る</i><b></b></a></em><div class="clear"></div></div><ul class="nphpXgwzList"><li><b></b><a href="http://m.php.cn/ja/faq/1609.html" title="Bootstrap リスト グループ コンポーネントの詳細な分析" class="aBlack">Bootstrap リスト グループ コンポーネントの詳細な分析</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1640.html" title="JavaScript関数のカリー化の詳細説明" class="aBlack">JavaScript関数のカリー化の詳細説明</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/1949.html" title="JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)" class="aBlack">JS パスワードの生成と強度検出の完全な例 (デモ ソース コードのダウンロード付き)</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2248.html" title="Angularjs は WeChat UI (weui) を統合します" class="aBlack">Angularjs は WeChat UI (weui) を統合します</a><div class="clear"></div></li><li><b></b><a href="http://m.php.cn/ja/faq/2351.html" title="JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル" class="aBlack">JavaScript を使用して繁体字中国語と簡体字中国語をすばやく切り替える方法と、簡体字中国語と繁体字中国語の切り替えをサポートする Web サイトのトリック_javascript スキル</a><div class="clear"></div></li></ul></div></div><footer><div class="footer"><div class="footertop"><img src="/static/imghwm/logo.png" alt=""><p>福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!</p></div><div class="footermid"><a href="http://m.php.cn/ja/about/us.html">私たちについて</a><a href="http://m.php.cn/ja/about/disclaimer.html">免責事項</a><a href="http://m.php.cn/ja/update/article_0_1.html">Sitemap</a></div><div class="footerbottom"><p> © php.cn All rights reserved </p></div></div></footer><script>isLogin = 0;</script><script type="text/javascript" src="/static/layui/layui.js"></script><script type="text/javascript" src="/static/js/global.js?4.9.47"></script></div><script src="https://vdse.bdstatic.com//search-video.v1.min.js"></script><link rel='stylesheet' id='_main-css' href='/static/css/viewer.min.css' type='text/css' media='all'/><script type='text/javascript' src='/static/js/viewer.min.js?1'></script><script type='text/javascript' src='/static/js/jquery-viewer.min.js'></script><script>jQuery.fn.wait = function (func, times, interval) { var _times = times || -1, //100次 _interval = interval || 20, //20毫秒每次 _self = this, _selector = this.selector, //选择器 _iIntervalID; //定时器id if( this.length ){ //如果已经获取到了,就直接执行函数 func && func.call(this); } else { _iIntervalID = setInterval(function() { if(!_times) { //是0就退出 clearInterval(_iIntervalID); } _times <= 0 || _times--; //如果是正数就 -- _self = $(_selector); //再次选择 if( _self.length ) { //判断是否取到 func && func.call(_self); clearInterval(_iIntervalID); } }, _interval); } return this; } $("table.syntaxhighlighter").wait(function() { $('table.syntaxhighlighter').append("<p class='cnblogs_code_footer'><span class='cnblogs_code_footer_icon'></span></p>"); }); $(document).on("click", ".cnblogs_code_footer",function(){ $(this).parents('table.syntaxhighlighter').css('display','inline-table');$(this).hide(); }); $('.nphpQianCont').viewer({navbar:true,title:false,toolbar:false,movable:false,viewed:function(){$('img').click(function(){$('.viewer-close').trigger('click');});}}); </script></body></html>