js 动态生成span

最新推荐文章于 2021-08-04 11:11:54 发布

原创最新推荐文章于 2021-08-04 11:11:54 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

JS 专栏收录该内容

12 篇文章

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态生成小圆点</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				width: 200px;
				height: 200px;
				overflow: hidden;
				margin: 300px 50%;
				position: relative;
				border: 1px solid #5EFF5E;
				position: relative;
			}
			img{
				width:200px;
				height:200px;
				display: inline-block;
			}
			#box .cicle{
				position: absolute;
				bottom: 10px;
				width: 200px;
				height: 20px;
				line-height: 20px;
				text-align: center;
				/*border: 1px solid #5EFF5E;*/
			}
			.cicle span{
				border: 1px solid #999999;
				border-radius: 100%;
				display: inline-block;
				width: 15px;
				height: 15px;
				line-height: 15px;
				text-align: center;
				margin-left: 5px;
				font-size: 10px;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box = document.getElementById("box");
				var div = document.createElement("div");
				div.setAttribute("class","cicle");
				box.appendChild(div);
				var img = document.getElementsByTagName("img");
				for(var i=0; i<img.length; i++){
					var span = document.createElement("span");
					div.appendChild(span);
					span.innerHTML = i+1;
				}
			}
		</script>
	</head>
	<body>
		<div id="box">
			<div>
				<ul>
					<li><img src="../img/1.jpg" alt="" /></li>
					<li><img src="../img/2.jpg" alt="" /></li>
					<li><img src="../img/3.jpg" alt="" /></li>
					<li><img src="../img/4.jpg" alt="" /></li>
					<li><img src="../img/5.jpg" alt="" /></li>
				</ul>
			</div>
		</div>
	</body>
</html>

效果：