自定义图片:使用 JavaScript 在 newtab.html 中更换图片
<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属性将被更新为新网址,达到更换图片的目的。
原文地址: http://www.cveoy.top/t/topic/qA90 著作权归作者所有。请勿转载和采集!