1.随机数
<html>
<body>
<scripttype="text/javascript">
var r=Math.random()
if (r>0.5) {
document.write("r>0.5")
}
else {
document.write("r<0.5")
}
</script>
</body>
</html>
2.确认框
<html>
<head>
<scripttype="text/javascript">
function show_confirm()
{
var r=confirm("Pressa button!"); //提示框内的内容
if (r==true)
{
document.getElementById('name').innerHTML="点击的是确定";
}
else
{
document.getElementById('name').innerHTML="点击的是取消"; }
}
</script>
</head>
<body>
<input type="button"οnclick="show_confirm()" value="Show a confirm box" />
<p id="name"></p>
</body>
</html>
3.按钮动画
<html>
<head>
<scripttype="text/javascript">
function mouseOver()
{
document.b1.src="/i/eg_mouse.jpg"
}
function mouseOut()
{
document.b1.src="/i/eg_mouse2.jpg"
}
</script>
</head>
<body>
<a href="/index.html"target="_blank">
<img border="0"alt="Visit W3School!" src="/i/eg_mouse2.jpg"name="b1" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a>
</body>
</html>
4.鼠标移到指定位置显示不同字符
圆形：shape="circle"，coords="x,y,z"
这里的 x 和 y 定义了圆心的位置（"0,0"是图像左上角的坐标），r 是以像素为单位的圆形半径。
多边形：shape="polygon"，coords="x1,y1,x2,y2,x3,y3,..."
每一对"x,y" 坐标都定义了多边形的一个顶点（"0,0"是图像左上角的坐标）。定义三角形至少需要三组坐标；高纬多边形则需要更多数量的顶点。
多边形会自动封闭，因此在列表的结尾不需要重复第一个坐标来闭合整个区域。
矩形：shape="rectangle"，coords="x1,y1,x2,y2"
第一个坐标是矩形的一个角的顶点坐标，另一对坐标是对角的顶点坐标，"0,0"是图像左上角的坐标。请注意，定义矩形实际上是定义带有四个顶点的多边形的一种简化方法。
例如，下面的 XHTML片段在一个 100x100 像素图像的右下方四分之一处，定义了一个对鼠标敏感的区域，并在图像的正中间定义了一个圆形区域。
<html>
<head>
<scripttype="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="/i/eg_planets.jpg"border="0" usemap="#planetmap" alt="Planets"/>
<map name="planetmap"id="planetmap">
<area shape="circle"coords="180,139,14"
onMouseOver="writeText('直到 20 世纪 60 年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')"
href="/example/html/venus.html" target="_blank" alt="Venus" />
<area shape="circle"coords="129,161,10"
onMouseOver="writeText('从地球上是很难研究水星的，这是由于它和太阳的距离总是很近。')"
href="/example/html/mercur.html" target="_blank" alt="Mercury" />
<area shape="rect"coords="0,0,110,260"
onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"
href="/example/html/sun.html" target="_blank" alt="Sun" />
</map>
<p id="desc"></p>
</body>
</html>
5.计数器
<html>
<head>
<scripttype="text/javascript">
var c=0
var t
function timedCount()
{
document.getElementById('txt').value=c
c=c+1
t=setTimeout("timedCount()",1000)
}
function stopt()
{
clearTimeout(t);
}
</script>
</head>
<body>
<form>
<input type="button"value="开始计时！" onClick="timedCount()">
<input type="text"id="txt">
<input type="button"value="停止计时！" onClick="stopt()">
</form>
<p>请点击上面的按钮。输入框会从 0 开始一直进行计时。</p>
</body>
</html>
6.钟表
<html>
<head>
<scripttype="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}
function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>
<body οnlοad="startTime()">
<div id="txt"></div>
</body>
</html>
7.跳出隐藏的框
display:none与visible:hidden
display:none和visible:hidden都能把网页上某个元素隐藏起来，但两者有区别:
display:none ---不为被隐藏的对象保留其物理空间，即该对象在页面上彻底消失，通俗来说就是看不见也摸不到。
visible:hidden--- 使对象在网页上不可见，但该对象在网页上所占的空间没有改变，通俗来说就是看不见但摸得到。
<style type="text/css">
.white_content{display: none; }
</style>
<script language="javascript" type="text/javascript">
}
function dakai(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block'
}
function guanbi(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none'
}/</script>
</head>
<body>
<input type="text" id="yuanGong"onclick="dakai()" size="50">
<div id="light" class="white_content">
<table border="1" width="350"id="table4" >
。。。。。。
</table>
<a href="javascript:void(0)" onclick="guanbi()">确定</a>
<input type="button" name="button"onclick="guanbi()" value="也可以使用按钮来确定" />
</div>
</body>
</html>
759
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
