锐客网

  1. 首页 > 睿知 > it技术 > >

给SHOPIFY店铺产品页添加倒计时（无需安装APP）

IT知识产品倒计时shopify

【给SHOPIFY店铺产品页添加倒计时（无需安装APP）】沉舟侧畔千帆进，病树前头万木春。这篇文章主要讲述给SHOPIFY店铺产品页添加倒计时（无需安装APP）相关的知识，希望能为你提供帮助。

< !-- edit by yunecommerce.com add the countdown timer --> < style> #progress_bar{margin-top:15px}.progressbar.progressbar{background:#ffe8e8; border:0px solid whitesmoke; height:11px}.progressbar.progressbar div{background:#d95350; height:11px}.progressbar.progressbar.active div{-webkit-animation:2s linear 0s normal none infinite running progress-bar-stripes; animation:2s linear 0s normal none infinite running progress-bar-stripes}.progress-striped.progressbar.progressbar div{background-image:-webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent); background-image:linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, rgba(0, 0, 0, 0) 25%, rgba(0, 0, 0, 0) 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, rgba(0, 0, 0, 0) 75%, rgba(0, 0, 0, 0)); background-size:40px 40px}.items-count{margin-top:0px; margin-bottom:0px}.count{color:#a94442; padding:1px}.items-count p{padding-bottom:5px; margin:0; text-transform:uppercase; font-weight:700; text-align:center; font-family:"Open Sans",Arial,sans-serif}.progressbar{position:relative; display:block; background-color:#ca0000; border:1px solid #ddd; margin-bottom:15px; -webkit-box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1); box-shadow:inset 0 1px 2px rgba(0, 0, 0, .1)}.progressbar > div{background-color:#ca0000; width:0; margin-bottom:0; height:15px}.progressbar > div.less-than-ten{background-color:#ca0000 !important}#clock-ticker{display:block; margin-bottom:15px}#clock-ticker .block{position:relative; color:#000; font-weight:bold; float:left; text-align:center; width:25%}#clock-ticker .block .flip-top{width:88px; height:39px; line-height:40px; font-size:40px; text-align:center}#clock-ticker .block .label,span.flip-top{color:#000; font-weight:bold; text-align:center; font-size:14px; text-transform:uppercase; width:88px; line-height:25px; font-family:"Open Sans",Arial,sans-serif}< /style> < script type="text/javascript"> function randomIntFromInterval(min, max) {return Math.floor(Math.random() * (max - min + 1) + min); } // Settings are here var total_items = 50; var d = new Date(); var min_items_left = 12; var max_items_left = 20; var remaining_items = randomIntFromInterval(min_items_left, max_items_left); var min_of_remaining_items = 1; var decrease_after = 1.7; var decrease_after_first_item = 0.17; // Davy Jones‘ Locker (function($){$.fn.progressbar=function(){var a="< p> Hurry! Only < span class=‘count‘> "+remaining_items+"< /span> left in stock.< /p> "+"< div class=‘progressbar‘> < div style=‘width:100%‘> < /div> < /div> "; this.addClass(‘items-count‘); this.html(a+this.html()); updateMeter(this); var b=this; setTimeout(function(){remaining_items--; if(remaining_items< min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$(‘.count‘).css(‘background-color‘,‘#CE0201‘); $(‘.count‘).css(‘color‘,‘#fff‘); setTimeout(function(){$(‘.count‘).css(‘background-color‘,‘#fff‘); $(‘.count‘).css(‘color‘,‘#CE0201‘)},1000*60*0.03); b.find(".count").text(remaining_items); updateMeter(b)},1000*60*decrease_after_first_item); setInterval(function(){remaining_items--; if(remaining_items< min_of_remaining_items){remaining_items=randomIntFromInterval(min_items_left,max_items_left)}$(‘.count‘).css(‘background-color‘,‘#CE0201‘); $(‘.count‘).css(‘color‘,‘#fff‘); setTimeout(function(){$(‘.count‘).css(‘background-color‘,‘#fff‘); $(‘.count‘).css(‘color‘,‘#CE0201‘)},1000*60*0.03); b.find(".count").text(remaining_items); updateMeter(b)},1000*60*decrease_after)}; function updateMeter(a){var b=100*remaining_items/total_items; if(remaining_items< 10){a.find(‘.progressbar div:first‘).addClass(‘less-than-ten‘)}a.find(‘.progressbar‘).addClass(‘active progress-striped‘); setTimeout(function(){myanimate(a.find(‘.progressbar div:first‘),b); a.find(‘.progressbar‘).removeClass(‘active progress-striped‘)},1000)}}(jQuery)); function myanimate(a,b){var c=0; var d=parseInt(a.closest(‘.progressbar‘).css(‘width‘)); var e=Math.floor(100*parseInt(a.css(‘width‘))/d); if(e> b){c=e}function frame(){if(e> b){c--}else{c++}a.css(‘width‘,c+‘%‘); if(c==b||c< =0||c> =100)clearInterval(f)}var f=setInterval(frame,40)} jQuery.noConflict()(function($){$(document).ready(function(){$("#progress_bar").progressbar(); var tag="ctdn-12-12".match(/d+/g); var hour=14; var theDaysBox=$("#numdays"); var theHoursBox=$("#numhours"); var theMinsBox=$("#nummins"); var theSecsBox=$("#numsecs"); var d=new Date(); var n=d.getDay(); var date=1; var gg=0; var hh=0; var ii=0; var nsec=0-d.getSeconds(); if(nsec< 0){nsec=60-d.getSeconds(); gg=1}var nmin=0-d.getMinutes()-gg; if(nmin< 0){nmin=60-d.getMinutes()-gg; hh=1}var nhrs=14-d.getHours()-hh; if(nhrs< 0){nhrs=38-d.getHours()-hh; ii=1}var ndat=date-1; if(ndat< 0){var mmon=d.getMonth(); ndat=30+date-d.getDate()-ii}theSecsBox.html(nsec); theMinsBox.html(nmin); theHoursBox.html(nhrs); theDaysBox.html(ndat); var refreshId=setInterval(function(){var e=theSecsBox.text(); var a=theMinsBox.text(); var c=theHoursBox.text(); var b=theDaysBox.text(); if(e==0& & a==0& & c==0& & b==0){}else{if(e==0& & a==0& & c==0){theDaysBox.html(b-1); theHoursBox.html("23"); theMinsBox.html("59"); theSecsBox.html("59")}else{if(e==0& & a==0){theHoursBox.html(c-1); theMinsBox.html("59"); theSecsBox.html("59")}else{if(e==0){theMinsBox.html(a-1); theSecsBox.html("59")}else{theSecsBox.html(e-1)}}}}},1000); }); }); < /script> < div class="items-count" id="progress_bar"> < /div> < div id="clock-ticker" class="clearfix"> < div class="block"> < span class="flip-top" id="numdays"> 0< /span> < br> < span class="label"> Days< /span> < /div> < div class="block"> < span class="flip-top" id="numhours"> 1< /span> < br> < span class="label"> Hours< /span> < /div> < div class="block"> < span class="flip-top" id="nummins"> 23< /span> < br> < span class="label"> Minutes< /span> < /div> < div class="block"> < span class="flip-top" id="numsecs"> 36< /span> < br> < span class="label"> Seconds< /span> < /div> < /div> < !-- end here -->


    推荐阅读


    上一篇：钛极客|2000价位档普及80w快充，iQOO Neo6 SE发布 | 钛快讯

    下一篇：ORM 轻量级框架 Dapper（介绍）