今天是我们的JavaScript的进阶，带大家更深入的学习我们的JavaScript，对于基础有不了解的可以去看我前天发表的哪一篇噢，na里给大家讲的是一些入门语法，不定期更新，有不懂的可以在评论下方留言。
前言
今天带大家学习函数，其实函数就相等于我们java中的方法，但是当然我们JavaScript里的函数还是和我们java中的方法有不同的，现在带大家进入我们的新一课。
一、函数的特点（function）
1.函数一定不能写返回类型
2.函数一定有返回 返回未定义 undefined
3.可以写自己的返回，和我们的java一样使用return
4.return可以中断代码的执行
5.可以带参，不需要指定参数类型，参数可以任意，不传参默认为 未定义undefined
function aa(a){
console.log('holle');
if(a){//为真:做判断时if里面传的值为真
return 'yes';
}
return 'no';
}
//调用函数
console.log(aa());二、函数类型
1.匿名函数：没有名字
(function(){
console.log('哈哈哈哈');
})();//该();是在调用我们的匿名函数
2.普通函数
function aa(a){
console.log('holle');
if(a){//为真:做判断时if里面传的值为真
return 'yes';
}
return 'no';
}
//调用函数
console.log(aa());3.高阶函数：可以将我们的函数作为参数传进
function aa(a){
console.log('holle');
if(a){//为真:做判断时if里面传的值为真
return 'yes';
}
return 'no';
}
//高阶函数:可以将函数作为参数传进去
function f1(a,b){
return a(b);
}
//调用函数
//aa:是上面的函数调用函数时将我们aa函数传进来
console.log(f1(aa,"1"));
4.箭头函数：普通函数的简写
//箭头函数:普通函数的简写
var f2=()=>{
document.write("哈哈哈");
}
//调用函数
f2();
三.window对象
1.window对象的特点：
.window对象 window.xx() 默认不写
.是整个js中最大的对象
2.history关与客户访问过的URL信息
.history.back() 返回
//历史记录history
function a(){
history.back();
//返回:当你跳转到另外一个界面，可以在返回到原本的界面
}
.history.forward() 前进
//前进
function b(){
history.forward();//前进:
}
3.location：有关当前URL的信息
.location.href:跳转界面
把该函数可以调用在我们的一个按钮里，当点击该按钮时跳转
function f3(){
//location.href:跳转界面
//跳转到百度
location.href="https://www.baidu.com";
}
4.定时器使用
.setTimeout:普通定时器只执行一次
.clearTimeout:清除定时器
setTimeout(function (){
console.log("哈哈哈");
},1000);
//后面的1000是1000毫秒，隔1000毫秒输出一句哈哈哈.setInterval:循环定时器
.clearInterval:清除循环定时器
//j是定时器的编号，方便我们清除定时器
var a=0;
var j=setInterval(function(){
a++;
console.log("哈哈哈哈");
//每执行一次a加一次，当a=0时我们关闭我们的循环定时器
if(a==10){
clearTimeout(j);
}
},1000)
5. 数学函数
//最大值
console.log(Math.max(1,2,3,4));
//最小值
console.log(Math.min(1,2,3,4));
//向上取整
console.log(Math.ceil(1.99))
//向下取整
console.log(Math.floor(1.99))
//四舍五入
console.log(Math.round(1.33))
//只会取0-1的数
console.log(Math.random())三.扩展
1.完成计算机功能，大家可以先自己写一下，下面代码有详细的备注
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>第一个值:<input type="text" id='a1'></p>
<p>第二个值:<input type="text" id='a2'></p>
<p>结果:<input type="text" id='a3' disabled></p>
<!-- onclick点击 点击时调用我们的函数方法 -->
<button onclick="f1()">+</button>
<button onclick="f2()">-</button>
<script>
//完成计算机功能
//加法的功能
function f1(){
var a=a1.value;//拿到第一个输入框里的值
var b=a2.value;//拿到第二个输入框里的值
var c=parseInt(a)+parseInt(b);//parseInt把文字转成数字相加
if(isNaN(c)){
a3.value="请输入数字";
return;//中断
}
a3.value=c;
}
//减法的功能
function f2(){
var a=a1.value;//拿到第一个框的值
var b=a2.value;//拿到第二框的值
var c=parseInt(a)-parseInt(b);
if(isNaN(c)){
c.value='请输入数字';
}
a3.value=c;
}
</script>
</body>
</html>
2.制作一个抽奖器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
span{
display: inline-block;
/* 设置宽 */
width: 100px;
/* 设置高 */
height: 150px;
/* 设置背景颜色 */
background: black;
/* 设置字体颜色 */
color: yellow;
/* 设置字体大小 */
font-size: 100px;
/* 居中 */
text-align: center;
line-height: 150px;
}
</style>
</head>
<body>
<p>
<span id="a1">$</span>
<span id="a2">$</span>
<span id="a3">$</span>
</p>
<!-- 抽奖按钮 -->
<p>
<button id="d1" onclick="start()">点我抽奖</button>
<button onclick="stop()">取消抽奖</button>
</p>
<!-- 里面写函数-->
<script>
//开始抽奖
//1.我们使用循环定时器
//2.随机1-10的数字
var key;
function start(){
//a为我们循环定时器的编号,方便我们在暂停的时候清除我们的循环定时器
key=setInterval(()=>{
//floor向上取整 random:随机数是0-1所以乘以10
//随机1-10的数赋值
var a=Math.floor(Math.random()*10);
var b=Math.floor(Math.random()*10);
var c=Math.floor(Math.random()*10);
//输入框的值是value 其他的标签都是textContent,innerHTML
//把上面的变量赋值给span
a1.textContent=a;
a2.textContent=b;
a3.textContent=c;
d1.disabled=true
},10)
}
//抽奖暂停
function stop(){
//拿到我们span的值
var a=a1.textContent;
var b=a2.textContent;
var c=a3.textContent;
//判断三个数是否相等
if(a==b&&b==c){
alert("你中奖了");
}
//清除我们的定时器
clearInterval(key)
d1.disabled=false//抽奖按钮禁言取消
}
</script>
</body>
</html>
1984
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
