在HTML代码中使用JavaScript代码的例子,JavaScript中获取鼠标位置相关属性总结

<script></script> 标签

javascript并没有mouse对象,获取鼠标坐标要靠强大的event对象。

JavaScript 运算符主要包括:

要在 HTML 中使用 JavaScript ,需要使用 <script></script>
标签,并定义 type 属性值为 text/javascript ,正如前面的 alert
弹出提示框 例子所示:

我们通过监听document的mousemove,就可以实时获得鼠标位置。

  1. 算术运算符
  2. 赋值运算符
  3. 比较运算符
  4. 三元运算符
  5. 逻辑运算符
  6. 字符串连接运算符

复制代码 代码如下:

但是!!event中和鼠标相关的属性太多了,很让人头大!如下:

算术运算符

<script type=”text/javascript”>
alert(“我是提示文字!”);
</script>

event.layerX event.layerY
event.clientX event.clientY
event.pageX event.pageY
event.offsetX event.offsetY
event.screenX event.screenY
event.x event.y
运算符 说明 例子 运算结果
+ y = 2+1 y = 3
y = 2-1 y = 1
* y = 2*3 y = 6
/ 除,返回结果为浮点类型 y = 6/3 y = 2
% 求余,返回结果为浮点类型
要求两个操作数均为整数
y = 6%4 y = 2
++ 递加,分为前加和后加
对布尔值和 NULL 将无效
y = 2
++y(前加)
y++(后加)
y = 3
递减,分为前递减和后递减
对布尔值和 NULL 将无效
y = 2
–y(前减)
y–(后减)
y = 1

通常单独的 JavaScript 代码是没什么意义的, JavaScript 代码一般会结合
HTML 代码一起使用,因为 JavaScript 本来就是为了弥补 HTML
的缺陷而产生的。下面是 JavaScript 代码和 HTML 代码一起使用的例子:

共计6组!

对于前加和后加,执行后的结果都是变量加1,其区别在于执行时返回结果不一样,参考下面两个例子:

复制代码 代码如下:

而且他们的区别并不明显,各浏览器间还不兼容!

复制代码 代码如下:

<html>
<head>
<script type=”text/javascript”>
alert(“我是提示文字!”);
</script>
</head>
<body>
<div>图片及文字内容</div>
</body>
</html>

这篇文章的目的就是搞清楚他们的区别,以及选出那些不推荐使用的。

var x = 2;
alert(++x); //输出:3
alert(x); //输出:3

通常,JavaScript 代码(<script></script>标签)放置于
<head></head> 标签之内,更详细的内容请参阅《JavaScript
代码放置于 HTML
什么地方?》。

测试代码

var y = 2;
alert(y++); //输出:2
alert(y); //输出:3

您可能感兴趣的文章:

  • JavaScript代码应该放在HTML代码哪个位置比较好?
  • JavaScript基础教程之alert弹出提示框实例
  • 编程语言JavaScript简介

直接运行下列代码:

递减同理。

复制代码 代码如下:

赋值运算符

发表评论

电子邮件地址不会被公开。 必填项已用*标注