1 
<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()、私の問題は、画像が更新または自動更新されるように配置する必要があるコードまたは関数です。サンプル最後に PLC ボタンをクリックします。 . thx申し訳ありませんが、Javaスクリプトthxの初心者です

4

2 に答える 2

2

あなたの質問を 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);
于 2013-03-19T09:26:34.447 に答える
0

それを見るだけで、あなたのコードは機能すると確信しています。まあ私はこれがすることを知っています。

<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>
于 2013-03-19T09:19:01.333 に答える