<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在文本框输入图片的路径,在下方动态显示图片</title>
<style>
*{
padding: 0;
margin: 0;
}
body{
margin: 30px;
font-size: 14px;
font-family: "微软雅黑";
}
.button{margin: 0 0 30px 0;}
.button input{
height: 20px;
line-height: 20px;
}
input[type=text]{width: 200px;}
input[type=button]{
width: 40px;
margin-left: 5px;
}
</style>
</head>
<body>
<div class="button">
<input type="text" name="text" placeholder="请输入图片路径"/>
<input type="button" name="button" value="显示" />
</div>
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1492841811767&di=7da479c427d2becea63294f7111f9ba5&imgtype=0&src=http%3A%2F%2Fwww.bz55.com%2Fuploads%2Fallimg%2F150604%2F139-150604162F5.jpg" />
</body>
<script type="text/javascript">
(function(){
var text = document.getElementsByName('text')[0];
var button = document.getElementsByName('button')[0];
var img = document.querySelector('img');
button.onclick = function (){
img.src = text.value;
};
})()
</script>
</html>
js实现在文本框输入图片的路径,在下方动态显示图片
最新推荐文章于 2024-03-07 21:30:19 发布