JavaScript学习笔记
函数的基本使用
当我们需要重复的做某些事情时，为了方便使用，常常会把一些程序代码包装起来，需要的时候直接调用即可，函数的作用就是如此，包装代码方便使用，下面通过一个例子展示下函数的作用：
// 示例：
function sum(a,b){
return a+b //输出结果为a，b两数的和，当每次要求两数之和时
} //只需要调用函数即可，是不是省了很多事呢
console.log(sum(3,4))
一、函数的分类
函数共分为一下几类：
- 内置函数，这是由开发人员已经编写好的，我们直接使用即可
如:Math(数学函数)，Date(日期函数)等等 - 自定义函数，为了方便自己的使用，我们常常会自定义函数，自定义函数分为有参和无参函数，定义使用也很简单，上面就是自定义函数示例
- 匿名函数，这类函数没有名字，需要通过变量，赋值调用等方法使用，匿名函数非常重要，需要好好掌握
二、函数的具体使用
1.内置函数
内置函数是开发人员已经写好的，我们需要直接调用即可，下面介绍一些常用的内置函数
- Math: 它是一个内置对象，它拥有一些数学常数属性和数学函数方法，常用的方法如下：
Math.PI----------圆周率（属性）
ceil(数值)-------向上取整，如Math.ceil(6.1)→7，Math.ceil(6.9)→7
floor(数值)------向下取整，如Math.floor(6.1)→6，Math.floor(6.9)→6
min(数值1,数值2)-----求两数最小值，如:Math.min(3,5)→3，Math.min(5,3)→3
max(数值1,数值2)-----求两数最大值，如:Math.max(3,5)→5，Math.max(5,3)→5
！如果没有给值，返回一个-无穷大数值！
pow(x,y)--------求x的y次方，如：Math.pow(2,3)→8,Math.pow(3,2)→9
sqrt(数值)-------开平方根，如：Math.sqrt(4)→2
round(数值)------四舍五入，如：Math.round(3.3)→3,Math.round(3.5)→4
abs(数值)--------返回数的绝对值，如：Math.abs(3)→3,Math.abs(-3)→3
//特别说明
random()--------返回一个0~1的随机数，不包含0和1
返回两个数(包含)之间的随机数：
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1))+min;
}
很好用哦，自己可以记下来
- Date：日期函数，也是一个非常常用的函数，与Math不同的是，Date对象的使用必须使用new创建才能使用，常用方法如下:
getYear()-------返回年份数 当前年份-1900//不常用
getFullYear()---返回年份数//常用
getMonth()------返回月份数（0--11）0表示1月
getDate()-------返回日期数（1--31）
getDay()--------返回星期数（0--6）0表示星期天
getHours()------返回时数（0--23）
getMinutes()----返回分数（0--59）
getSeconds()----返回秒数（0--59）
getMilliseconds()-----返回毫秒数（0--999）
getTime()-------------返回对应日期基线的毫秒
toGMTString()---------以GMT格式表示日期对象
toLocaleString()------返回日期的字符串表示，
其格式根据系统当前的区域设置来确定
使用示例:
var d = new Date();//获取当前日期时间
var year = d.getFullYear(); //获取年份，
注意:用getYear获取的是当前年份-1900
var month = d.getMonth() + 1; //获取当前月份，注意要+1
var day = d.getDate();//获取当前日期（1~31日）
var hour = d.getHours();//获取小时
var minute = d.getMinutes();//获取分钟
var second = d.getSeconds();//获取秒
console.log(d);
console.log(year);
console.log(month);
console.log(day);
console.log(hour);
console.log(minute);
console.log(second);
//温馨提醒：在使用日期函数时，常常需要格式化处理，
//如在一位数时间前面补0
function addZero(num) {
return num < 10 ? "0" + num : num
//定义函数，当时间为一位数时在前面补0
}
运行结果如图：
2.自定义函数
系统提供给我们使用的函数毕竟不能解决所有的问题，很多时候都需要我们自己定义函数完成某些特定的功能，语法如下:
function name(参数1, 参数2, 参数3···) {
//要执行的代码
return 返回值
}
//示例：求两数之和
function sum(a,b){
return a+b
}
console.log(sum(3,4))
下面使用自定义函数写一个简单的计算器，源码如下，做的比较简单，方法不唯一
<body>
<p>请输入两个数字：</p>
输入num1<input type="text" name="num1" id="num1" value="">
输入num2<input type="text" name="num2" id="num2" value="">
<input type="button" name="add" id="add" value="+" onclick="add()">
<input type="button" name="reduce" id="reduce" value="-" onclick="reduce()">
<input type="button" name="multiply" id="multiply" value="*" onclick="multiply()">
<input type="button" name="except" id="except" value="/" onclick="except()">
<br>
输出result:<input type="text" name="res" id="res" value="">
<script>
function add() {
var x = Number(document.getElementById("num1").value);
var y = Number(document.getElementById("num2").value);
document.getElementById("res").value = x + y
}
function reduce() {
var x = Number(document.getElementById("num1").value);
var y = Number(document.getElementById("num2").value);
document.getElementById("res").value = x - y
}
function multiply() {
var x = Number(document.getElementById("num1").value);
var y = Number(document.getElementById("num2").value);
document.getElementById("res").value = x * y
}
function except() {
var x = Number(document.getElementById("num1").value);
var y = Number(document.getElementById("num2").value);
document.getElementById("res").value = x / y
}
</script>
</body>
//Number(document.getElementById("num1").value)
//通过input中Id属性获取用户输入的值
通过自定义函数，可以实现很多东西，这就需要我们自己摸索了
3.匿名函数
听名字就知道匿名函数没有名字，不过他的用途可是很大的，使用也比较灵活，实际开发中经常会用到，语法如下：
function (参数1, 参数2, 参数3) {
//要执行的代码
return 返回值
}
使用方法：
1. 通过函数返回值调用
function getAdd() {
return function(a, b) {
return a + b; //将匿名函数的结果当做返回值返回给外层函数
} //通过调用外层函数使用匿名函数
}
var add = getAdd();
var result = add(1, 2);
console.log(result);
2. 通过赋值变量使用
var add = function (a, b) {
return a + b //通过给变量赋值来调用匿名函数
}
var result = add(1, 2);
console.log(result);
三、事件调用
简而言之，事件就是你执行某个操作产生某种结果，如按下灯开关就可以开关灯，按下开关这个动作就是触发了一个事件，调用函数也是一个事件
//设置点击事件，当点击按钮hello时自动调用函数弹出对话框hello
<button onclick="showHello()">hello</button>
<script>
function showHello() {
alert("hello")
}
</script>
下面做一个案例，通过事件调用，简易实现购物计算
结果展示：
参考源码如下
style样式：td {
text-align: center;
}
<body>
<table border="1" style="border-collapse: collapse;" align="center">
<th colspan="5">//合并单元格
简易购物车
</th>
<tr>
<td>商品名称</td>
<td>数量(件)</td>
<td>单价(元)</td>
<td>运费(元)</td>
<td><button onclick="total()">合计</button></td>
</tr>
<tr>
<td>道具</td>
<td><input type="text" name="sl" id="sl" value=""></td>
<td><input type="text" name="dj" id="dj" value=""></td>
<td><input type="text" name="yf" id="yf" value=""></td>
<td><input type="text" name="hj" id="hj" value=""></td>
</tr>
<script>
function total() {
var sl = Number(document.getElementById("sl").value)//通过id属性
var dj = Number(document.getElementById("dj").value)// 获取用户输入的数值
var yf = Number(document.getElementById("yf").value)
document.getElementById("hj").value = sl * dj + yf//计算结果
}
</script>
</table>
</body>
以上就是函数的具体使用，现在来介绍两个特殊的内置函数➡定时器函数
四、定时器函数
- setTimeout()：用于在指定的毫秒数后调用函数或计算表达式
语法格式：setTimeout("调用的函数名称或表达式",等待的毫秒数)1s==1000ms
使用示例：四种不同的调用方法
//第一种使用方法：调用函数，不加引号，函数不带括号
setTimeout(hello, 3000)
function hello() { //在3秒后弹出对话框hello
alert('Hello') //仅填写函数名,不能加(),否则会立即执行
}
//第二种使用方法：调用匿名函数，不加引号
setTimeout(
function () {
alert('hello')
}, 3000)
//第三种使用方法：调用表达式，需要加引号
setTimeout("alert('hello')", 3000)
//第四种使用方法：调用函数，需要加引号，函数带括号
setTimeout("hello()", 3000)
function hello() {
alert('Hello')
}
小练习：使用 setTimeout()函数实现每秒钟+1的效果
// 参考代码
<script>
var i = 0;
function timeAdd() {
document.write(i++ + ' ');
setTimeout(timeAdd, 1000)
}
timeAdd();
</script>
结果如图
- setInterval():按照指定的周期（毫秒）来重复调用函数或计算表达式
语法格式：setInterval("调用的函数名称或表达式",等待的毫秒数)1s==1000ms
使用示例：
使用 setInterval()函数实现每秒钟+1的效果
// 参考代码
<script>
var i = 1;
setInterval(
function timeAdd() {
document.write(i++ + ' ')
}, 1000);
</script>
结果如图
可以发现，两种计数器函数都能实现同样的效果，不过它们还是有些不同，setTimeout()多用于延时处理，而setInterval()多用于周期性循环
注意：如果设置了定时器函数，一定要注意清除定时，要不然程序没有关闭的话就会一直消耗系统资源，除了关闭程序，还有下面2种方法清除定时器
- clearTimeout()：清除 setTimeout()定时器
- clearInterval()：清除 setrInterval()定时器
提醒：
-------setTimeout()产生的定时器会在执行后自动清除，setInterval()产生的定时器不会自动清除
下面用定时器函数写一个倒计时，显示距离明年元旦还剩多少时间，格式为：
距离明年元旦还剩xx天xx时xx分xx秒
//参考代码如下，实现方式不唯一
<h1 id=num style="text-align: center;line-height: 500px;color: aqua;"></h1>
<script type="text/javascript">
function addZero(num) {
return num < 10 ? "0" + num : num//定义函数，当时间为一位数时在前面补0
}
function countDown() {
var nowDate = new Date()
var inputDate = new Date('2022-1-1 00:00:00')//获取用户输入的日期毫秒数
var times = (inputDate - nowDate) / 1000//获取秒数
var day = parseInt(times / 60 / 60 / 24)//获取天数
var hour = parseInt(times / 60 / 60 % 24)//获取小时
var minute = parseInt(times / 60 % 60)//获取分钟
var second = parseInt(times % 60)//获取秒
var str = "距离明年元旦还剩" + addZero(day) + "天" + addZero(hour) + "时" + addZero(minute) + "分" + addZero(second) + "秒"
document.getElementById("num").innerHTML = str//通过innerHTML将结果写入到h1标题中
}
countDown();
setInterval(countDown, 1000)
</script>
结果如图：
2212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
