当我们把鼠标放到某一个超链接上面时，显示其相关信息；曾今我也很想实现这样的效果，总感觉很洋盘……这段时间学习在JS，感觉还可以，不像自己才开始学习编程时那么的困难；下面是我对这一效果的实现（只是实现了当鼠标放上去时的效果，并没有写当鼠标离开的状态。）：
<html>
<head>
<title>层超链接操作</title>
language="javascript" type="text/javascript">
//实现的功能是：当用户将鼠标放在连接上面的时候，动态的创建层，并显示其相关信息;
function btnclick()
{
var links=document.getElementsByTagName("a");///获取所有的超链接操作;
for(var i=0;i<links.length;i++){
var linkd=links[i];
///动态添加onmouseover事件
linkd.οnmοuseοver=linkonmouseover;
}
}
function linkonmouseover()
{
//创建层操作;
var div=document.createElement("div");///创建元素;
div.style.position="absolute";
div..style.left=window.event.clientX;
div.style.top=window.event.clientY;
div.id="tool";
div.innerText="这是在进行实验操作";
document.body.appendChild(div);
}
}
</script>
</head>
<body οnlοad="btnclick();">
<img src="file:///D:/My Documents/My Pictures/.jpg" width="250" height="376"><br>
<a href="http://www.baiduc.com">百度</a>
<a href="http://www.sian.com">新浪</a>
<a href="http://www.tianya.com">天涯</a>
<br>
</body>
</html>
下面的模块主要是实现文字随鼠标的移动而移动：
<html>
<head>
<title>鼠标操作</title>
<script language="javascript" type="text/javascript">
document.οnmοuseοver=function()
{
var num=document.getElementById("imgo");///获取指定的ID
var x=window.event.clientX;
var y=window.event.clientY;///获取鼠标的座标值;
///判断是否存在;
if(!num){
return;
}
num.style.left=x;
num.style.top=y;
num.style.cursor="pointer";
}
</script>
</head>
<body οnbefοreunlοad="window.event.returnValue='确定吗?'">
<div id="imgo" style="position:absolute;">鼠标操作</div>
<br>
<a href="http://www.baidu.com" title="这是个毒元素">百度</a>
<!--主要是用来测试刷新或跳转到别的页面--->
</body>
</html>
下面主要是实现当用户点击一个文本框时，则背景就显示为红色；相反就为白色：
<html>
<head>
<title>文本框获取焦点操作</title>
<script language="javascript" type="text/javascript">
function TxtNums(){
var txtnum=document.getElementsByTagName("input");
///为每一个添加事件操作;
for(var i=0;i<txtnum.length;i++){
var num=txtnum[i];
num.οnfοcus=bg;
num.οnblur=backg;
}
}
function bg()
{
this.style.background="red";
}
function backg()
{
this.style.background="whites";
}
function hq()
{
var txtvalue=document.getElementById("txtuser");
var values=txtvalue.value;
if(values=="123456"){
alert(values);
}
else{
alert("不正确！")
}
}
</script>
</head>
<body οncοpy="false" οnlοad="TxtNums();" οnbefοreunlοad="window.event.returnValue='确定吗?'">
<input type="text" id="txtuser">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<input type="text">
<br>
<input type="button" value="获取数据" οnclick="hq();">
</body>
</html>
在平时使用一些软件的时候，如果遇到要进行单选的操作，我总是喜欢点击文字，而不是单选框；但同样可以达到选中的目的；不知道你们这样做过木有！反正我是经常这样做；下面是我对这一效果的实现：
<html>
<head>
<title>显示操作</title>
<script language="javascript" type="text/javascript">
function cbshow()
{
var div1=document.getElementById("div1");///获得层;
if(cbshows.checked){
///选中了
div1.style.display='';///只要不为none就可以显示；相反就不可以显示;
}
else{
div1.style.display='none';
}
}
</script>
</head>
<body>
<input type="checkbox" id="cbshows" οnclick="cbshow();"><label for="cbshows">高级设置</label>
<br>
<hr>
<div id="div1" style="display=none;">要显示的高级操作</div>
<br>
<br>
<a href="http://www.baidu.com" οnmοuseοut="document.getElementById('ceshi').style.display='none'" οnmοuseοver="document.getElementById('ceshi').style.display=''">百度</a>
<br>
<div id="ceshi" style="display:none"><a href="http://www.baidu.com">百度一下你就知道</a></div>
</body>
</html>