【javascript】动态创建img标签，并随机分配img的src

偶然翻看Math对象，看到有个Math.random（）方法，于是就写了一个超级简单的可取任意图片数量、并且随机给图片分配src的效果。原理是，根据输入框内输入的数字，点击的时候，来判断创建的img个数，然后再给这些img标签随机分配src。如下：<!DOCTYPE HTML><html><head>...

不死鸟.亚历山大.狼崽子

2906人浏览 · 2020-02-14 21:05:31

不死鸟.亚历山大.狼崽子 · 2020-02-14 21:05:31 发布

偶然翻看Math对象，看到有个Math.random（）方法，于是就写了一个超级简单的可取任意图片数量、并且随机给图片分配src的效果。

原理是，根据输入框内输入的数字，点击的时候，来判断创建的img个数，然后再给这些img标签随机分配src。

如下：

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset="utf-8" />
		<title> test </title>
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<style type="text/css">
			body,
			div,
			img,
			span,
			input {
				margin: 0;
				padding: 0;
			}

			div {
				width: 1000px;
				border: 1px red solid;
				min-height: 204px;
				height: 204px;
			}

			img {
				width: 50px;
				height: 50px;
				margin-left: 10px;
				border: 2px #333333 solid;
				float: left;
			}

			span {
				position: absolute;
				top: 210px;
			}
		</style>
		<script>
			function test(){
				var txt = document.getElementById('txt').value;
				var s = parseInt(txt);
				var show = document.getElementById('show');
				var imgs = document.getElementsByTagName('img');
				var is =['images/img1.jpg','images/img2.jpg','images/img3.jpg','images/img4.jpg','images/img5.jpg','images/img6.jpg','images/img7.jpg','images/img8.jpg','images/img9.jpg','images/img10.jpg','images/img11.jpg','images/img12.jpg','images/img13.jpg','images/img14.jpg'];
				var con = document.getElementById('con');
				con.innerHTML='';
				for ( var i=0;i<s ;i++ )
				{
					var element = document.createElement('img');
					con.appendChild(element);
					var n=Math.floor(Math.random()*is.length+0);
					imgs[i].src=is[n];
				}
			}
	</script>
	</head>
	<body>
		<div id='con'></div>
		<span>输入图片的数量:</span>
		<input type="text" name='' value='' id='txt' />
		<input type="button" name='' value='show' id='show' onclick="test()" style="left:460px;" />
	</body>
</html>

考虑到的内容不是很多，写的代码质量也不很好，如有错误之处，望指正。

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐