黑马程序员_JavaScript案例（一）

来源：互联网发布：mac下制作dos 编辑：程序博客网时间：2024/06/08 07:08

------- android培训、java培训、期待与您交流！ ----------

这一段时间学习了JavaScript，使用JavaScript做了几个案例。

1、JS控制网页字体大小

2、JS控制某个部分显示或者隐藏

3、菜单切换效果

4、广告漂浮效果

1、JS控制字体大小，在网页上有一句话，还有两个按钮，一个按钮是变大，一个按钮是变小，当我点击变大按钮时，文字会比原来大，当我点击变小时，文字就会缩小。

首先写一个普通的html页面

<html><head><title>JS改变字体大小</title></head><body><div id="div1">把我变了</div><input type="button" value="变大"" /><input type="button" value="变小" /></body></html>

这时给两个按钮分别添加点击事件

oncick="changeBig()"和onclick="changeSmall()"

写完以后我们需要在head标签内添加JavaScript.

我们要控制字体的大小，首先需要通过document对象获取到要控制的字体的对象，通过对象去更改div内的样式，这样就可以达到更改字体大小的效果了

<script type="text/javascript">var x = 50;//设置全局变量，用于控制字体的大小function changeBig(){var div1 = document.getElementById("div1"); //获取div对象div1.style.fontSize = x+"px";  //修改div样式x = x + 10;}function changeSmall(){x = x - 10;var div1 = document.getElementById("div1");div1.style.fontSize = x + "px";}</script>

至此，使用JS控制字体更改大小的效果就已经完成了。

2、JS控制某个部分显示或者隐藏

在CSS中让网页中的某个部分隐藏的话，用两种方式，一种方式是display，一种方式是 visibility。

display和visibility不同的地方在于用display控制的对象，隐藏之后不会在占有网页空间，而visibility控制的对象隐藏之后

还会占有网页空间。

同样我们要完成这样的效果也是需要通过更改css样式来达到我们的目的。

首先，完成的是html页面，页面上同样是两个按钮和一句话，按钮则是显示和隐藏按钮

<html><head><title>JS控制显示和隐藏</title></head><body><div id="div1">把我变了</div><input type="button" value="给我显示" /><input type="button" value="给我隐藏" /></body></html>

对两个按钮分别添加鼠标点击事件

onclick="show()"和onclick="hidden"

接着我们需要的是通过需要被显示或者隐藏的id获取对应的对象进而控制文字的显示或者隐藏

下面是JS的代码

<script type="text/javascript">function hide(){var div1 = document.getElementById("div1"); //获取div对象div1.style.visibility = "hidden";//div1.style.display = "none";  }function show(){var div1 = document.getElementById("div1");div1.style.visibility = "visible";//div1.style.display = "block";}</script>

至此，第二个例子同样完成了

总结，我们使用JavaScript做出一些我们期望的效果其实是通过js去获取对象，使用对象去更改css样式。

0 0