JavaScript函数-CSDN博客

<!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-10
		console.log(Math.floor(Math.random()*10)+1)

</script>
	</body>
</html>