Question

我希望有一个链接，一旦点击，进度条运行了一段荒谬的时间，并且只有在完成dos的时间之后才能进行图像下载。

这是我的代码，截至目前链接将点击，但只是下载图片而不等待进度条进行修补，一分钟后警报就会发生。

<code>
<!doctype html>
<html>
<head>
<title> Circle</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link href="" rel="">
<style> 
#prog{
display: none;
}
progress::-moz-progress-bar { background: #cc3399; }
progress::-webkit-progress-bar { background: #cc3399; }
</style>
</head>
<body>
<a href="XXX.png" id="ass" download> Associates</a>
<br>
<progress id="prog"></progress>

<script>
var ass = document.getElementById('ass');
var prog = document.getElementById('prog');    
var count = 0;
var target = 60;
function progressIt(){
count++; 
var percentage = count / target;
prog.value = percentage; 

if( count >= target ){
    // **********When degree should download**********
    alert('You Got A Degree!');
} else {
    // fun function again in 1 second ( ie. 1000 ms )
    setTimeout( progressIt, 1000 );
}
}
document.getElementById("ass").onclick = function() {downloadAss()};
function downloadAss() {
progressIt();
}
downloadAss();
</script>
</body>
</html>

Answer 1

首先设置图像源，然后等到计数器完成显示它。

<!doctype html>
<html>
    <head>
        <title> Circle</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
        <link href="" rel="">
        <style> 
            #prog {
                display: none;
            }
            progress::-moz-progress-bar { background: #cc3399; }
            progress::-webkit-progress-bar { background: #cc3399; }
        </style>
    </head>
    <body>
        <a id="ass"> Associates</a>
        <br>
        <img id="assImg"/>
        <br>
        <progress id="prog"></progress>

        <script>
            var ass = document.getElementById('ass');
            var prog = document.getElementById('prog');  
            var img= document.getElementById('assImg');  
            var count = 0;
            var target = 60;

            function downloadAss(){
                if(count==0) {
                  img.style.display='none';
                  img.src = 'xxx.jpg';
                  prog.style.display='block';
                }

                count++; 
                var percentage = count / target;
                prog.value = percentage; 

                if( count >= target ){
                    // **********When degree should download**********
                    img.style.display='block';
                    alert('You Got A Degree!');
                } else {
                    // fun function again in 1 second ( ie. 1000 ms )
                    setTimeout( downloadAss, 1000 );
                }
            }

            document.getElementById("ass").onclick = function() {downloadAss()};

        </script>
    </body>
</html>

仅在进度条完成后才下载图像

1 个答案: