31,Q:用样式表(CSS)定制表格边框：
A:
〈Table border=0 id=tb1 style="border:3px solid red"〉
〈tr〉〈td〉用样式表(CSS)定制表格的例子〈/td〉〈/tr〉
〈/Table〉
32,Q:闪亮的表格边框：
A:
<table border="0" width="280" id="tb1" style="border:3px solid green">
<tr>
<td>
制做闪亮的表格边框！
</td>
</tr>
</table>
<script language="javascript">
<!-- 这段脚本放在表格的后面
function flashit()
{
if (!document.all) return
if (tb1.style.borderColor=="green")
tb1.style.borderColor="red"
else
tb1.style.borderColor="green"
}
setInterval("flashit()", 400)
//-->
</script>
33,Q:javascript 实现的简单时钟：
A:
(1)在〈Head〉〈/Head〉之间放置以下脚本:
<script language="javascript">
<!--
var timerID = null;
var timerRunning = false;
var id,pause=0,position=0;
function stopclock ()
{ if(timerRunning)
clearTimeout(timerID);
timerRunning = false;
}
function showtime ()
{
var now = new Date();
var hours = now.getHours();
var minutes = now.getMinutes();
var seconds = now.getSeconds()
var timevalue = "" + ((hours >12) ? hours -12 :hours)
timevalue += ((minutes < 10) ? ":0" : ":") + minutes
timevalue += ((seconds < 10) ? ":0" : ":") + seconds
timevalue += (hours >= 12) ? " P.M." : " A.M."
document.clock.face.value = timevalue;
timerID = setTimeout("showtime()",1000);
timerRunning = true;
}
function startclock ()
{ stopclock();
showtime();
}
//-->
</script>
(2)在〈Body〉属性中加 onLoad="startclock()"
(3)在〈Body〉〈/Body〉中间加
<form name="clock" onSubmit="0">
<div align="center">
<center><p><input type="text" name="face" size="13" value></p></center>
</div>
</form>
即可。
34,Q:自动滚动屏幕文字 A:
<Script Language="javascript">
var position = 0;
function scrollit()
{
if (position != 640 ){
position++;
scroll(0,position);
clearTimeout(timer);
var timer=setTimeout("scrollit()",25);
timer;
}
}
</Script>
以上脚本加在〈Head〉〈/Head〉中间，再在〈BODY〉属性中加 Onload="scrollit()"。
35,Q:“下雨”javascript 脚本：
A:将以下脚本放在〈Body〉〈/Body〉中间即可：
<Script Language="javascript">
<!-- Begin
var no = 50;
var speed = 1;
var ns4up = (document.layers) ? 1 : 0;
var ie4up = (document.all) ? 1 : 0;
var s, x, y, sn, cs;
var a, r, cx, cy;
var i, doc_width = 800, doc_height = 600;
if (ns4up) {
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
else
if (ie4up) {
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
x = new Array();
y = new Array();
r = new Array();
cx = new Array();
cy = new Array();
s = 8;
for (i = 0; i < no; ++ i) {
initRain();
if (ns4up) {
if (i == 0) {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");
document.write(",</font></layer>");
}
else {
document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");
document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");
document.write(",</font></layer>");
}
}
else
if (ie4up) {
if (i == 0) {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
document.write(",</font></div>");
}
else {
document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");
document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");
document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");
document.write("’</font></div>"); //设定雨点的字符
}
}
}
function initRain() {
a = 6;
r[i] = 1;
sn = Math.sin(a);
cs = Math.cos(a);
cx[i] = Math.random() * doc_width + 1;
cy[i] = Math.random() * doc_height + 1;
x[i] = r[i] * sn + cx[i];
y[i] = cy[i];
}
function makeRain() {
r[i] = 1;
cx[i] = Math.random() * doc_width + 1;
cy[i] = 1;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function updateRain() {
r[i] += s;
x[i] = r[i] * sn + cx[i];
y[i] = r[i] * cs + cy[i];
}
function raindropNS() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = self.innerWidth;
doc_height = self.innerHeight;
}
document.layers["dot"+i].top = y[i];
document.layers["dot"+i].left = x[i];
}
setTimeout("raindropNS()", speed);
}
function raindropIE() {
for (i = 0; i < no; ++ i) {
updateRain();
if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {
makeRain();
doc_width = document.body.clientWidth;
doc_height = document.body.clientHeight;
}
document.all["dot"+i].style.pixelTop = y[i];
document.all["dot"+i].style.pixelLeft = x[i];
}
setTimeout("raindropIE()", speed);
}
if (ns4up) {raindropNS(); }
else
if (ie4up) {raindropIE(); }
// End -->
</Script>
36,Q:“地震”javascript 脚本：
A:将以下脚本放在〈Body〉〈/Body〉中间即可：
<script language="javascript1.2">
<!--
function shake(n)
{
if (window.top.moveBy)
{for (i = 10; i > 0; i--)
{for (j = n; j > 0; j--)
{window.top.moveBy(0,i);
window.top.moveBy(i,0);
window.top.moveBy(0,-i);
window.top.moveBy(-i,0);
}
}
}
}
//-->
</script>
<form><input onclick="shake(2)" type="button" value="地震啦！"></form>
37,Q:一个用 javascript 实现的简陋的计算器：
A:全部代码如下：
<html>
<head>
<script language="javascript">
<!--
function compute(obj)
{obj.expr.value = eval(obj.expr.value)}
var one = '1'
var two = '2'
var three = '3'
var four = '4'
var five = '5'
var six = '6'
var seven = '7'
var eight = '8'
var nine = '9'
var zero = '0'
var plus = '+'
var minus = '-'
var multiply = '*'
var divide = '/'
var decimal = '.'
function enter(obj, string)
{obj.expr.value += string}
function clear(obj, string)
{obj.expr.value = ''}
//-->
</script>
</head>
<body>
<form name="calc">
<table border=1>
<tr align="right">
<td colspan=4><input name="expr" action="compute(this.form)"></td>
</tr>
<tr align=center>
<td><input type="button" value=" 7 " onClick="enter(this.form, seven)"></td>
<td><input type="button" value=" 8 " onClick="enter(this.form, eight)"></td>
<td><input type="button" value=" 9 " onClick="enter(this.form, nine)"></td>
<td><input type="button" value=" / " onClick="enter(this.form, divide)"></td>
</tr>
<tr align=center>
<td><input type="button" value=" 4 " onClick="enter(this.form, four)"></td>
<td><input type="button" value=" 5 " onClick="enter(this.form, five)"></td>
<td><input type="button" value=" 6 " onClick="enter(this.form, six)"></td>
<td><input type="button" value=" * " onClick="enter(this.form, multiply)"></td>
</tr>
<tr align=center>
<td><input type="button" value=" 1 " onClick="enter(this.form, one)">
<td><input type="button" value=" 2 " onClick="enter(this.form, two)">
<td><input type="button" value=" 3 " onClick="enter(this.form, three)">
<td><input type="button" value=" - " onClick="enter(this.form, minus)"></td>
</tr>
<tr align=center>
<td colspan=2><input type="button" value=" 0 " onClick="enter(this.form, zero)">
<td><input type="button" value=" . " onClick="enter(this.form, decimal)"></td>
<td><input type="button" value=" + " onClick="enter(this.form, plus)"></td>
</tr>
<tr align=center>
<td colspan=2><input type="button" value=" = " onClick="compute(this.form)"></td>
<td colspan=2><input type="button" value=" AC " size= 3 onClick="calc.expr.value = ''"></td>
</tr>
</table>
</form>
</body>
</html>
38,Q:在网页上实现“预览图”：
A:网页制做时，大的图片会消耗较长的下载时间，为了不使浏览者失去耐心，可以采用“预览图”(low source)的办法，即先下载一个“low source”，然后再下载真正需要显示的图片。在 Html 文档中标注“low source”的方法为：〈img src="需要显示的图片" lowsrc="预览图" width="x" height="y"〉(其中 width 和 height 是需要显示的图片的宽度和高度。如果不加 width 和 height 属性，浏览器视为以较小图片作为长宽尺寸。)
实现“预览图”还有一个方法，就是将预览图做成一个链接，如果用户愿意，可以点击它，再观看真正的图片，格式是：
<a href="需要显示的图片"><img src="预览图" width=x height=y border=0></a>
39,Q:闪亮的链接：
A:
<a href="linkto" name="link1" style="text-decoration:underline;color:green;">闪亮的链接</a>
<script language="javascript">
<!-- 这段脚本放在链接的后面
function flashit()
{
if (!document.all) return
if (link1.style.color=="green")
link1.style.color="red"
else
link1.style.color="green"
}
setInterval("flashit()", 400)
//-->
</script>
40,Q:在网页中添加“添加到收藏夹“设为首页”功能(似乎只能在 IE5.0 以上版本使用?)：
A:添加到收藏夹：〈a href="javascript:window.external.addFavorite('http://链接','说明');"〉添加到收藏夹〈/a〉
设为首页：〈a href=# onclick=this.style.behavior='url(#default#homepage)';this.setHomePage('http://链接');〉设为首页〈/a〉