Question

<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'>内的图像将在函数{{change()之前更改1}}，我的问题是我需要放置的代码或功能，以便图像刷新或自动刷新，示例i最后点击PLC按钮，我需要连续刷新，以便1.jpg图片显示更新的图像。对不起我是java脚本中的新手thx

Answer 1

我不知道我是否100％理解您的问题，但如果您需要每N秒刷新一次图片，则必须通过添加问号（?）和一些随机内容来更改其网址之后（例如时间戳）。

此代码适用于您：

// 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);

Answer 2

只是看着它，我很确定你的代码是有效的。嗯，我知道这样做。

<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>

自动刷新IMG的src属性

2 个答案: