我如何使下载按钮出现后5秒倒计时在Laravel

Question

如何制作一个下载按钮，在5秒后出现倒计时在Laravel嘿，伙计们，我正在制作下载按钮出现5秒，但代码不工作，我在我的网站上添加了下载功能。5秒后，我开始自动下载下载的按钮，但代码不工作。

我的网站- https://oyeimagens.com/foto/5/imagens-de-bom-dai-para-amor代码

<div class="inner-downloadsection"> <div> <button aria-label="download" id="downloadBtn" class="downloadBtn btn btn-danger btn-block circle" style="border-radius: 20px;
margin: .1em;
font-size: .7em;
font-weight: 300 !important;
background: linear-gradient(50deg,#3981e6 1%,#488ef1 99%);"><i class="fa fa-arrow-circle-o-down"></i> Download </button> </div> </div>
<div class="modal fade" id="modalDownload" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header"><button class="close" type="button" data-dismiss="modal">×</button>
<p class="modal-titlem text-center"> Select Resolution &amp; Download </p>
</div>
<div class="text-center">
<center>
<div class="btn-group btn-block margin-bottom-10">
<button type="button" class="btn btn-success btn-sm btn-block dropdown-toggle margin-top-15" id="makingdifferenttimer" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-cloud-download myicon-right"></i> {{trans('misc.download')}} <span class="caret"></span>
</button>
<ul class="dropdown-menu arrowDownload dd-close btn-block">
@foreach( $stockImages as $stock )
<?php
switch( $stock->type ) {
case 'small':
$_size          = trans('misc.s');
break;
case 'medium':
$_size          = trans('misc.m');
break;
case 'large':
$_size          = trans('misc.l');
break;
}
?>
<li><a href="{{url('download',$stock->token)}}/{{$stock->type}}"><span class="label label-default myicon-right">{{$_size}}</span> {{$stock->resolution}} <span class="pull-right">{{$stock->size}}</span></a></li>
@endforeach
</ul>
</div>
</center>
</div>
<div id="countdowntimer"><b>Fetching file to Download... Wait<div id="countdown"><div id="countdown-number">4</div><svg><circle r="18" cx="20" cy="20"></circle></svg></div></b></div><b>
<div class="list-wrap">
<div>
</div>
</div>
</b></div><b>
</b></div>
</div>  
Javascript
// When the user clicks the button, open the modal
$('.downloadBtn').click(function () 
{
var loimg = "https://oyeimagens.com/public/svg/loader.svg";
$('#modalDownload').modal('toggle');window.dispatchEvent(new Event('resize'));

if( $("#makingdifferenttimer").css('display') == 'none' )
{

$("#countdowntimer").show();
clearTimeout(ctimer);
var countdownNumberEl = document.getElementById('countdown-number');
countdownNumberEl.textContent = countdown;
ctimer = setInterval(function(){
--countdown;
if( countdown == 0 ){
clearTimeout(ctimer);
$("#countdowntimer").hide();
$("#makingdifferenttimer").fadeIn(500);
}else{
countdownNumberEl.textContent = countdown;
}
}, 1000);
}

});

Answer 1

ctimer = setInterval(function(){})