JavaScript简单使用实例

首先，我所认识理解的JavaScript是给我们固有的网页添加一些功能，是这些网页面向用户体验更加完美。所以要使用JavaScript，必须是在HTML+CSS的基础上实现的。说白了JavaScript就是给网页中的某些按钮、文本框中加入特效。

编写JavaScript的流程：

1.要有基础的页面布局HTML+CSS

2.要确定修改布局中的哪个元素的哪个具体属性

3.确定用户做哪些操作（为相应的操作加入特效功能）经常将这些操作视为事件

4.编写JavaScript，在事件中用JavaScript来修改页面元素的样式

上述步骤中，1，2条很容易确定，第3条就需要我们要了解常见常使用的事件驱动，通过实践驱动才能表现成用户操作。接下来演示两个最简单的JavaScript的使用。

（一）鼠标移动显示框

鼠标移动显示框的意思是，最常见的就是在登录中常常有“记住密码或者两周内自动记住密码”等勾选框提示信息，我们常常想将这个提示信息在鼠标移动到勾选框时显示，在移出勾选框时提示信息消失。

1.基础页面布局代码

<html>
<body>
<style>
  //修改div1的属性信息
   #div1 {width:200px;height:100px; background:#CCC;border:1px solid #999;display:none;}
</style>
<input type="checkbox"/>
<div id="div1">
   为了您的信息安全，请不要再网吧等临时性场所使用该功能。
</div>
</body>
</html>

2.希望修改div提示语中的display显示在鼠标靠近勾选框时显示提示信息在鼠标移出时隐藏提示信息

3.用户操作就是移动鼠标到勾选框或者撤出勾选框

4.JavaScript代码

<html>
<body>
<style>
  //修改div1的属性信息
   #div1 {width:200px;height:100px; background:#CCC;border:1px solid #999;display:none;}
</style>
<script>
//利用函数写明我们触发事件发生后的结果 函数定义
function toShow()
{
  document.getElementById('div1').style.display='block';
}
function toNoShow()
{
   document.getElementById('div1').style.display='none';
}
<input type="checkbox" 
onmouseover="toShow()"
onmouseout = "toNoShow()"/> //函数调用
<div id="div1">
   为了您的信息安全，请不要再网吧等临时性场所使用该功能。
</div>
</body>
</html>

结果截图不太好展示有兴趣的同学可以使用代码进行测试

需要主要的点：1.事件驱动 onclick(点击) onmouseover(鼠标移入框内) onmouseout(鼠标移出)

2.改变某个元素的属性要指出具体元素 HTML中每个元素都可以有一个唯一标识的id

3.由于有些元素的ID并不能在某些浏览器中识别而爆出未定义错误所以需要用document.getElementById('div1') 去获取具体的元素

（二）网页换肤

在网页中经常可以通过点击换肤按钮改变网页当前的背景颜色，接下来如下代码来展示网页换肤‘

1.CSS1.css 设计一种页面布局（宽100 高50）背景颜色（绿色）按钮颜色（灰色）

body{background:green;}
input{width::100px;height:50px;background:#CCC}

2.CSS2.css设计一种页面布局（宽100 高50）背景颜色（红色）按钮颜色（绿色）

body{background:red;}
input{width::100px;height:50px;background:green}

3.结果展示

按钮皮肤1：

按钮皮肤2：

今天的分享就到这里了感觉很有意思明天继续更新新的内容

JavaScript简单使用实例

猜你喜欢