01-内置对象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>内置对象title>
<script>
script>
head>
<body>
body>
html>
02-学会查阅MDN文档
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>学会查阅MDN文档title>
<script>
script>
head>
<body>
body>
html>
03-数学对象Math最大值方法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数学对象Math最大值方法title>
<script>
console.log(Math.PI);
console.log(Math.max(1, 2, 34, 55, 99));
console.log(Math.max(-1, -3, -5));
console.log(Math.max(1, 99, 'pink老师'));
console.log(Math.max());
script>
head>
<body>
body>
html>
04-封装自己的数学对象
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>封装自己的数学对象title>
<script>
var myMath = {
PI: 3.141592653,
max: function() {
var max = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] > max) {
max = arguments[i];
}
}
return max;
},
min: function() {
var min = arguments[0];
for (var i = 1; i < arguments.length; i++) {
if (arguments[i] < min) {
min = arguments[i];
}
}
return min;
}
}
console.log(myMath.PI);
console.log(myMath.max(1, 5, 9));
console.log(myMath.max(1, 5, 9));
script>
head>
<body>
body>
html>
05-Math绝对值和三个取整方法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math绝对值和三个取整方法title>
<script>
console.log(Math.abs(-1));
console.log(Math.abs(1));
console.log(Math.abs('-1'));
console.log(Math.abs('pink老师'));
console.log(Math.floor(1.1));
console.log(Math.floor(1.9));
console.log(Math.ceil(1.1));
console.log(Math.ceil(1.9));
console.log(Math.round(1.1));
console.log(Math.round(1.5));
console.log(Math.round(1.9));
console.log(Math.round(-1.1));
console.log(Math.round(-1.5));
script>
head>
<body>
body>
html>
06-Math随机数方法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Math随机数方法title>
<script>
console.log(Math.random());
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
console.log(getRandom(1, 10));
var arr = ['张三', '张三疯', '张三疯子', '李四', '李思思'];
console.log(arr[getRandom(0, arr.length - 1)]);
script>
head>
<body>
body>
html>
07-猜数字游戏
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字游戏title>
<script>
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 10);
while (true) {
var num = prompt('请输入1~10之间的一个数字');
if (num > random) {
alert('你猜大了');
} else if (num < random) {
alert('你猜小了');
} else {
alert('你猜对了!');
break;
}
}
script>
head>
<body>
body>
html>
08-课下案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>课下练习title>
<script>
function getRandom(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
var random = getRandom(1, 50);
for (i = 1; i <= 10; i++) {
var num = prompt('请输入1~50之间的一个数字');
if (num > random) {
alert('猜大了');
} else if (num < random) {
alert('猜小了');
} else {
alert('猜对了');
break;
}
if (i == 10) {
alert('抱歉,你的次数已经用完');
}
}
script>
head>
<body>
body>
html>
09-Date日期对象的使用
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date日期对象的使用title>
<script>
var arr = new Array();
var obj = new Object();
var date = new Date();
console.log(date);
var date1 = new Date(2019, 10, 1);
console.log(date1);
var date2 = new Date('2019-10-01 8:8:8');
console.log(date2);
script>
head>
<body>
body>
html>
10-格式化日期年月日星期
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>格式化日期年月日星期title>
<script>
var date = new Date();
console.log(date.getFullYear());
console.log(date.getMonth() + 1);
console.log(date.getDate());
console.log(date.getDay());
var year = date.getFullYear();
var month = date.getMonth() + 1;
var dates = date.getDate();
var arr = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
var day = date.getDay();
console.log('今天是:' + year + '年' + month + '月' + dates + '日 ' + arr[day]);
script>
head>
<body>
body>
html>
11-格式化日期时分秒
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>格式化日期时分秒title>
<script>
var date = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
function getTime() {
var time = new Date();
var h = time.getHours();
h = h < 10 ? '0' + h : h;
var m = time.getMinutes();
m = m < 10 ? '0' + m : m;
var s = time.getSeconds();
s = s < 10 ? '0' + s : s;
return h + ':' + m + ':' + s;
}
console.log(getTime());
script>
head>
<body>
body>
html>
12-获取日期的总的毫秒数(时间戳)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取日期的总的毫秒数(时间戳)title>
<script>
var date = new Date();
console.log(date.valueOf());
console.log(date.getTime());
var date1 = +new Date();
console.log(date1);
console.log(Date.now());
script>
head>
<body>
body>
html>
13-倒计时案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>倒计时案例title>
<script>
function countDown(time) {
var nowTime = +new Date();
var inputTime = +new Date(time)
var times = (inputTime - nowTime) / 1000;
var d = parseInt(times / 60 / 60 / 24);
d = d < 10 ? '0' + d : d;
var h = parseInt(times / 60 / 60 % 24);
h = h < 10 ? '0' + h : h;
var m = parseInt(times / 60 % 60);
m = m < 10 ? '0' + m : m;
var s = parseInt(times % 60);
s = s < 10 ? '0' + s : s;
return d + '天' + h + '时' + m + '分' + s + '秒';
}
console.log(countDown('2022-2-17 11:25:56'));
var date = new Date();
console.log(date);
script>
head>
<body>
body>
html>
效果展示
14-创建数组的两种方式(复习)
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>创建数组的两种方式title>
<script>
var arr = [1, 2, 3];
console.log(arr[0]);
var arr1 = new Array(2, 3);
console.log(arr1);
script>
head>
<body>
body>
html>
15-检测是否为数组两种方式
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>检测是否是数组方式title>
<script>
function reverse(arr) {
if (Array.isArray(arr)) {
var newArr = [];
for (i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
return newArr;
} else {
return 'error 这个参数要求必须是数组格式'
}
}
console.log(reverse([1, 2, 3]));
console.log(reverse(1, 2, 3));
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
script>
head>
<body>
body>
html>
16-添加删除数组元素方法
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加删除数组元素方法title>
<script>
var arr = [1, 2, 3];
console.log(arr.push(4, 'pink'));
console.log(arr);
console.log(arr.unshift('red', 'purple'));
console.log(arr);
console.log(arr);
console.log(arr.pop());
console.log(arr);
console.log(arr.shift());
script>
head>
<body>
body>
html>
17-筛选数组
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>筛选数组title>
<script>
var arr = [1500, 1200, 2000, 2100, 1800];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] < 2000) {
newArr.push(arr[i]);
}
}
console.log(newArr);
script>
head>
<body>
body>
html>
18-数组排序
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组排序title>
<script>
var arr = ['pink', 'red', 'blue'];
arr.reverse();
console.log(arr);
var arr1 = [3, 4, 7, 1];
arr1.sort();
console.log(arr1);
var arr2 = [13, 4, 77, 1, 7];
arr2.sort(function(a, b) {
return b - a;
});
console.log(arr2);
script>
head>
<body>
body>
html>
19-获取数组元素索引号
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>获取数组元素索引号title>
<script>
var arr = ['red', 'green', 'blue', 'pink', 'blue'];
console.log(arr.lastIndexOf('blue'));
script>
head>
<body>
body>
html>
20-数组去重案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组去重案例title>
<script>
function unique(arr) {
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) === -1) {
newArr.push(arr[i])
}
}
return newArr;
}
var demo = unique(['c', 'a', 'z', 'a', 'x', 'a', 'x', 'c', 'b']);
console.log(demo);
script>
head>
<body>
body>
html>
21-数组转换为字符串
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组转换为字符串title>
<script>
var arr = [1, 2, 3];
console.log(arr.toString());
var arr1 = ['green', 'blue', 'pink'];
console.log(arr1.join());
console.log(arr1.join('-'));
console.log(arr1.join('&'));
script>
head>
<body>
body>
html>