“南大软院大神养成计划“_第十八天的学习“

一.函数
函数的作用,可以写一次代码,然后反复地重用这个代码。
定义无参数函数
function  函数名( )
{
     函数体;
}

function定义函数的关键字,“函数名”你为函数取的名字,“函数体”替换为完成特定功能的代码。
定义有参数的函数

function 函数名(参数1,参数2)
{
     函数代码
}

注意:参数可以多个,根据需要增减参数个数。参数之间用(逗号,)隔开。

注意:function和函数名之间必须有一个空格

二.函数调用

函数定义好后,是不能自动执行的,需要调用它,直接在需要的位置写函数名。(与C语言的函数调用相似。)
第一种情况:在<script>标签内调用。

  <script type="text/javascript">
    function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }
  add2();//调用函数,直接写函数名。
</SCRIPT>

第二种情况:在HTML文件中调用,如通过点击按钮后调用定义好的函数。

<html>
<head>
<script type="text/javascript">
   function add2()
   {
         sum = 5 + 6;
         alert(sum);
   }
</script>
</head>
<body>
<form>
<input type="button" value="click it" οnclick="add2()">  //按钮,onclick点击事件,直接写函数名
</form>
</body>
</html>

调用有参数的函数,必须在函数名后的()填写你想传送的实参,而且实参数和形参数是一一对应的。(与C语言类似,不过C语言定义函数的时候,函数名前面为返回值的类型,并且每个形参前要写明其类型。)
两种方式的函数名后的()都不能少。

三.返回值的函数

function add2(x,y)
{
   sum = x + y;
   return sum; //返回函数值,return后面的值叫做返回值。
}

还可以通过变量存储调用函数的返回值,代码如下:

result = add2(3,4);//语句执行后,result变量中的值为7。
注意:函数中参数和返回值不只是数字,还可以是字符串等其它类型。


新学的下拉框的实现。
先用标签<div></div>
在<div>标签之间使用有序标签<ol></ol>,
先举一个下拉框的例子,在<ol>标签内添加一个<li>为下拉框一开显示的文字</li>
再添加无效标签<ul>,在<ul>标签内添加<li>下拉框显示的内容</li>
你想显示下拉框内有多少条减一的信息就添加几个<li>

之后就是CSS样式表的设置。
(要先将页面初始化下就是添加*{padding:0;margin:0;})
首先主要的设置就是ul li{float:none}(为了将下拉内容显示出来)
之后设置ul{display:none;}(为了将<ul>标签内的内容先隐藏了)
 ol:hover ul{display:block}(实现当鼠标滑过下拉框一开始显示的文字时,显示出下拉框完整的内容)
最后就是一些修饰ol{float:left}为了使多个下拉框左浮动并排显示
  li{
   height:50px;(下拉框的宽度)
   list-style:none;(去除序号)
   text-align;(使文字居中)
   line-height:10px;(行高)
   border: 2px red solid;(设置边框)
   margin-left:3px;(设置做外边距)
}   

例子:<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link href="" rel="stylesheet">
<style type="text/css">
*{padding: 0px; margin:0px;}
li{
 list-style:none;
 width: 50px;
 border-radius: 30px;
 border: 2px red solid;
 margin-left: 3px;
 text-align: center;
}
ol{
 float: left;
}
ul{display:none;}
ol:hover ul{
 display: block;
}
}
ul li{
 float: none;
}
</style>
</head>
<body>
<div>
 <ol>
  <li>1</li>
  <ul>
   <li>111</li>
   <li>111</li>
   <li>111</li>
  </ul>
 </ol>
 <ol>
  <li>2</li>
  <ul>
   <li>222</li>
   <li>222</li>
   <li>222</li>
  </ul>
 </ol>
 <ol>
  <li>3</li>


  <ul>
   <li>333</li>
   <li>333</li>
   <li>333</li>
  </ul>
 </ol>
</div>
</body>

</html>

将显示:



今天学习的内容比较少,不过都能够很好的理解,因为JavaScript有些地方与C语言还是很相似的,学起来比较的轻松



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值