1.函数的定义
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script>function f1(){//function：函数关键字 f1：函数名alert("测试")//函数体}</script></body></html>
2.函数的调用
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><!--onclick 当被点击的时候--><button onclick="fb()">按钮</button><script>var fb=()=>{//是一个函数document.write("调用了")}</script></body></html>
注：
** **函数定义要写在script里面；
** function是定义函数的关键字**
** f1是函数名，命名规则一般采用驼峰命名法**
** onclick是鼠标点击事件(鼠标点击时触发按钮)**
** 花括号里面是要执行的函数体**
二、自定义函数
1.函数的返回值问题
- js中的函数不需要指定返回类型
- js中的函数可以返回任意类型
- js中的函数一定会有返回类型,如果没有return,则为undefined
代码示例：
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script>function fa(a){//不需要指定返回类型console.log("Hello")if(a){return "yes"//可以返回字符串类型}return false//也可以返回布尔类型}</script></body></html>
2.return的作用
- 用于给函数设置返回值
- 用于中断函数运行
3.函数的参数问题
- 参数不需要指定类型
- 调用函数的时候不会对参数的个数进行判断
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script>//1 无参函数function 函数名(){//javascript代码;}//2.有参函数function 函数名(参数1,参数2,...){//javascript代码;}//3.带返回值函数（无参）function 函数名(){return 返回值或变量;}//4.带返回值函数（有参）function 函数名(参数1,参数2,...){return 返回值或变量;}</script></body></html>
三、函数类型
1.匿名函数
//匿名函数(function (){//匿名函数调用的方式})();
2.普通函数
//普通函数function f1(){//function：函数关键字 f1：函数名alert("测试")//函数体}
3.高阶函数
//高阶函数//可以将函数作为参数function fb(a,b){return a(b)}fb(fa,"1")
4.箭头函数
//箭头函数 普通函数的简写var fb=()=>{//是一个函数document.write("调用了")}
四、window对象
1.screen ：有关客户端的屏幕和显示性能的信息
- screen.width 返回显示屏幕的宽度
- screen.height 返回显示屏幕的宽度
2.history ：关客户访问过的URL的信息
- history.go(-1) 页面后退一步(相当于点击页面左上角的后退箭头)
- history.go(1) 页面后退一步(相当于点击页面左上角的前进箭头)
- history.back() 跳转到历史列表中的前一个URL(如果存在)
- history.forward() 跳转到历史列表中的下一个URL
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><a href="https://www.baidu.com">点我</a><button onclick="back()">返回</button>//返回的按钮<button onclick="forward()">前进</button>//前进的按钮<input type="button" value="返回" onclick="history.go(-1)"/><input type="button" value="前进" onclick="history.go(1)"/><script>//window对象 是整个js当中最大的对象//history 历史记录function back(){history.back();//跳转到历史列表中的前一个URL(如果存在)}function forward(){history.forward();//跳转到历史列表中的下一个URL}</script></body></html>
3.location ：有关当前URL的信息
- location.href='目的路径' 设置想要跳转的页面（自己跳过去）
- location.reload() 刷新本界面
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><button onclick="f1()">点我</button>//跳转界面的按钮<button onclick="f2()">刷新</button>//刷新界面的按钮<script>function f1(){//跳转页面 去百度location.href="https://www.baidu.com"}function f2(){//刷新页面location.reload();}</script></body></html>
五、window常用函数
1.弹框
- alert（"你好！！"）提示框
- confirm : （“确定删除吗？”）询问框
- prompt : （“请输入”）输入框
2.设置定时器
- 设置定时器 : setTimeout
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script>//设置定时器setTimeout(function(){alert("炸弹炸了")},3000)//时间</script></body></html>
效果图如下：
- 设置循环定时器：setInterval
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script>//设置循环定时器setInterval(function(){console.log("炸弹炸了")},1000)//时间</script></body></html>
效果图如下：
3.清除定时器 clearTimeout （清空普通定时器） clearInterval（清空循环定时器）
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script>//清除定时器var a=0;//i是定时器的编号var i=setInterval(function(){a++;console.log("炸弹炸了")if(a==10){//执行10次 第十次停止clearInterval(i)}},1000)//时间</script></body></html>
六、内置函数
修改元素的方法（1.innerHTML 2.textContent）
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><h3 id="h3">Hello World</h3><h3 id="h4">你好</h3><script>setInterval(()=>{//修改元素的方法//textContent 文本内容h3.textContent="你好世界"//innerHTML html内容h4.innerHTML="<kbd>"+new Date().toLocaleTimeString()+"</kbd>"},1000)</script></body></html>
效果图如下：（前=>后）
Date 时间函数
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script>var today=new Date(); //获取当前时间var year=today.getFullYear(); //得到年var month=today.getMonth(); //得到月var day=today.getDay(); //得到星期几var date=today.getDate(); //得到日var hh=today.getHours(); //得到时var mm=today.getMinutes(); //得到分var ss=today.getSeconds(); //得到秒</script></body></html>
Math 数学函数
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><script>console.log(Math.max(1,2,3,4,5));//取最大值console.log(Math.ceil(1.99));//向上取整console.log(Math.floor(1.99));//向下取整console.log(Math.round(1.99));//四舍五入//随机出来的一定是小数[0,1)console.log(Math.random());//随机//1-10console.log(Math.floor(Math.random()*10)+1)</script></body></html>
总结
** 以上就是今天要讲的内容，本文仅仅简单介绍了JavaScript的函数，之后会有更多关于JavaScript的文章，敬请期待。**
标签：
javascript
本文转载自: https://blog.csdn.net/weixin_62270300/article/details/123168531
版权归原作者 時宜 所有， 如有侵权，请联系我们删除。
版权归原作者 時宜 所有， 如有侵权，请联系我们删除。