js鼠标悬停显示文字实例

JavaScript021

js鼠标悬停显示文字实例,第1张

一、首先需要div布局:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>js悬停</title>

<style type="text/css">

p {

width: 200px

height: 200px

background-color: skyblue

text-align: center

line-height: 200px

}

</style>

</head>

<body>

<p id="txt">我是一个DIV</p>

<script type="text/javascript">

var txt = document.getElementById('txt')

txt.setAttribute("title","鼠标悬停了")

</script>

</body>

</html>

二、div实在的在开发工具里面的代码效果如下截图:

三、这段代码最主要的重点是如下:

<script type="text/javascript">

var txt = document.getElementById('txt')

txt.setAttribute("title","鼠标悬停了")

</script>

四、实际代码在浏览器的渲染如下:

如<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

1、<html>

2、<head>

3、<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

4、<title>JS教程:鼠标悬停时显示文字或显示图片</title>

5、<script language="javascript">

6、functionshowPic(sUrl{varx,yx=event.clientXy=event.clientYdocument.getElementById("Layer1").style.left=xdocument.getElementById("Layer1").style.top=ydocument.getElementById("Layer1").innerHTML = "<img src=\"" + sUrl + "\">"  document.g

7、function hiddenPic(){ document.getElementById("Layer1").innerHTML = ""document.getElementById("Layer1").style.display = "none"}

8、</script>

9、</head>

10、<body>

11、<div id="Layer1" style="display:noneposition:absolutez-index:1"></div>

12、<img src="#########" onmouseout="hiddenPic()"

13、onmousemove="showPic(this.src)" title="wowowowo" />   //此行title实现悬停时显示文字onmousemove实现显示图片

14、<p></p>

15、</body>

16、</html>

<title>js判断输入是否为数字</title>

<script language="javascript教程">

function ischeckNum(){var num = document.getElementById('isnum').valueif( num ){if( !isNaN( num ) ){alert('是数字')

return false}else{alert('你输入的数据不是数字')

myfm.isnum.select()

return false}}else{alert('需输入内容')

myfm.isnum.focus()}}</script></head><body><form name="myfm" method="post" action=""><label><input type="text" name="isnum" id="isnum"></label><label><input type="button" name="Submit" value="检测是否为数字" onClick="ischeckNum()"></label></form></body></html>注明:在javascript中要判断用户输入的内容是否为数字我们只要用isNaN来判断一下就OK了。

isNaN(numValue) 其中必选项 numvalue 参数为要检查是否为 NAN 的值

如果值是 NaN, 那么 isNaN 函数返回 true ,否则返回 false

使用这个函数的典型情况是检查 parseInt 和 parseFloat 方法的返回值。还有一种办法,变量可以与它自身进行比较。 如果比较的结果不等,那么它就是 NaN 。