[英]Auto refresh the src attribute of an IMG
<html>
<head>
<link rel='stylesheet' type='text/css' href='css/style.css'>
<base href='http://150.20.1.30'><base target='_self'>
<title>PLC</title>
<script>
function change(pic){
element_buts=document.getElementById("pic");
element_buts.src=pic;
}
</script>
</head>
<body>
<div class='content'>
<div class='left'>
<img src='1.jpg' height='80%' id='pic'>
</div>
<div class='right'>
<input type='button' class='buttons' value='PLC' onclick='change("1.jpg")'></br>
<input type='button' class='buttons' value='Furnace Draft' onclick='change("9.jpg")'></br>
<input type='button' class='buttons' value='Drum Level Graph' onclick='change("3.jpg")'></br>
<input type='button' class='buttons' value='Boiler Blowdown Time Setup' onclick='change("10.jpg")'></br>
<input type='button' class='buttons' value='Steam Press and Flow Graph' onclick='change("4.jpg")'></br>
<input type='button' class='buttons' value='Boiler Drum and Dearator Level' onclick='change("5.jpg")'></br>
<input type='button' class='buttons' value='Stack and Dearator Temperature' onclick='change("7.jpg")'></br>
<input type='button' class='buttons' value='Steam Flow and Pressure Graphs' onclick='change("8.jpg")'></br>
<div class='footer_right'>
</div>
</div>
</div>
</body>
</html>
上面是我的html和javascript代碼,我對該函數的引用是http://www.w3schools.com/js/tryit.asp?filename=tryjs_lightbulb當您單擊按鈕<div class='right'>
將在function change()
的值之前change()
,我的問題是我需要放置什么代碼或函數以使圖像刷新或自動刷新,請采樣我最后單擊PLC按鈕,我需要連續刷新為了1.jpg圖片顯示更新的圖像。 抱歉,我是Java腳本中的新手
我不知道我是否100%理解了您的問題,但是如果您需要每N秒刷新一次圖像,則必須通過添加問號( ?
)和其后的一些隨機內容(例如時間戳)來更改其URL。 )。
該代碼將為您工作:
// Let's set refresh time to 5 seconds
var N = 5;
// Function that refreshes image
function refresh(imageId, imageSrc) {
var image = document.getElementById(imageId);
var timestamp = new Date().getTime();
image.src = imageSrc + '?' + timestamp;
}
// Refresh image every N seconds
setTimeout(function() {
refresh('pic', 'myImage.jpg');
}, N * 1000);
只是看一下,我很確定您的代碼可以正常工作。 好吧,我知道。
<img id="pic" src="https://www.google.com.au/images/srpr/logo4w.png"/>
<input type="button" value ="Yahoo" onclick="change('http://l.yimg.com/ao/i/mp/properties/frontpage/eclipse/img/y7-logo_default.v1.png')" />
<input type="button" value ="Google" onclick="change('https://www.google.com.au/images/srpr/logo4w.png')" />
<script>
function change(src){
document.getElementById('pic').src = src;
}
</script>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.