前端基础实战 2

JavaScript项目实战课件目录01随机飘雪02在线计算器03在线时钟04倒计时程序05图像轮播系统功能与实现思路AI智慧导游功能描述随机飘雪项目介绍本项目主要实现如下几个功能。（1）通过代码来新增一片或多片雪花。（2）新增雪花的位置是随机的。（3）可以随时开始和暂停雪花的移动。（4）可以删除所有或部分雪花。（5）模拟下雪的效果，在雪花向下移动的过程中随时补充雪花。（6）当雪花移出整个屏幕区域后，及时将其删除，否则会浪费浏览器的处理资源。（7）播放背景音乐。（8）“开始”按钮和“停止”按钮应该交替使用，不能多次单击。随机飘雪开发思路本项目所涉及的知识面还是比较广的，CSS、DOM操作、BOM操作、定时器使用、雪花控制的细节等一应俱全。1．新增雪花新增一片雪花的操作其实与新增一个普通HTML元素没有任何本质区别，可以通过两种方式来完成。2．雪花位置随机要新增一片随机位置的雪花，必然需要考虑两个核心因素：一是必须使用固定定位，这样才可以实现位置的强制调整；二是必须考虑浏览器窗口的高度和宽度，因为让雪花飘在窗口之外就没有任何意义了。3．开始和暂停雪花的移动想让雪花开始移动，需要使用setInterval()定时器。随机飘雪开发思路4．删除雪花要实现删除雪花的功能，必须先获取某片雪花对应的元素，再调用其remove()方法。可以一次性删除所有雪花，也可以一次性删除部分雪花，这根据实际情况决定。5．补充新的雪花因为雪花会一直向下移动，最终会消失在浏览器窗口中，所以为了保持雪花一直飞舞的效果，必须在此过程中不停地自动增加雪花。6．移除无效雪花这是一个实现起来比较简单的功能，只需要在定时器代码中对所有雪花的位置进行判断，当其offsetTop属性对应的值超过浏览器窗口的高度时，即可将该片雪花移除。随机飘雪开发思路7．背景音乐的播放背景音乐可以直接使用HTML5自带的<audio>标签实现，并设置背景音乐为自动加载、自动播放，不需要在页面中显示控制条。8．“开始”“停止”按钮交替使用首先需要明白，为什么不能连续单击“开始”按钮。因为会使用到定时器对象，每单击一次，就会生成一个新的定时器对象，如果不停单击，则会生成很多定时器对象，每个定时器对象都会移动雪花，造成的结果就是雪花移动得越来越快。同样，不停单击“停止”按钮也毫无意义。这通过设置按钮的disabled属性即可实现。随机飘雪代码实现（2）完成基本布局后，实现雪花的新增，核心代码如下。随机飘雪代码实现（3）开始使雪花飞舞，并对何时删除雪花、何时新增雪花设定策略，代码如下。随机飘雪代码实现（4）实现“停止”和“删除”两个按钮的事件代码，代码如下。随机飘雪代码实现上述代码可以实现所有功能。考虑到代码在实现的过程中可能会显得比较零散，所以特将最终代码展示出来，供读者参考，代码如下。随机飘雪代码实现上述代码可以实现所有功能。考虑到代码在实现的过程中可能会显得比较零散，所以特将最终代码展示出来，供读者参考，代码如下。随机飘雪思维拓展上述代码在逻辑上并不复杂，所用到的知识点也是比较简单的。只要多加练习和应用，相信读者会很快在Web前端程序设计方面取得长足的进步。然而，上述代码存在一个比较严重的问题，即随着时间的推移，雪花将会越来越多，因为新增的雪花要比删除的雪花多。而这会导致浏览器绘制很多元素，浏览器的响应变慢直到浏览器崩溃。那么，该如何解决这一难题呢？只需要保证删除的元素和新增的元素数量大致相当，或者让定时器定时检查页面中的雪花总数量并将其控制在一定数量范围内，即可避免浏览器出现崩溃的风险。注意：任何一个看似完美的程序，都极有可能隐含着漏洞，所以在软件产品的研发过程中，软件测试是非常重要的工作，也是研发环节不可或缺的一部分。在线计算器项目介绍前文介绍过如何通过

Table

或盒模型对一个在线计算器进行布局，本项目演练的核心目的是利用

JavaScript编程实现在线计算器的功能，其效果如图10-2所示。在线计算器项目介绍本项目要实现的功能主要包含如下几个。（1）当输入数字0～9和5个标准运算符（%，÷，*，-，+）及小数点时，将其如实反映在结果框中，以便于用户核对输入。（2）单击“AC”按键表示清除结果框中的所有内容，单击“<-”按键（回退按钮）表示只删除最后一个字符。（3）单击“=”按键表示对结果框中用户输入的运算表达式进行计算，并展示运算结果。（4）单击“+”“-”按键表示对某个数字进行正负号切换。（5）如果用户输入的表达式出现错误，无法计算其结果，则在结果框中提示错误信息。不能重复地输入运算符，如5+-++*6，这样的表达式是不允许存在的。在线计算器开发思路首先，本项目的在线计算器相对于之前的在线计算器布局做了两处调整：一是添加了回退按键，可以用来删除结果框中的最后一个字符。1．运算表达式的输入运算表达式的输入的核心点就在于将对应按键的值（如1、3、+等）添加在结果框的最后。可以使用诸如“document.getElementById("result").value+="3"”这样的代码来完成按键的输入，也可以选择让用户在文本框中自行输入。2．清除结果若要整体清除结果框的内容，则只需要将该结果框的内容设置为一个空字符串即可，如代码可以是“document.getElementById("result").value=""”。3．计算结果JavaScript提供了一个非常高效而方便的函数eval()，eval()函数是一个特别的函数，可以将一段字符串解析为一段标准的JavaScript代码来执行。示例代码如下。在线计算器开发思路4．正负号切换实现方案有两种：一是直接用0来对数字进行减法运算；二是获取该数字的第1位的ASCII值，如果有负号，则将其删除，使其变为正数，否则直接在该数字的最前面添加一个负号。这两种方案都不复杂，任选一种即可。5．错误提示信息编者建议使用JavaScript的异常处理机制。通过捕获eval()在运算表达式时出现的异常来提示出错信息，这样将会更加容易处理，且不用将精力放在错误类型的判断上。6．重复运算符验证一种方案是检测用户输入的最后一个字符是数字还是运算符，如果是运算符，则不允许再输入运算符；另一种方案是每当输入一个运算符后，设置某个标志为true，只有输入数字后才将该标志设置为false，表示此时可以输入运算符。任选两种方案中的一种即可，其复杂度差别不大。在线计算器代码实现现在按照上述开发思路来实现所需功能。首先是页面的布局，这一点在前面的项目实战中已经涉及，所以不再重复讲解。唯一需要注意的是，这里将结果框从盒模型修改为文本框，HTML代码如下。当然，其对应的

CSS

属性也做了小幅调整，相应细节此处不赘述。接下来按照功能逐个介绍实现代码。在线计算器代码实现（1）按键的输入，通过在各按键处响应单击事件传递不同的参数，代码如下。在线计算器代码实现（2）清除和删除功能，代码如下。在线计算器代码实现（3）结果计算及错误提示，代码如下。（4）正负号切换，代码如下。在线计算器代码实现（5）重复运算符验证，定义一个全局变量，通过修改该全局变量的值来决定是否可以输入运算符，代码如下。在线计算器代码实现（6）实现在线计算器按钮的调用，部分代码如下。在线计算器思维拓展即便是一个小小的在线计算器，其中也暗藏了不少“陷阱”，非常考验开发者对细节的控制。例如，上述代码初看没有什么问题，进行仔细的测试后会发现，仍有一些细节需要更精确的控制。在线计算器思维拓展最后，对本项目进行简单的总结。一方面，通过本项目的演练，读者可以充分认识到开发思路的重要性，只有把思路理清楚，再用代码来实现相应功能才会更加有自信；另一方面，代码必须考虑各种可能的测试场景，设计有针对性的测试用例，而不是用最普通的测试简单测试一下，发现没有问题就觉得代码可以正常工作了。作为开发者，或者作为一个软件开发工程师或软件测试工程师，质量意识才是关键。在线时钟项目介绍本项目主要利用JavaScript结合CSS定位和transform属性实现一个HTML在线时钟，其效果如图10-3所示。本项目要实现的功能主要包含如下几个。（1）根据当前的系统时间，显示时间并精确到秒。（2）模拟正常的钟表走时效果，秒针每一秒走一小格；分针每一分钟走一小格；时针不能直接从6点变到7点，不是每小时走一大格，而是模拟每分钟都转动一点点角度的真实效果。在线时钟开发思路本项目的实现应主要抓住如下几个关键点。（1）表盘是一张固定的背景图像，可以直接在网络中下载自己喜欢的图像。（2）时钟的3个指针是3个盒模型，通过设置类似指针的背景图或者利用盒模型的背景色进行模拟即可。（3）通过设置CSS中的transform属性值rotate完成相应角度的旋转，即可模拟走时效果。（4）可以通过设置指针的旋转基点为左边或下边来完成指针旋转，也可以设置为一个长条状的盒模型，只为其一半设置背景色或背景图来模拟指针旋转，这种情况下不需要修改指针的旋转基点（即默认绕盒模型的正中心旋转）。在线时钟代码实现（1）完成表盘和指针的布局，代码如下。在线时钟代码实现（2）实现定时器代码，完成指针的旋转走时，代码如下。通过对本项目的演练，能够对表面上看似没有思路的问题多一些思考，对复杂问题多一些分解，并通过不断地代码积累，找到更加简洁、更加高效的实现手段。倒计时程序项目介绍倒计时程序是日常生活中比较常见的一种应用程序。倒计时的计时精度通常可以精确到毫秒。本项目中所要完成的倒计时程序主要用于PPT演讲等只需要精确到秒或分钟的场景。本项目实现的功能主要包含如下几个。（1）可以设置时间，单位为分钟。可以通过两边的加减按键来微调时间，也可以手动在文本框中输入时间。（2）倒计时按照“时-分-秒”的方式显示。（3）可以随时暂停倒计时和刷新页面。（4）当倒计时完成后，自动播放一首音乐用于提醒。倒计时程序开发思路首先，分析页面布局，整个页面分成3个部分，头部主要是Logo和文字信息，底部主要是版权声明信息。重点是中部的主体功能部分，使用图标来模拟5个按钮，同时使用一个文本框来完成倒计时总数的输入和修改。其次，分析时间总数的输入、减少和增加的功能应该如何来实现。确认一下规则，时间总数应该至少为1分钟，不能低于1分钟，不允许出现小数；再次，该文本框是可读写的，用户可以直接输入内容，所以必须限制只能输入数字，这可利用正则表达式实现，此处不赘述。倒计时程序开发思路此后，关于倒计时的暂停功能，按照常规思路，无非就是简单调用clearInterval()函数。但是这里有一个问题需要特别注意，如果简单地使用这种方式在倒计时暂停后再开始，则会出现倒计时从头开始的情况，而不是从倒计时的剩余时间开始。最后，实现最重要、最核心的功能，单击开始按钮实现倒计时。其中的逻辑相对复杂一点，不但牵涉剩余小时、分钟、秒的数值的计算，每一秒都要判断数值的变化是否会触发高位数字减1操作，同时包括分钟、秒在59和00之间的切换等。这似乎很复杂，但是有一个简单的解决方案，即将总时间数换算成秒，每过一秒将该数值减1。至于小时、分钟和秒的切换，只需要通过当前的总秒数来对小时（3600秒）、分钟（60秒）等求余即可，这样就将相对复杂的逻辑判断变成了一个简单的数学运算。倒计时程序代码实现1．页面布局实现页面中的元素比较多，本项目可以帮助读者对盒模型+CSS的布局进行巩固和强化。以下为本项目的布局代码，并不代表唯一答案，仅供读者参考。倒计时程序代码实现1．页面布局实现倒计时程序代码实现2．实现按钮功能倒计时程序代码实现2．实现按钮功能倒计时程序代码实现3．限制输入数字同样地，因为用户可以在文本框内输入任意值，所以必须响应文本框的onkeyup事件，这里通过正则表达式来限制用户只能输入数字，代码如下。倒计时程序代码实现4．实现倒计时在实现倒计时之前，定义一批全局变量，因为有多个函数可能会用到这批全局变量，用于控制倒计时的开始和暂停等，代码如下。倒计时程序代码实现基于开发思路实现开始倒计时的核心代码，代码如下。倒计时程序代码实现5．实现暂停计时和刷新页面上述代码很好地实现了预定的功能，由于代码量较大，这里不再单独给出所有代码。对于整个过程的工作原理和解决方案的理解是最核心、最重要的部分，读者要能够举一反三，以解决实际问题，这些基本功的训练远胜于将代码运行起来。倒计时程序思维拓展既然可以完成倒计时程序，自然也可以完成闹钟或者秒表程序，与定时器有关的都可以利用相似的原理来完成。通过本项目的实战可以发现，要使用相对简单的解决方案来处理问题，而不是使一个本身复杂的算法在代码实现的时候变得更加复杂。图像轮播项目介绍图像轮播效果在网页中的使用频率越来越高，特别适用于在网站首页展示重要事项或广告。目前网络上也有越来越多基于JavaScript框架的轮播组件可供选择，这样只需要设定好轮播图像的地址和核心参数，即可完成图像轮播的效果。本项目使用原生JavaScript，不借助任何组件和框架来实现图像轮播效果，如图10-5所示。图像轮播开发思路对各种轮播效果进行观察可以发现，其实质就是几张相同尺寸的图像在一定的时间内不停地进行平滑的切换显示。所以要实现这样的效果，首先要解决的问题就是图像的切换，进而解决平滑切换，最后实现手动切换效果。图像轮播开发思路直接利用定时器对图像的地址进行修改进而实现切换，虽然不够平滑，视觉效果较差，但是也不失为一种简