编程(Programming)是编定程序的中文简称,就是让计算机代码解决某个问题,对某个计算体系规定一定的运算方式,使计算体系按照该计算方式运行,并最终得到相应结果的过程。为了使计算机能够理解(understand)人的意图,人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机,使得计算机能够根据人的指令一步一步去工作,完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 文字滑动 【实例描述】 文字滑动和文字滚动的效果一样,本例提供一种自定义marquee类的方式,实现一段文字的滑动效果。 【实例代码】 <html>
<head>
<script type="text/javascript">
function $(id) {
return document.getElementById(id); //获取控件的ID
}
function marquee(time, oDiv, oLtd, oRtd) //制作一个marquee类
{
/*
time 值越大速度越慢
oDiv最外层div
oLtd左边的td
oRtd右边的td
*/
var timer, width = oLtd.offsetWidth;
function move() {
if (oDiv.scrollLeft >= width) //当滚动条移动到最后时,重新开始
oDiv.scrollLeft = 0;
else
oDiv.scrollLeft ++; //一直滚动
} oRtd.innerHTML = oLtd.innerHTML; //左侧内容转移动到右侧
oDiv.style.overflow = "hidden"; //隐藏最外层div
oRtd.style.width = oLtd.offsetWidth; //右侧td的宽度
oDiv.onmouseover = function () { //鼠标移动过来的事件
window.clearInterval(timer); //清空定时器-停止滚动
};
oDiv.onmouseout = function () {
timer = window.setInterval(move, time); //鼠标移走便开始滚动
};
timer = window.setInterval(move, time); //开始滚动
}; window.onload = function () {
new marquee(25, $("myDiv"), $("myTd1"), $("myTd2"));
}
</script>
</head>
<body>
<div id="myDiv" style="border:#CCCCCC 1px dashed; width:300px;"><!--设置显示的宽度-->
<table cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="myTd1">
<table width="342" cellpadding="0" cellspacing="0"><!--注意这里的宽度必须设置,并且要设置为具体值-->
<tr align="center">
<td>左边</td>
<td>右边</td>
<td>左边</td>
<td>右边</td>
</tr>
</table>
</td>
<td id="myTd2"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
【运行效果】 【难点剖析】 本例的重点是自定义的marquee类,其中定义了marquee的“onmouseover”、“omnoIIseout”事件和“move”方法。通过此类可轻松实现文字或图片的滑动效果。 【源码下载】 本实例JS代码下载
使用编程语言写的程序,由于每条指令都对应计算机一个特定的基本动作,所以程序占用内存少、执行效率高。 |