JavaScript-{js}基础（二）。

您的位置：首页 > Html> JavaScript-{js}基础（二）。

11月252014

作者：站长的大哥发布：2014-11-25 14:21 Tuesday 分类：Html 阅读：1396次评论：0条

根据上节课，再说一个简单的小趣味。：

点击之后就变成这样：

再点击就收起来了。

if 判断：

点击按钮显示/隐藏Div (弹出菜单)

-特效实现过程及其原理分析
-if的基本形式

if语句如下：

if(条件)
{
条件成立显示这个。
}
else
{
条件不成立则显示这个。
}

这样说可能还不太懂，再举一个显示的例子：

就说现实的天气预报吧,这个预报有时候准有时候不准，不是说预报有雨你就一定

要带伞，等下没雨，你带伞遮太阳吗？
比如今天预报有雨你就要带伞，如果没有雨就不用带伞。

if(天气预报有雨)
{
带伞
}
else
{
不用带伞
}

根据上次js 基础一的教材.扩展成这样例子：
function showhai(div1){
var oDiv=document.getElementById('div1');
if(oDiv.style.display=='block')
{
oDiv.style.display='none';
}
else{
oDiv.style.display='block';
}
}

上次忘记说的一点就是： var 这个。

上次我们是用document.getElementById('div1').style.display='none'

var 就是代替的意思，比如说

你的名字然后别人给你起个绰号比如你叫王帅哥，绰号叫王八因为王八容易

记，别人都叫你王八了。

例子 var 王八=王帅哥

王八的同学叫小二。
王八的妈妈叫王妈

这样一说别人就知道王八其实就是王帅哥。

代码例子：

var oDiv=document.getElementById('div1');

oDiv.style.display='none';

完全例子代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>alzhai.com/js初学教材</title>

<style type="text/css">
#div1{
width:100px;
height:50px;
background-color:pink;
border:1px solid #999;
display:none;
}
</style>
<script type="text/javascript">
function showhai(div1){
var oDiv=document.getElementById('div1');
if(oDiv.style.display=='block')
{
oDiv.style.display='none';
}
else{
oDiv.style.display='block';
}
}

</script>
<head/>
</body>
<form>
<input type="button" name="div1" onclick="xianshi(div1)"
value="查看更多" />

<div id="div1">
你看到了吗，嘎嘎。
</div>
</form>

</body>
</html>

本文固定链接: http://alzhai.com/post-595.html

该日志由站长的大哥于2014-11-25 14:21 Tuesday
发表在 Html> 分类下。
本文标签：

上一篇：：PHPnow 添加虚拟主机并且访问指定文件夹
下一篇：JavaScript-{js}基础（一）。

JavaScript-{js}基础（二）。

热门文章

相关文章

发表评论 [注意:请勿进行垃圾评论]

最新文章热门文章随机文章

最新评论

分类