第十二章：JavaScript DOM应用实例1
更新于：2017-11-23 13:21:40
接下来根据前几节所学知识演示五个很实用的实例，楠神不贴完整的代码了（自己下载来看），在以后的开发工作中很容易遇到的：
1）点击按钮给表单增加输入框：
效果详解：
点击红包面值右边“+”就会多出来一行“红包面值”的选择框；点击“-”就会去掉当前行的“红包面值”选择框。假如某平台给用户发放红包，有了这样的功能，是不是变得即简洁方便又灵活，一次性想怎么发红包都可以。
在实际工作中，类似效果的需求是非常多的。
2）浮窗
浮窗应用很广泛的，比如用来做信息提示、弹出公告、弹出登录框等。
3）广告（一div元素）随滚动条浮动
效果详解：
右边有一个广告图片，我们下拉滚动条，当图片的位置处在可视窗口中时，它不动；当图片的位置消失在可视窗口中时，它会随滚动条一块浮动，最终让图片一直处于可视窗口中（不会被淹没在可视窗口之外）。
实现这个功能的代码：
floatChange函数通过onscroll事件属性触发。
4）图片延时加载功能
是这样的，假如一个页面有很多图片显示，就比如上图中6.jpg图片处于最下面的位置。可能用户打开页面需要往下拉很长的滚动条才可以看到6.jpg图片。那问题来了，假如用户看到2.jpg就直接把页面关掉了，图片3.jpg、4.jpg、5.jpg、6.jpg也都已经从服务器下载下来了，用户却没有看。从宽带的角度出发，是不是造成了浪费。
注：一个页面从上而下读取，读到调用CSS文件、JS文件、图片文件的标记元素，会向服务器请求这些文件的。
为了减少不必要的宽带和连接数开支，我们可以利用JS做延时加载的功能。看下效果：
打开页面，利用开发者工具（F12）Network查看目前有四个文件请求。其实这个页面还有六个图片，暂时在窗口中不显示，所以没有请求。当我们往下拉滚动条时，发现这样的情况：拉到快出现图片的地方，Network此时才去请求图片。
这就是延时加载技术。很多网站尤其页面有大量图片的网站，比如新浪博客都使用了类似的技术。
分析下实现延时加载技术的原理：
HTML标签代码：
<img>标签src属性才是图片URL，当网页读到一个<img>标签时，就会按照src值去请求服务器图片。所以我们先给每一个<img>标签src赋值默认的图片URL，把真正的图片URL赋值给自定义的属性“tem”（浏览器是不会按照tem属性值请求图片的）。
通过JS做判断，如果某个图片将要出现在可视窗口时，就把它的tem属性值赋给src属性值，此时浏览器才会请求真实的图片URL。
代码也很简单：
5）在线显示时间
