一:函数的概念
二:函数的分类
-
系统函数:eval,parseInt,parseFloat,isNaN
-
eval函数 专门执行js代码(js代码是字符串形式)
//运行字符串形式的js脚本 通过eval
eval('alert(你好 时间)');
-
parseInt 将字符串转换为int类型
-
parseFloat 将字符串转换为Float类型
var a = '123';
console.log(typeof(a));//string
var b = parseInt(a);
console.log(typeof(b));//int
-
isNaN 判断是否是非数字(只注重内容)
-
如果给定的值能被转换为数字,则返回false;如果不能转换为数字,则返回true;
var str = 'a123';
console.log(isNaN(str)); //true
-
自定义函数:与java类似,通过"function"定义
1.无返回无参数的函数
function 函数名称(){}
2.无返回有参数的函数 参数定义 不需要var定义
function 函数名称(参数1,参数2){}
3. 有返回无参数的函数
function 函数名称(){return 返回结果}
4. 有返回有参数的函数
function 函数名称(参数1,参数2){return 返回结果}
-
直接方法名调用即可 例如 add();
-
可以借助js的事件来触发调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自定义函数</title>
<!-- js代码区域-->
<script type="text/javascript">
//定义一个函数,计算2个数字的和进行打印输出
function add1(){
var a = 1;
var b = 1;
console.log(a+b);
}
//调用方法
// add();
function add2(a,b){
console.log(a+b);
}
add2(1,2);
function add3(){
return '123';
}
console.log(add3());
</script>
</head>
<!-- onload="add()" js加载函数,在网页执行全部加载完毕后才会出发onload事件去运行其中的代码 -->
<body >
</body>
</html>
二:BOM编程
-
BOM的概念:浏览器对象模型 属于js的三大部分组成之一
-
BOM作用:可以获取浏览器上的一些相关信息(屏幕,导航,历史记录等等操作)
-
BOM下的常用对象:window,history,location
-
window对象是BOM中的顶层对象.
-
history和location属于window对象的子对象
-
window对象中的常用方法:alert,confirm,prompt
-
自定义的所有方法和属性最终都会成为window对象的一部分。
setTimeout(一次性) setInterval(永久性)
clearTimeout(一次性) clearInterval(永久性)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BOM编程</title>
<script type="text/javascript">
// 自定义一个方法
function akjshfdsalfjsalkjfdsadsadlkfsa(){
alert(123);
}
//window.akjshfdsalfjsalkjfdsadsadlkfsa();
//open方法 来源于window对象
//作用:打开一个新窗口
function myF(){
window.open("http://www.baidu.com","helloworld","width=300,height=300");
}
//当网页加载完毕后,直接自动弹窗广告窗体
//onload 加载事件
window.onload = myF();
//需求:利用setTimeout实现3秒后输出好好学习即可。
var timer = null;
function myB(){
// Timer
timer = window.setTimeout(function(){
console.log("好好学习");
},3000);
}
function myC(){
window.clearTimeout(timer);
}
var timer2 = null;
function myG(){
timer2 = window.setInterval(function(){
console.log(1);
},1000);
}
function myH(){
window.clearInterval(timer2);
}
</script>
</head>
<body onload = "myF();">
<!-- 需求:点击某按钮,打开新窗口 -->
<button onclick = "myF()">点击弹出</button>
<button onclick = "myB()">点击setTimeout</button>
<button onclick = "myC()">点击取消setTimeout</button>
<button onclick = "myG()">点击setInterval</button>
<button onclick = "myH()">点击取消clearInterval</button>
</body>
</html>
作用:可以实现跳转前进和后退
方法属性:
1. forward()/go(1) 跳转到下一页
2.back()/go(-1)回退
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>history对象的使用</title>
<script type="text/javascript">
function nextDemo(){
// window.history.forward();//跳转到下一页
window.history.go(1);
}
//回退
function backDemo(){
// history.back();//回退
window.history.go(-1);
}
</script>
</head>
<body>
<a href="2.html">下一章节</a>
<a href="1.html">返回上一章节</a>
<button onclick = "nextDemo();">前进</button>
<button onclick = "backDemo();">回退</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>1.html</title>
</head>
<body>
<h1>我的网站</h1>
<a href="historyDemo.html">跳转至主页</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.html</title>
</head>
<body>
<h1>这是2.html首页</h1>
<a href="historyDemo.html">返回</a>
</body>
</html>
常用属性和方法:
-
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
-
window.location 对象在编写时可不使用 window 这个前缀。
-
href 当前窗口正在浏览的网页地址
-
replace(url) 转向到url网页地址
-
reload() 重新载入当前网址,如同按下刷新按钮
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function add(){
window.location.href = "http://www.4399.com";
}
function update(){
var aa = document.getElementById("aa");
aa.href = "http://www.baidu.com";
}
</script>
</head>
<body>
<a id = "aa" href="http://www.4399.com">小游戏</a>
<button onclick = "add()">点击跳转到4399小游戏</button>
<button onclick = "update();">修改超链接的地址</button>
</body>
</html>
三:Date类的使用
//当前系统时间
var date = new Date();
//获取当前日期对象的年份(四位数字年份)
console.log(date.getFullYear());
//获取当前日期对象的月份(0 ~ 11)
console.log(date.getMonth());
//获取当前日期对象的日数(1 ~ 31)
console.log(date.getDate());
//获取当前日期对象的小时(0 ~ 23)
console.log(date.getHours());
//获取当前日期对象的分钟(0 ~ 59)
console.log(date.getMinutes());
//获取当前日期对象的秒钟(0 ~ 59)
console.log(date.getSeconds());
//获取当前日期对象的毫秒(0 ~ 999)
console.log(date.getMilliseconds());
四:Math类的使用
/*正数*/
//可以用来计算一个数的绝对值
console.log(Math.abs(1));
//可以对一个数进行向上取整,小数位只有有值就自动进1
console.log(Math.ceil(1.1));
//可以对一个数进行向下取整,小数部分会被舍掉
console.log(Math.floor(1.99));
//可以对一个数进行四舍五入取整
console.log(Math.round(1.4));
/*负数*/
//可以用来计算一个数的绝对值
console.log(Math.abs(-1));
//可以对一个数进行向上取整,小数部分会被舍掉
console.log(Math.ceil(-1.1));
//可以对一个数进行向下取整,小数位只有有值就自动进1
console.log(Math.floor(-1.99));
//可以对一个数进行四舍五入取整
console.log(Math.round(-1.4));
/*随机数*/
//Math.random():可以用来生成一个0-1之间的随机数
//生成一个0-x之间的随机数:Math.round(Math.random()*x)
//生成一个x-y之间的随机数:Math.round(Math.random()*(y-x)+x)
//生成一个0-10之间的随机数
console.log(Math.round(Math.random() * 10));
//生成一个1-10之间的随机数
console.log(Math.round(Math.random() * (10 - 1) + 1));
/*数学运算*/
//Math.pow(x,y):返回x的y次幂
console.log(Math.pow(12, 3));
//Math.sqrt(x) :返回x的平方根
console.log(Math.sqrt(4));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>时钟效果</title>
<script type="text/javascript">
function myd(){
window.setInterval(function(){
var oDiv = document.getElementById("oDiv");
//获取当前的系统时间
var date = new Date();
var year = date.getYear()+1900;
var month = date.getMonth()+1;
var day = date.getDate();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
//.innerHTML 获取非表单元素的内容
// oDiv.innerHTML=date.toLocaleString();
oDiv.innerHTML = year+"年"+month+"月"+day+"日 "+h+":"+m+":"+s;
},1000);
}
//通过加载函数调用
window.onload = myd();
</script>
</head>
<body>
<div id="oDiv"></div>
</body>
</html>