logo标签列表

如何使用JavaScript创建一个动态变化的下载链接？

javascriptjqueryhtmlflashdownload
3
我正在制作一个flash图片库网站，我希望页面底部的文字可以是flash文件的下载链接。这个文字会变成当前正在显示的flash文件的标题。我希望href标签可以动态改变，以匹配正在播放的特定flash文件的文件路径，这样用户就可以下载它了。这是我第一次尝试使用下载链接，更别说动态地改变带有变量的链接了。简而言之，我希望该链接可以更改为链接数组中存在的文件路径。
包含我的初始代码的函数名为DOWNLOAD。
HTML
<body>

    <div id="titleText">
        <h1>Anon Curb</h1>
    </div>
    <div id="flashmovie">
        <object type="application/x-shockwave-flash" data="swfs/welcomeflash.swf">'+
            <param name="movie" value="swfs/welcomeflash.swf">
        </object>
    </div>
    <!-- end #container -->
    <div id="buttonCon">

        <div id="buttons">
            <button id="next">next</button>

            <button id="rand">Random</button>

            <button id="back">Back</button>
        </div>

    </div>

    <div id="titleCon">
        <a href="#" id="downLink">
        <div id="title">Hit random button</div>
        </a>
    </div>
    <!-- end #wrapper -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script>
    <script src="js/flashcollection.js"></script>
</body>

JAVASCRIPT

$(document).ready(function () {
    var links = [
'swfs/#1%20(Special%20Japanese%20Extended%20Dance%20Mix).swf',
'swfs/$D6.swf',
'swfs/(MAD)%20Huh.swf'
];

 var displaytext = [
'#1 (Special Japanese Extended Dance Mix)',
'$D6',
'(MAD) Huh'
];

var c = 0
    var flashmovie, test, temp;

    function init() {
        flashmovie = document.getElementById('flashmovie');
        document.getElementById('back').onclick = function () {
            if (c == 0) {
                c = links.length;
            }
            c--
            displayFiles();
        }

        document.getElementById('next').onclick = function () {
            if (c == links.length - 1) {
                c = -1;
            }
            c++;
            displayFiles();
        }

        document.getElementById('rand').onclick = function () {
            temp = c;
            while (c == temp) {
                c = Math.floor(Math.random() * links.length);
            }
            displayFiles();
        }
    }

    function displayFiles() {

        test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
        document.getElementById('title').innerHTML = displaytext[c];

        flashmovie.innerHTML =
            '<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
            '<param name="movie" value="' + links[c] + '">' +
            '<\/object>';
    }

    function download() {
        document.getElementById('rand', 'back', 'next').onclick = function () {
            document.getElementById('downlink').attr("href", links[c]);
        }
    }

    window.addEventListener ?
        window.addEventListener('load', init, false) :
        window.attachEvent('onload', init);
});
2个回答
2

正确的javascript

这里使用了Soltani Neji编辑过的下载函数，以及一个标签来更改下载属性。如果没有它，下载属性将不能正常工作。不知道这是普遍现象还是只有我遇到了这个问题。

var c = 0;
    var flashmovie, test, temp;

    function init() {
        flashmovie = document.getElementById('flashmovie');
        document.getElementById('back').onclick = function () {
            if (c == 0) {
                c = links.length;
            }
            c--
            displayFiles();
            download();
        }

        document.getElementById('next').onclick = function () {
            if (c == links.length - 1) {
                c = -1;
            }
            c++;
            displayFiles();
            download();
        }

        document.getElementById('rand').onclick = function () {
            temp = c;
            while (c == temp) {
                c = Math.floor(Math.random() * links.length);
            }
            displayFiles();
            download();
        }

    }

    function displayFiles() {

        test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
        document.getElementById('title').innerHTML = displaytext[c];

        flashmovie.innerHTML =
            '<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
            '<param name="movie" value="' + links[c] + '">' +
            '<\/object>';
    }

    function download() {
        document.getElementById('downLink').setAttribute('href', links[c]);
        document.getElementById('downLink').setAttribute('download', displaytext[c]);
    }

    window.addEventListener ?
        window.addEventListener('load', init, false) :
        window.attachEvent('onload', init);
});
1
你好，我解决了这个问题，这对我有效。对于HTML文件，您只需要添加第一张图片的href，因为该文件始终在启动时加载第一张图片，并且您还需要将属性download添加到标记中，所以应该像这样：
<div id="titleCon">

    <a href="unknittingmouse1.swf" id="downLink" download="">
    <div id="title">Hit random button</div>
    </a>
</div>

对于 JavaScript，您需要像这样编辑下载函数，然后在每个按钮点击事件中调用它，如下所示：
$(document).ready(function () {
    var links = [
'swfs/#1%20(Special%20Japanese%20Extended%20Dance%20Mix).swf',
'swfs/$D6.swf',
'swfs/(MAD)%20Huh.swf'
];

 var displaytext = [
'#1 (Special Japanese Extended Dance Mix)',
'$D6',
'(MAD) Huh'
];

var c = 0
    var flashmovie, test, temp;

    function init() {
        flashmovie = document.getElementById('flashmovie');
        document.getElementById('back').onclick = function () {
            if (c == 0) {
                c = links.length;
            }
            c--
            displayFiles();
            download();
        }

        document.getElementById('next').onclick = function () {
            if (c == links.length - 1) {
                c = -1;
            }
            c++;
            displayFiles();
            download();
        }

        document.getElementById('rand').onclick = function () {
            temp = c;
            while (c == temp) {
                c = Math.floor(Math.random() * links.length);
            }
            displayFiles();
            download();
        }
    }

    function displayFiles() {

        test = links[c].substring(links[c].lastIndexOf('.') + 1, links[c].length);
        document.getElementById('title').innerHTML = displaytext[c];

        flashmovie.innerHTML =
            '<object type="application/x-shockwave-flash" data="' + links[c] + '">' +
            '<param name="movie" value="' + links[c] + '">' +
            '<\/object>';
    }

    function download() {

            document.getElementById('downLink').setAttribute('href', links[c]);
        }


    window.addEventListener ?
        window.addEventListener('load', init, false) :
        window.attachEvent('onload', init);
});`

希望这有所帮助 :)
1
抱歉回复这么晚，但是当我实现我的代码时，似乎除了闪存之外的标题、按钮和其他任何东西都消失了，导致闪存全屏显示。 - cosmichero2025
1
没事，我解决了。我忘记在 href 标签中包含 download 属性，并且忘记修改它。我会在下面发布正确的 JavaScript 代码。 - cosmichero2025
添加HTML标签也能达到相同的效果，你将能够用它的名称下载它。 - Neji Soltani
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接