html5引用外部js文件更换图片

最新推荐文章于 2025-03-26 13:30:26 发布

原创最新推荐文章于 2025-03-26 13:30:26 发布 · 449 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

前端同时被 2 个专栏收录

138 篇文章

订阅专栏

122 篇文章

订阅专栏

本文介绍如何在HTML5中通过引用外部JavaScript文件（如h5test.js）来实现图片的动态更换。在te2.html中应用这些技巧，可以实现交互式的图片更新效果。

h5test.js

function change() {
    var element = document.getElementById("id_img");
    if (element.src.endsWith("p1.jpg")) {
        element.src = "pic/p2.jpg";
    } else {
        element.src = "pic/p1.jpg";
    }
}

function changeImage() {
    setInterval(function () {
        change();
    }, 2000);

}

te2.html

<!DOCTYPE html>
<html>

<head>
    <title>测试2</title>
    <meta charset="utf-8">
    <base href="">
    <script type="text/javascript" src="h5test.js">
    </script>
</head>

<body>
    <h3>标题3</h3>
    <div>
        <iframe id="new_window">

        </iframe>
    </div>
    <h4 id="idhead"><b style="color: blue;">标题4</b></h4>
    <img id="id_img" width="200" height="150" /><br>
    <button onclick="changeImage()">更改图片</button>
    <script type="text/javascript">
        var icount = 0;

        function getWindInfo(win) {
            return "wid=" + String(win.innerWidth) + " height=" + String(win.innerHeight)
                // + " host=" + win.location.host
                // + " pathname=" + win.location.pathname
                // + " port=" + win.location.port
                + " pageXOffset=" + win.pageXOffset
                + " pageYOffset=" + win.pageYOffset
                + " frameLen=" + win.frames.length
                ;
        }

        function showDetail() {

            // 获取new_window控件对应的window句柄
            var nw = document.getElementById("new_window").contentWindow;
            var d = Date();
            nw.document.write("<h1>当前\=时间</h1><p>time:&lt;"
                + "<b style=\"color: blue;\">" + Date() + "</b>" + "&gt;</p>");
            // 没有close，就会不停在下一行追加。
            nw.document.close();

        }

        // var timer = setInterval(function () {
        //     showDetail()
        // }, 500);

    </script>
</body>

</html>

结果：