JavaScript控制更换图片实现开灯效果

tree3457

于 2022-07-30 20:05:08 发布

阅读量222

点赞数 1

文章标签： javascript 前端 intellij-idea maven

本文链接：https://blog.csdn.net/tree3457/article/details/126076935

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript演示</title>
</head>
<body>

<!--<p>JavaScript 能改变图像的 src 属性值</p>-->
<input type="button" onclick="on()" value="开灯">
<img id="myImage" border="0" src="../img/off.jpg" style="text-align:center;">
<input type="button" onclick="off()" value="关灯">
<hr>

<script>

    function on() {
        document.getElementById('myImage').src = '../img/on.jpg';
    }

    function off() {
        document.getElementById('myImage').src = '../img/off.jpg'
    }


</script>

</body>
</html>

通过点击开灯关灯按钮实现对图片的控制修改，形成动态的效果