JavaScript的一些小实例

           当我们把鼠标放到某一个超链接上面时,显示其相关信息;曾今我也很想实现这样的效果,总感觉很洋盘……这段时间学习在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.onmouseover=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 onload="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.onmouseover=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 onbeforeunload="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.onfocus=bg;
num.onblur=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 oncopy="false" onload="TxtNums();" onbeforeunload="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="获取数据" onclick="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" onclick="cbshow();"><label for="cbshows">高级设置</label>
<br>
<hr>
<div id="div1" style="display=none;">要显示的高级操作</div>
<br>
<br>
<a href="http://www.baidu.com" onmouseout="document.getElementById('ceshi').style.display='none'" onmouseover="document.getElementById('ceshi').style.display=''">百度</a>
<br>
<div id="ceshi" style="display:none"><a href="http://www.baidu.com">百度一下你就知道</a></div>
</body>
</html>


阅读更多
个人分类: JS的学习 经验分享
想对作者说点什么? 我来说一句

html的一些小练习

2012年08月16日 4KB 下载

JavaScript实用技巧集锦

2009年03月08日 59KB 下载

渐变实例1.html

2016年09月01日 4KB 下载

些小算法 一些小算法

2009年09月12日 169KB 下载

没有更多推荐了,返回首页

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭