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

来源：互联网发布：行业网站群发软件编辑：程序博客网时间：2024/05/17 23:02

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

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

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

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

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

二.函数调用

函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。（与C语言的函数调用相似。）
第一种情况:在<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" onclick="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>

</html>

将显示：

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

0 0