21函数 使用函数制作表格和简易计算器

一、认识函数

函数的好处

- 重复使用
- 忽略细节
- 选择执行

函数的特点

- 函数可以一次多定义，多次使用
- 方便代码管理
- 便于控制程序的执行时间
- 可以将常用的功能代码，进行封装

二、定义函数

语法

定义函数
function functionName(参数1，参数2,...)
{
    函数代码
}
使用函数
functionName(参数1，参数2,...)

function 关键字是必须的，全小写
functionName 函数的名称，函数名的命名规则与变量名一样       
形参 是定义函数时接收数据的参数，参数可有可无，多个参数之间用逗号隔开
实参：实际参数，调用函数时的参数称为"实参"，是真正的数据

另一种语法

定义函数
functionName = function(参数1，参数2,...){
    函数代码
}
使用函数
functionName(参数1，参数2,...)

三、函数的调用

函数定义是不会执行的，那么，函数必须调用，才会有效果。

函数的调用：直接写函数名后跟小括号()，如果有参数则写参数。小括号不能省略。

四、使用函数写表格

可以通过输入行数和列数实现表格

function tb(a,b){
            var str = "<table>"
            for(i=1;i<=a;i++){
                str += "<tr>"
                for(j=1;j<=b;j++){
                    str +="<td></td>"
                }
                str += "</tr>"
            }
            str += "</table>"
            document.write(str)
        }
        var x = prompt("请输入表格的行数")
        var y = prompt("请输入表格的列数")
        tb(x,y)

对输出的表格设置一些样式

table{
	border-collapse: collapse;
	width: 1000px;
	height: 300px;
	}
td{
	border: 0.5px solid #000;
  }

五、常用事件

onclick	鼠标点击
onload	页面或图片加载
onmouseover	鼠标移入
onmouseout	鼠标离开

当触发事件时，执行函数

六、制作简易计算器

先将计算器的结构制作出来

<!--第一个输入数据的单行文本框-->

<input type="text" id="num1">

<!--选择运算符 + - * /-->

<select name="" id="sl">
	<option value="+">+</option>
	<option value="-">-</option>
	<option value="*">*</option>
	<option value="/">/</option>
</select>

<!--第二个输入数据的单行文本框-->

<input type="text" id="num2">

<!--点击 = 计算答案-->

<button id="bt">=</button>

<!--计算结果显示的地方-->

<input type="text" id="num3">

在使用点击事件，在点击“=”的时候会进行计算

//获取元素

var num1 = document.getElementById("num1")
var num2 = document.getElementById("num2")
var num3 = document.getElementById("num3")
var sl = document.getElementById("sl")
var bt = document.getElementById("bt")

//点击后的运算

bt.onclick = function () {

//判断所选择的运符的值并根据选择的值算出答案并将结果显示在第三个单行文本框中

	switch (sl.value) {
		case "+":
			num3.value = Number(num1.value) + Number(num2.value)
			break
		case "-":
			num3.value = num1.value - num2.value
			break
		case "*":
			num3.value = num1.value * num2.value
			break
		case "/":
			num3.value = num1.value / num2.value
			break
	}
}

最后

以上就是无奈大碗为你收集整理的21函数 使用函数制作表格和简易计算器21函数 使用函数制作表格和简易计算器的全部内容，希望文章能够帮你解决21函数 使用函数制作表格和简易计算器21函数 使用函数制作表格和简易计算器所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。