【通过for循环遍历元素的方法，打印100张QQ头像】【网页设计与网站开发HTML、CSS、JavaScript实例教程】【第十章】JavaScript基础——【传智播客】实验作业题【实验3】

秃头小二

已于 2022-06-02 12:50:49 修改

阅读量551

点赞数 1

分类专栏： HTML 文章标签： html 前端 javascript html5

于 2022-06-01 20:00:47 首次发布

本文链接：https://blog.csdn.net/weixin_60897770/article/details/125089278

版权

HTML 专栏收录该内容

14 篇文章 8 订阅

订阅专栏

以下为本人大一选修课《网页设计与网站开发》的实验作业题，均为本人原创，分享给大家。如有不足之处欢迎指出。

1.题目：

实验3、新建页面test3.html，通过for循环遍历元素的方法，打印100张QQ头像，并以10行10列的方式排列。

注：

图片文件建议保存至根目录下
网页运行效果以Microsoft Edge为准，其他浏览器可能显示会出问题。
2.代码如下：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>test3</title>
<style type="text/css">
	img{
		/*设置图片与图片之间的外边距*/
		margin:5px;
	}
</style>
</head>
<body>
<div>
<script type="text/javascript" >
	for(var i = 1; i <= 100;i++){
		if(i % 10 == 0){
			document.write("<img src='images/img/"+i+".bmp'><br>");
		// document.write("<img src=" *** '+i+' .bmp ">");// 错误写法
		}else{
			document.write("<img src='images/img/"+i+".bmp'>");
		}
	}
</script>
</div>
</body>
</html>

3.实验效果如下：

《网页设计与网站开发》实验题不定期更新，有需要可以点击链接：

https://blog.csdn.net/weixin_60897770/category_11835918.html?spm=1001.2014.3001.5482

如有帮助可以帮忙点个赞嘛……谢谢啦！

秃头小二

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【通过for循环遍历元素的方法，打印100张QQ头像】【网页设计与网站开发HTML、CSS、JavaScript实例教程】【第十章】JavaScript基础——【传智播客】实验作业题【实验3】

设置图片与图片之间的边距。新建页面test3.html，通过for循环遍历元素的方法，打印100张QQ头像，并以10行10列的方式排列。
复制链接

扫一扫