<div>
    <input type="text" id="newUrl">
    <button onclick="changeImage()">更换图片</button>
</div>

<script>
    function changeImage() {
        var newUrl = document.getElementById("newUrl").value;
        var img = document.getElementById("randomImage");
        img.src = "http://bxoqlc9j.beget.tech/time/random_image2.php?api&file=" + newUrl;
    }
</script>

你可以通过添加一个输入框和一个按钮来实现设置页面。当用户输入新的网址并点击按钮时,你可以使用JavaScript代码来更改图片的src属性。

首先,在标签内添加一个

元素,用于包含输入框和按钮:

<body>
    <center>
        <img id="randomImage" style="max-width: 600px; max-height: 400px;">
    </center>
    
    <div>
        <input type="text" id="newUrl">
        <button onclick="changeImage()">更换图片</button>
    </div>

    <script>
        function changeImage() {
            var newUrl = document.getElementById("newUrl").value;
            var img = document.getElementById("randomImage");
            img.src = "http://bxoqlc9j.beget.tech/time/random_image2.php?api&file=" + newUrl;
        }
    </script>
</body>

这里添加了一个id为'randomImage'的标签,以便我们可以通过JavaScript来操作它。同时,还添加了一个id为'newUrl'的标签和一个onclick事件绑定的按钮来调用changeImage()函数。

在changeImage()函数内,我们首先获取输入框中的新网址,并将其存储在变量newUrl中。然后,通过getElementById()方法获取标签的引用,并将其src属性更改为新的网址。

这样,当用户在输入框中输入新网址并点击按钮时,图片的src属性将被更新为新网址,达到更换图片的目的。

自定义图片:使用 JavaScript 在 newtab.html 中更换图片

原文地址: http://www.cveoy.top/t/topic/qA90 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录