编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 跟随鼠标的旋转背景 【实例描述】 鼠标在页面中移动的时候,会一直有一个旋转的椭圆点跟随它。本例学习如何实现这种效果。 【实例代码】 <SCRIPT LANGUAGE="JavaScript">
var Clrs = new Array(6);
//随机的背景颜色,保存在一个数组中
Clrs[0] = 'ff0000';
Clrs[1] = '00ff00';
Clrs[2] = '000aff';
Clrs[3] = 'ff00ff';
Clrs[4] = 'fff000';
Clrs[5] = 'fffff0';
var yBase = 200;
var xBase = 200;
var step;
var currStep = 0;
var Xpos = 1;
//横坐标变量
var Ypos = 1;
//纵坐标变量
if (document.all) {
function MoveHandler()
{
Xpos = document.body.scrollLeft+event.x;
//设置横坐标
Ypos = document.body.scrollTop+event.y;
//设置纵坐标
}
document.onmousemove = MoveHandler;
//绑定鼠标的移动事件
}
function Comet()
{
if (document.all) {
yBase = window.document.body.offsetHeight / 4;
xBase = window.document.body.offsetWidth / 4;
}
if (document.all) {
for ( i = 0 ; i < starsDiv.all.length ; i++ ) {
//循环设置每个div的显示位置
step = 3;
starsDiv.all[i].style.top = Ypos +
yBase*Math.cos((currStep + i*4)/12)*Math.cos(0.7+currStep/200);
starsDiv.all[i].style.left = Xpos +
xBase*Math.sin((currStep + i*3)/10)*Math.sin(8.2+currStep/400);
for (ai = 0; ai < Clrs.length; ai++) {
var c=Math.round(Math.random()*[ai]);
//获取随机的一个颜色值
}
starsDiv.all[i].style.background = Clrs[c];
//动态设置div的背景色
}
}
currStep += step;
setTimeout("Comet()", 5);
//设置定时器-实现旋转效果
}
Comet();
</script>
【运行效果】 【难点剖析】 本例的重点是旋转背景所在的层。跟随鼠标的旋转背景由多个不同颜色的点组成,其中每个点是一个层(div),每个层的颜色不同。这些层的位置通过鼠标的坐标获取,此处要注意层的位置使用“position:relative”,表示相对坐标,其坐标的原始点是这些层的父级节点“starsDiv”。 【源码下载】 本实例JS代码下载
使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。 |