js,jq综合应用四个例子

1.随机飘雪的网页特效经常在网站中见到，再配合音乐可以更好的营造温馨的氛围，效果如图:

该项目需要实现的功能主要包含如下几个方面：
1.通过代码来新增一片或多片雪花；
2.雪花新增的位置是随机的；
3.可以随时开始或暂停雪花移动；
4.可以删除部分或所有雪花；
5.雪花向下移动过程中还需要适时补充雪花，这样才能模拟下雪的效果；
6.当雪花移出整个屏幕区域后，不应该继续保留该雪花，应该及时将其删除，节约浏览器资源；
7.背景音乐的播放；
8.开始按钮和停止按钮应该交替使用，不能多次单击。

开发思路：
1.新增雪花：新增一片雪花测操作其实和新增一个普通html元素没有任何本质区别，可以通过调用document.createElement()方法相任意容器中添加元素，并以对该元素设置CSS属性的方式完成元素的增加。
2.位置随机：要实现一片随机位置的雪花，需要考虑两个因素：一是必须使用固定定位，这样才能实现位置的强制调整；而是必须考虑浏览器窗口的高度和宽度，因为如果让雪花飘在窗口之外就没有任何意义了。
3.开始和暂停：当开始让雪花移动时，需要使用setInterval()定时器来实现。定时器本身就像一个死循环结构以信仰，在定时器任务代码中，，每触发一次定时器，就让所有雪花的top属性基于该片雪花现在的位置再增加几个随机像素值，这样就可以实现快慢不一、雪花飞舞的效果。
4.删除雪花：要实现删除雪花，首先必须要获取某片雪花对应的元素，然后调用remove()。
5.补充新的雪花：由于雪花会一直向下移动，最终会消失在浏览器窗口中，所以为了保持雪花一直在下的效果，还需要在此过程中不停的自动增加雪花。要实现这一效果，方法很多，但是其核心目的是：当触发到一定条件时，就应该考虑让雪花新增。如当某片雪花距离浏览器顶部的距离超过了浏览器窗口的高度时，就应该新增一片雪花。
6.移出无效雪花：只需要在计时器代码中对所有雪花的位置进行一下判断，当其offsetTop属性对应的值超过浏览器窗口高度时，即可将该片雪花移除。
7.背景音乐：使用HTML5自带的标签实现。
8.开始、停止按钮交替单击

2.在线计算器

实现功能主要包括：
1.当用户输入0-9的数字和运算符时，如实反应在结果框中，便于用户核对输入；
2.单击AC按钮清除所有内容，单击退格按钮只删除最后一个字符；
3.单击=按钮对结果框中用户输入内容计算并显示结果；
4.按±按钮对某个数字进行正负数切换；
5.如果用户输入的表达式出现错误，无法计算结果，则在结果框中提示错误信息；
6.不能重复输入运算符，比如5±+*6等。

开发思路：
1.运算表达式的输入：如document.getElementById(“result”).value+=”3”
2.清除结果:如document.getElementById(“result”).value+=” ”
3.计算结果：可以使用eval()函数
4.正负号切换：可以直接用0来对其数字进行减法运算；
5.错误提示：建议使用JavaScript的异常处理机制。通过捕获eval()函数在运算表达式时出现的异常来提示出错信息；
6.重复运算符验证：可以检测用户输入的最后一个符号是数字还是符号，如果是符号，则不允许再输入一个符号。

3.在线时钟

1.根据当前的系统时间，精确到秒显示时间；
2.模拟正常的时钟走时效果，每一秒秒针走一小格；
3.分针每一分钟走一小格；
4.时针不能直接从6点到7点，不是每小时走一大格，而是模拟每分钟都移动一点点角度的真实效果。

开发思路：
1.表盘是一张固定的背景图片；
2.三个指针是三个DIV，通过设置类似指针的背景图或者利用DIV的背景色模拟即可；
3.通过设置CSS中Transform变形属性值rotatep完成相应角度的旋转，即可模拟走时效果；
4.可以通过设置指针的旋转基点为左边或下边来完成指针旋转，也可以设置为拉通的一条DIV，而只为其一般设置背景色或背景图来模拟指针旋转，这种情况下不需要修改指针的旋转基点（即默认绕DIV的正中心点旋转）。
布局：核心元素4个，一个表盘，三个指针，并建议对三个指针使用绝对定位。绝对定位的一个前提是其父容器不能是默认值static，所以只需要将时钟表盘这个父容器设置为position:relative即可，并不需要设置任何偏移量。
另外对于指针旋转角度问题，一个表盘有60个刻度，每一个小时之间有5个小格子，一个圆圈是360度(deg)，所以每一小格要旋转的角度是6deg，每一个小时是30deg；通过每秒钟的定时器来获取当前秒数，进而让该数据乘以6，即可得到当前需要旋转的角度。再获取当前的分钟数，进而完成让分针每一分钟转到6deg的效果，同时让时针每一分钟转到0.5deg。需要注意的是，角度是假设从12点钟为0deg来进行计算的，所以在布局时，三个指针都应该在12点钟方向的纵向布局。

4.倒计时程序

1.可以自己设置时间，单位为分钟。可以通过两边的加减按钮来微调时间，也可以手动在文本框中输入；
2.倒计时按照“时：分：秒”的方式显示；
3.可以随时暂停计时；
4.当倒计时完成后，自动播放一首音乐作为提醒。

	
		
		
		
		
	

	
		

			
倒计时工具
		
		

		

			

			
			
			
分钟
			
			
00
			
-
			
00
			
-
			
00