Math函数
函数名 | 描述 |
---|---|
Math.PI | 获得圆周率 |
Math.max(v1[,v2,v3]) | 获得最大的数 |
Math.min(v1[,v2,v3]) | 获得最小的数 |
Math.pow(x,y) | 获得x的y次幂 |
Math.abs() | 数值取绝对值 |
Math.floor() | 数值向下取整 |
Math.ceil() | 数值向上取整 |
Math.round() | 数值四舍五入取整 |
Math.random() | 返回[0~1]内的一个随机小数 |
案例:获得一个[min,max]之间的整数
function getNum(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
}
console.log(getNum(0, 10));
Date()日期对象
日期对象创建
var date = new Date(); // 时间只会在创建的时候赋值一次
console.log(date); //Sat Feb 06 2021 16:35:54 GMT+0800 (中国标准时间)
date = new Date(2017, 10, 12); //数值类型中月份会自动加1
console.log(date); //Sun Nov 12 2017 00:00:00 GMT+0800 (中国标准时间)
date = new Date('2017-10-12 23:52:00'); //
console.log(date); //Thu Oct 12 2017 23:52:00 GMT+0800 (中国标准时间)
日期格式化取
方法名 | 说明 | 代码 |
---|---|---|
getFullYear() | 获取当年 | dObj.getFullYear() |
getMonth() | 获取当月(0-11) | dObj.getMonth() |
getDate() | 获取当天日期 | dObj.getDate() |
getDay() | 获取星期几(周日0到周六6) | dObj.getDay() |
getHours() | 获取当前小时 | dObj.getHours() |
getMinutes() | 获取当前分钟 | dObj.getMinutes() |
getSeconds() | 获取当前秒钟 | dObj.getSeconds() |
时间戳获取
console.log(date.valueOf());
console.log(date.getTime());
console.log(+new Date());//简易形式
var date1 = new Date(date.getTime())
console.log(date1);//时间戳转换为具体日期对象
案例:倒计时
时间计算公式:
- d = parseInt(总秒数/60/60/24); //计算天数
- h = parseInt(总秒数/60/60%24); //计算天数
- m = parseInt(总秒数/60%60); //计算天数
- s = parseInt(总秒数%60); //计算天数
function countDown(time) {
var inputTime = +new Date(time);
var nowTime = +new Date();
var times = (inputTime - nowTime) / 1000;
var d = parseInt(times / 60 / 60 / 24);//获得天数
var h = parseInt(times / 60 / 60 % 24);//获得小时
var m = parseInt(times / 60 % 60);
var s = parseInt(times % 60);
d = d > 10 ? d : '0' + d;
h = h > 10 ? h : '0' + h;
m = m > 10 ? m : '0' + m;
s = s > 10 ? s : '0' + s;
console.log(d + '天' + h + '时' + m + '分' + s + '秒');
}
countDown('2021-10-12 0:0:0');
案例输入年份显示日历
<!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>Document</title>
<link rel="stylesheet" href="cal.css" />
</head>
<body>
<div class="box"></div>
<script>
function calendar(y) {
var html = '';
for (var m = 0; m < 12; m++) {
html += "<table>";
html += '<tr class="title"><th colspan="7">' + y + '年' + (m + 1) + '月</th></tr>';
html += '<tr><td>日</td><td>一</td><td>二</td><td>三</td><td>四</td><td>五</td><td>六</td></tr>';
// max表示月份的最多天数
var max = new Date(y, m, 0).getDate();
// w获得y年m月1号是星期几
var w = new Date(y, m, 0).getDay();
html += '<tr>'
for (var d = 1; d <= max; d++) {
// 0~6的循环
w = (w + 1) > 6 ? 0 : w + 1;
// 每个月的第一天检查是否需要跨列
if (w && d == 1) {
//跨列,第一天是周几就跨几列
html += '<td colspan="' + w + '"></td>'
}
// 填充日期
html += '<td>' + d + '</td>';
// 7天一次换行
if (w == 6 && d != max) {
html += '</tr><tr>'
}
}
html += '</tr>';
html += '</table>';
}
return html;
}
var year = prompt('请输入年份', '2021');
document.querySelector('div').innerHTML = calendar(year);
</script>
</body>
</html>
Array()数组
创建数组
var arr1 = [1, 2];
console.log(arr1);
var arr2 = new Array(); // 创建一个空数组对象
console.log(arr2);
var arr3 = new Array(2); // 创建一个长度为2的空数组
console.log(arr3);
console.log(arr3[0]); // undefined
console.log(arr3.length); // 2
var arr4 = new Array(1, 2, 3);
console.log(arr4);
判断是否为数组
var arr = [];
var obj = {};
console.log(arr instanceof Array);
console.log(obj instanceof Array);
console.log(Array.isArray(arr));
console.log(Array.isArray(obj));
添加数组元素
var arr1 = [];
arr1.push(1);
arr1.push(2, 'three');
var l = arr1.push(4, '五'); // push返回值是数据添加后数组长度
console.log(l);
console.log(arr1);
arr1.unshift('零'); // 在数组前端添加数据
console.log(arr1);
删除数组元素
var arr1 = [1, 2, 3, 4, 5]
var l = arr1.pop(); //pop:删除最后一个数组元素,返回删除前数组的长度
console.log(l);
console.log(arr1);
arr1.shift()
console.log(arr1);//shift:删除第一个数组元素
添加或删除元素
var ans = [1, 2, 3, 4, 5];
ans.push(6);//添加元素到尾部
console.log(ans);//[1, 2, 3, 4, 5, 6]
ans.pop();//弹出尾部元素
console.log(ans);//[1, 2, 3, 4, 5]
ans.unshift(0);//添加元素到头部
console.log(ans);//[0, 1, 2, 3, 4, 5]
ans.shift();//弹出头部元素
console.log(ans);//[1, 2, 3, 4, 5]
案例:删除工资大于2000的数据
var arr1 = [1092, 4000, 2001, 239, 1013, 5000];
var newArr = new Array();
for (let i = 0; i < arr1.length; i++) {
if (arr1[i] < 2000) {
newArr.push(arr1[i])
}
}
console.log(newArr);
数组填充
var ans = [1, 2, 3, 4, 5];
ans.fill('abc', 1, 2);
console.log(ans);
数组删截
var ans = [1, 2, 3, 4, 5];
ans.splice(2);
console.log(ans);
数组反转和排序
var arr1 = [1092, 4000, 2001, 239, 1013, 5000, 'a', 'c', 'b'];
arr1.sort();//数组排序
console.log(arr1);//[1013, 1092, 2001, 239, 4000, 5000, "a", "b", "c"]
arr1.reverse();//数组反转
console.log(arr1);//["c", "b", "a", 5000, 4000, 239, 2001, 1092, 1013]
//升序排序 ["c", "b", "a", 239, 1013, 1092, 2001, 4000, 5000]
arr1.sort(function (a, b) {
return a - b;
});
console.log(arr1);
//降序排序 ["c", "b", "a", 5000, 4000, 2001, 1092, 1013, 239]
arr1.sort(function (a, b) {
return b - a;
});
console.log(arr1);
数组是否包含数据
var ans = [1, 2, 3, 4, 5];
console.log(ans.includes(0)); //false
console.log(ans.includes(3)); //true
数组查询索引
var arr1 = ['red', 'green', 'blue', 'chenyu', 'blue']
console.log(arr1.indexOf('blue'));//返回数组元素找到的第一个索引位置的元素下标,找不到返回-1
console.log(arr1.lastIndexOf('blue'));//返回数组元素中最后一个找到的数组元素下标,找不到返回-1
案例:数组去重
var arr1 = ['a', 'b', 'c', 'd', 'a', 'c', 'e', 'f'];
function unique(arr) {
var newArr = [];
for (let i = 0; i < arr.length; i++) {
if (newArr.indexOf(arr[i]) == -1) {
newArr.push(arr[i])
}
}
return newArr;
}
console.log(unique(arr1));
数组转换为字符串–join
var arr1 = ['1', 2, '三', 4];
var s1 = arr1.toString();//将数组转换为字符串以‘,’分割
var s2 = arr1.join(';');//将数组转换为字符串以指定字符分割
console.log(s1);
console.log(s2);
数组拼接、截取、删除
var arr1 = [1, 2, 3];
var arr2 = ['4', '5', '6'];
//连接两个数组--不影响原数组
var newArr = arr1.concat(arr2);
console.log(newArr);
//数组截取--不影响原数组
newArr = arr1.slice(1, 3);//返回截取的字符串
console.log(newArr);
console.log(arr1);
//数组删除--影响原数组
newArr = arr2.splice(1, 3);//返回被删除的字符串
console.log(newArr);
console.log(arr2);
案例:三级城市选择
<!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>Document</title>
</head>
<body>
<form>
省份
<select id='province'>
<option value='-1'>请选择</option>
</select>
市
<select id='city'></select>
区
<select id='country'></select>
</form>
<script>
var pr = ['上海', '江苏', '河北'];
var ci = [
['上海市'],
['苏州市', '南京市', '扬州市'],
['石家庄', '秦皇岛', '张家口']
];
var co = [
[
['黄浦区', '静安区', '长宁区', '浦东区']
],
[
['虎丘区', '吴中区', '相城区', '姑苏区', '吴江区'],
['玄武区', '秦淮区', '建邺区', '鼓楼区', '浦口区'],
['邗江区', '广陵区', '江都区'],
],
[
['长安区', '桥西区', '新华区', '井陉矿区'],
['海港区', '山海关区', '北戴河区', '抚宁区'],
['桥东区', '桥西区', '宜化区', '下花园区']
]
]
// obj表示要填充的select组件,data具体填充的数据
function createOtion(obj, data) {
for (const i in data) {
var op = new Option(data[i], i);
obj.options.add(op);
}
}
var province = document.querySelector('#province');
var city = document.querySelector('#city');
var country = document.querySelector('#country');
createOtion(province, pr);
province.onchange = function () {
city.options.length = 0;
country.options.length = 0;
createOtion(city, ci[province.value]);
createOtion(country, co[province.value][city.value]);
};
city.onchange = function () {
country.options.length = 0;
createOtion(country, co[province.value][city.value]);
}
</script>
</body>
</html>
字符串
函数名 | 描述 |
---|---|
indexOf(‘要查找的字符’,开始查找的位置) | 返回指定内容在元素字符串中的起始位置,如果不存在就返回-1, 开始查找的位置是index索引号,默认为0 |
lastIndexOf() | 从后往前找,只找第一个匹配的 |
charAt(i) | 得到字符串第i位置的字符 |
substring(start[,end]) | 截取从start开始到end位置之间的一个子字符串 |
substr(start[,lenght]) | 截取从start开始lenght长度的字符串 |
toLowerCase() | 获取字符串小写形式 |
toUpperCase() | 获取字符串大写形式 |
split([separator[,limit]]) | 使用separator分隔符将字符串分隔为数组,limit用于限定分隔的数量 |
replace(str1,str2) | 使用str1替换str2 |
Number
成员 | 作用 |
---|---|
MAX_VALUE | 在js中所能表示的最大值 |
MIN_VALUE | 在js中所能表示的最小值 |
toFixed(digits) | 使用顶点表示法来格式化一个数值 |