當我們把鼠標放到某一個超鏈接上面時，顯示其相關信息；曾今我也很想實現這樣的效果，總感覺很洋盤……這段時間學習在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>