JavaScript-{js}基础(二)。
根据上节课,再说一个简单的小趣味。:
点击之后就变成这样:
再点击就收起来了。
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>
<!--
<link rel="stylesheet" type="text/css" href="css1.css"/>
-->
<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