前端基础：通过 《心愿墙》实践js的循环程序
曾有一段故事，故事是这样的。
记者:你放羊为了什么?
放羊娃:赚钱
记者:你赚钱为了什么?
放羊娃:娶媳妇
记者:你娶媳妇为了什么?
放羊娃:生娃
记者:生了娃干什么
放羊娃:放羊。
子子孙孙，无穷匮也，一直放羊。本人认为这是一个循环，但也有不同的意见，有一些人认为这个逻辑是递归。不过，还是以循环引入这种逻辑，一组被重复执行的语句称之为循环体，能否继续重复，决定循环的终止条件。循环结构是在一定条件下反复执行某段程序的流程结构，被反复执行的程序被称为循环体。
一、项目说明
该项目是对js循环语句的应用，在页面中循环显示图片的序列，通过循环显示最终形成“心愿墙”中的图片显示。
二、项目效果图展示
一般网页类的应用都需要布局页面，但这个项目只需要在背景墙上显示各幅图片的内容，效果图如下所示。
在“心愿墙”中，“高富帅”、“暴富”、“霉运退散”、“中大奖”、“喝不醉”、“锦鲤附身”等等好词好句子都在这里，都是希望自己运气变好一点而已。
三、搭建《心愿墙》页面的基本结构
《心愿墙》页面从结构上看，比较简单，只是图片的循环展示，其显示的内容在背景墙上展示。html可以使用CSS来使body页面显示出“墙”的图片的重复平铺。代码如下。
<html>
<head>
<title>循环程序</title>
<style>
body{
background:url(qiang.png);
}
</style>
</head>
<body>
</body>
</html>
四、JavaScript循环语句介绍
JavaScript提供了3种循环结构方面的语句。
1、for循环
for循环语句的格式如下：
for（初始化表达式；条件判断表达式；改变条件内容）{
循环体语句
}
for循环语句的具体流程图如下：
2、while循环
while循环语句的格式如下：
while（判断条件）{
执行语句
}
while循环语句的具体流程图如下：
3、 do-while循环
do-while循环语句的格式如下：
do
{
执行语句
}while（条件判断)
do-while循环语句的具体流程图如下：
五、《心愿墙》JavaScript循环功能的实现
心愿墙的实现主要逻辑把心愿墙中的图片通过document.write方法写入到网页中，由于外部有10张图片，可以通过循环的方式向网页中写入标签，标签的src属性指向于每幅图片的图片名称，每个标签之间有一定的空白，可以使用特殊符号 来表示。10张图片每5张显示于一行，当第6张图片需要显示到第二行，就需要document.write命令来写入
标签来进行换行。
最终代码如下所示。
<html>
<head>
<title>循环程序</title>
<style>
body{
background:url(qiang.png);
}
</style>
</head>
<body>
<script>
document.write("<br/><br/>")
for(i=1;i<11;i++){
if (i==6){
document.write("<br></br><br></br>")
}
document.write(" <img src='"+i+".png' width=200 height=200/> ")
}
</script>
</body>
</html>
上述代码最终的具体效果如下。
此程序只是简单地入门javascript的循环程序设计，欢迎继续关注博客，后续会有深入的内容进行讲解。
github源码地址：https://github.com/wawacode/heart_wall
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
