第五模块：WEB开发基础-第三章 JavaScript基础
系列文章目录
js
文章目录
- 系列文章目录
- 前言
- 一、js介绍
-
- 1.js介绍
- 2.如何在页面中插入js
- 3.变量
- 4.基本变量类型的介绍
- 二、运算符
-
- 1.算数运算符
- 2.赋值运算符
- 3.字符串
- 4.数值和字符串转换
- 5.js中强大的数组array
- 6.条件判断
- 7.比较运算符
- 8.逻辑运算符
- 9.switch语句
- 10.三元运算符
- 11.for循环介绍和应用
- 12.break和continue语句
- 13.while循环
- 14.do-while循环
- 三、函数
-
- 1.函数的定义
- 2.函数传参
- 3.函数返回值和函数表达式
- 4.函数作用域和全局污染
- 5.对象object讲解
- 四、数组
-
- 1.内置对象array
- 2.数组的join方法
- 3.数组的栈方法和队列方法
- 4.数组排序
- 5.数组的操作方法
- 6.数组的位置方法
- 7.数组的迭代方法
- 8.map方法的应用
- 五、字符串
-
- 1.字符串的字符方法
- 2.字符串的切片方法
- 3.字符串的其他方法
- 4.如何查找当前字符串的所有位置
- 六、Date
-
- 1.Date日期对象的创建方式
- 2.Date的常用方法
- 3.日期格式化方法
- 4.如何显示数字时钟的格式时间
- 七、number类型
-
- 1.字符串和数值类型相互转换
- 2.global对象的编码和解码方法
- 3.window对象讲解
- 4.math数字对象
- 5.获取某个范围内的随机数
- 6.如何来获取随机颜色
- 7.如何获取随机验证码
- 总结
前言
js学习
一、js介绍
1.js介绍
JavaScript的组成
ECMAScript 5.0:定义了js的语法标准： 包含变量 、表达式、运算符、函数、if语句 for循环 while循环、内置的函数
DOM :操作网页上元素的API。比如让盒子显示隐藏、变色、动画 form表单验证
BOM:操作浏览器部分功能的API。比如刷新页面、前进后退、让浏览器自动滚动
2.如何在页面中插入js
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>js文件的引入title>
<script type="text/javascript">
//编写js代码
alert("我是mjj老师");
script>
<script type="text/javascript" src="js/index.js">script>
head>
<body>
body>
html>
3.变量
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>变量title>
head>
<body>
<script type="text/javascript">
//单行注释
/*
多行注释
*/
// 变量初始化
var x = 30;
var name = "王思聪";
var X = 30;
// 声明变量
var y;
// 变量赋值
y = 50;
/* 1.必须使用字母，下划线(_)，$符号开始
2.多个英文字母 驼峰 myName
3.不能使用js中的关键字和保留字
4.严格区分大小写
*/
var _a = 40;
var $ = 90;
// alert(_a);
// alert($);
// alert(x);
// alert(X);
var z = 40;
z = 50;
alert(z);
script>
body>
html>
4.基本变量类型的介绍
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script type="text/javascript">
//number数值类型
var a = 3;
var b = 1.234;
var c = -1;
//typeof来检查当前变量的数据类型
// alert(typeof a);
// alert(typeof b);
// alert(typeof c);
//字符串string 'abc234'或者是"我是mjj"
var name = "mjj";
var en = "abc";
// alert(typeof name);
// alert(typeof en);
//boolen 0（假false）和1（真true）
var c = 3 < 4;
alert(c)
alert(typeof c);
//声明变量
var x;
alert(x);
alert(typeof x);
//空对象
var y=null;
alert(y);
alert(typeof y);
script>
body>
html>
二、运算符
1.算数运算符
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运算符-算数运算符title>
head>
<body>
<script type="text/javascript">
var x = 10;
var y = 4;
var sum = x + y;
var sum2 = 4 + 5 + x + y;
var en = x - y;
var or = x * y;
var op = x % y * sum;
alert(or);
alert(op);
var c = x + y +sum/4 - 3;
alert(c);
script>
body>
html>
2.赋值运算符
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>递增和递减以及赋值运算符title>
head>
<body>
<script type="text/javascript">
//++
//--
var x = 3;
x ++;
alert(x);
var a = 5;
var b = 6;
a = b;
var c = 10;
// c = c + 5;
c += 5;
c -= 2;
c *= 4;
c /= 3;
alert(c);
script>
body>
html>
3.字符串
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符串title>
head>
<body>
<script type="text/javascript">
// var str = "@#$";
// alert(str);
// var word = "hello";
// var newWord = "world";
// alert(word);
// alert(typeof word);
// alert(newWord);
// var name = "wolud you eat apple";
// alert(name);
// var str = "I am 'mjj'";
// alert(str);
var one = "hello";
var name = "mjj";
var joined = one +" "+ name;
alert(joined);
script>
body>
html>
4.数值和字符串转换
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数字和字符串title>
head>
<body>
<script type="text/javascript">
// var a = "mjj" + 521;
// alert(a);
// alert(typeof a)
// var b = "18" + "40";
// alert(b);
// alert(typeof b);
// 1.隐式转换，数值转字符串
var num = 24;
var myStr = num + "";
alert(typeof myStr);
// 2.toString()数值转字符串
var myStr2 = num.toString();
alert(typeof myStr2);
// 3.字符串转数值
var myNum = Number(num);
alert(typeof myNum);
var n = "2563";
var a = Number(n);
alert(typeof a);
script>
body>
html>
5.js中强大的数组array
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组arraytitle>
head>
<body>
<script type="text/javascript">
var shopping = ["香蕉","苹果","牛奶","红牛"];
alert(shopping);
alert(typeof shopping);
console.log(shopping);
var rand = ["tree","345",[1,2,3]];
console.log(rand);
// 访问
var item1 = rand[0];
console.log(item1);
rand[0] = "榴莲";
console.log(rand);
var a = rand[2][2];
console.log(a);
// 访问数组长度
console.log("数组的长度是" + rand.length);
script>
body>
html>
6.条件判断
条件判断
if(女朋友合适){
准备结婚
}
else{
准备分手
}
<!-- 条件判断
if(女朋友合适){
准备结婚
}
else{
准备分手
} -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// var distance = 10;
// var nowdistance = 16;
// if (nowdistance <= distance){
// console.log("自动驾驶");
// }else{
// console.log("人为行驶");
// }
var weather = "sunny";
if (weather == "sunny"){
console.log("天气非常棒，可以出去玩耍");
}else if(weather == "rain"){
console.log("天气下雨了，在家呆着");
}else if(weather == "snowing"){
console.log("天气下雪了，可以出去滑雪");
}else{
alert("输入天气有错,重新输入")
}
</script>
</body>
</html>
7.比较运算符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>比较运算符</title>
</head>
<body>
<script type="text/javascript">
// ===等同于 和!==不等同于
var a = 5;
var astr = "5";
var isequal1 = a === astr;
console.log(isequal);
// ==等于 和 !=不等于
var isequal2 = a == astr;
console.log(isequa2);
console.log(3>4);
console.log(3 <= 4);
</script>
</body>
</html>
8.逻辑运算符
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逻辑运算符title>
head>
<body>
<script type="text/javascript">
// var weather = "sunny";
// var temp = 32;
// if (weather == "sunny"){
// if (temp > 30){
// console.log("在家里吹空调，吃西瓜");
// }else{
// console.log("天气非常好，可以出去玩耍");
// }
// }
//&&逻辑与 //逻辑或 !
var weather = "sunny";
var temp = 32;
if (weather == "sunny" &&temp > 30){
console.log("在家里吹空调，吃西瓜");
}else if(weather == "sunny" &&temp <= 30){
console.log("天气非常好，可以出去玩耍");
}
//数学考过80或英语考过85,才可以玩游戏
var mathScore = 77;
var englishScore = 90;
if (mathScore > 80 || englishScore >= 85){
console.log("可以玩游戏");
}else{
console.log("在家里写作业");
}
var islogin = false;
alert(!islogin)
if (!islogin){
console.log("用户已登录")
}
script>
body>
html>
9.switch语句
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>switch语句title>
head>
<body>
<script type="text/javascript">
var weather = "sunny";
switch(weather){
case "sunny":
alert(1);
//编写switch语句，小心break,case穿透
break;
case "rainy":
alert(2);
break;
case "snowing":
alert(3);
break;
default:
alert(4);
break;
}
script>
body>
html>
10.三元运算符
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三元运算符title>
head>
<body>
<script type="text/javascript">
//if ...else...
// 条件?run this code:run this code;
var isresult = 1>2?"真的":"假的";
alert(isresult);
script>
body>
html>
11.for循环介绍和应用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<script type="text/javascript">
//循环来做1+2+3...10000
// for(初始化条件;结束条件;递增条件){
// run this code;
// }
var i = 1;
var sum = 0
for (i = 1;i <= 1000;i++){
console.log(i);
sum += i;
}
console.log(sum);
var shopping = ["香蕉","苹果","牛奶"];
var j;
for (j = 0;j < shopping.length;j++){
// console.log(shopping[j]);
// document.write(shopping[j]);
var htmlStr = ""
+ shopping[j] + ""
;
console.log(htmlStr);
document.write(htmlStr);
}
script>
body>
html>
12.break和continue语句
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>break和continuetitle>
head>
<body>
<script type="text/javascript">
//break可以跳出当前循环
var x = 0;
//死循环
for(;;){
if (x > 100){
break;
}
x ++;
}
console.log(x);
var sum = 0;
for(var i = 1;i <= 10;i++){
if (i == 8){
// break;
//跳出当前循环，下次循环继续执行
continue;
}
sum = sum+i;
}
alert(sum);
script>
body>
html>
13.while循环
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while循环title>
head>
<body>
<script type="text/javascript">
// 初始化条件
// while(判断循环结束条件){
// //run this code
// 递增条件
// }
var sum = 0; //计算的和
var n = 99; //初始的奇数
while(n>0){
sum = sum + n;
n = n-2;
}
alert(sum);
script>
body>
html>
14.do-while循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>while循环</title>
</head>
<body>
<script type="text/javascript">
// 初始化条件
// while(判断循环结束条件){
// //run this code
// 递增条件
// }
/*var sum = 0; //计算的和
var n = 99; //初始的奇数
while(n>0){
sum = sum + n;
n = n-2;
}
alert(sum);*/
//do while 先判断，在执行
var sum = 0;
var i = 1;
while(i <= 100){
sum = sum+ i;
i ++
}
alert(sum);
//do-while 先执行一次，再判断
var sum = 0;
var i = 1;
do{
sum = sum + i;
i ++
}while(i <= 100);
</script>
</body>
</html>
三、函数
1.函数的定义
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数title>
head>
<body>
<script type="text/javascript">
function 做饭(){
//买菜
//洗菜
//切菜
//炒菜
//吃菜
//洗碗
//睡觉
alert("做饭了");
}
做饭();
script>
body>
html>
2.函数传参
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数title>
head>
<body>
<script type="text/javascript">
function 做饭(isBad){ //isbad形式参数
if (isBad){
alert("点个外卖");
}else{
//买菜
//洗菜
//切菜
//炒菜
//吃菜
//洗碗
//睡觉
alert("做饭了");
}
}
var bad = true; //刀坏了
做饭(bad);
script>
body>
html>
3.函数返回值和函数表达式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数返回值和函数表达式title>
head>
<body>
<script type="text/javascript">
function addition(a,b){
var sum = a + b;
return sum;
}
function subtraction(a,b){
return a - b;
}
function multiplication(a,b){
return a * b;
}
function division(a,b){
return a / b;
}
var r1 = addition(2,3);
var r2 = subtraction(3,2);
var r3 = multiplication(3,2);
var r4 = division(3,2);
console.log(r1);
console.log(r2);
console.log(r3);
console.log(r4);
//函数表达式
var division = function(a,b){
return a/b;
}
script>
body>
html>
4.函数作用域和全局污染
作用域.html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数作用域title>
head>
<body>
<script type="text/javascript" src="js/first.js">script>
<script type="text/javascript" src="js/second.js">script>
<script type="text/javascript">
console.log(window);
first();
second();
script>
body>
html>
first.js
(function(){
var name = "mjj";
var hello = function hello(){
alert("hello" + name);
}
window.first = hello;
})();
second.js
(function(){
var name = "jack";
var hello = function hello(){
alert("hello" + " "+ " " + name);
}
window.second = hello;
})();
5.对象object讲解
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>objecttitle>
head>
<body>
<script type="text/javascript">
/*
var name = "火腿肠";
function 老虎(){
alert(name);
}
function 企鹅(){
alert(name);
}
老虎();
*/
//对象（属性和方法） 自变量创建 姓名，年龄，性别，爱好（动作）
var person = {
name:"mjj",
age:18,
sex:"女",
fav:function(a){
alert("female");
return "female" + a +"岁";
}
}
console.log(person);
console.log(person.name);
console.log(person.fav(18));
script>
body>
html>
四、数组
1.内置对象array
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>javascript常用内置对象title>
head>
<body>
<script type="text/javascript">
//自变量创建一样
// var arr = [1,2,3];
//内置对象 native object 对象:属性和方法
// document.write("hehehe");
// alert(typeof arr);
// js提供构造函数
var color = new Array();
var color2 = [];
if (Array.isArray(color)){
//对数组进行操作
color[0] = "red";
color[1] = "blue";
color[2] = "yellow";
var a = color.toString();
console.log(a);
console.log(color);
// console.log(color[0]);
// console.log(color.length);
}else{
//...
}
script>
body>
html>
2.数组的join方法
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组常用的方法title>
head>
<body>
<script type="text/javascript">
/*
var arr = [1,2,3];
var a = arr.toString();
var b = arr.toLocaleString();
console.log(a);
console.log(b);
*/
/*var person1 = {
toLocaleString:function(){
return "mjj";
},
toString:function(){
return "嘛纪级";
}
}
var person2 = {
toLocaleString:function(){
return "隔壁老王";
},
toString:function(){
return "隔壁老李";
}
}
var people = [person1,person2];
console.log(people);
console.log(people.toString());
console.log(people.toLocaleString());
*/
//分割字符串
var colors = ["red","blue","green"];
var a = colors.join("|");
console.log(a);
script>
body>
html>
3.数组的栈方法和队列方法
//栈(lifo last - in - first - out)方法 push()队 pop() 列方法
//push()往数组最后一项添加内容
var newlength = colors.push("purple");
console.log(newlength);
console.log(colors);
//pop()从数组末尾删除最后一项
var lastItem = colors.pop()
console.log(lastItem);
console.log(colors);
//队列 fifo 先进先出 shift() unshift()
var newlength = colors.unshift("yellow");
console.log(newlength);
console.log(colors);
var firstItem = colors.shift();
console.log(firstItem);
console.log(colors);
4.数组排序
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组常用的方法title>
head>
<body>
<script type="text/javascript">
/*
var arr = [1,2,3];
var a = arr.toString();
var b = arr.toLocaleString();
console.log(a);
console.log(b);
*/
/*var person1 = {
toLocaleString:function(){
return "mjj";
},
toString:function(){
return "嘛纪级";
}
}
var person2 = {
toLocaleString:function(){
return "隔壁老王";
},
toString:function(){
return "隔壁老李";
}
}
var people = [person1,person2];
console.log(people);
console.log(people.toString());
console.log(people.toLocaleString());
*/
//分割字符串
var colors = ["red","blue","green"];
var a = colors.join("|");
console.log(a);
//栈(lifo last - in - first - out)方法 push()队 pop() 列方法
//push()往数组最后一项添加内容
var newlength = colors.push("purple");
console.log(newlength);
console.log(colors);
//pop()从数组末尾删除最后一项
var lastItem = colors.pop()
console.log(lastItem);
console.log(colors);
//队列 fifo 先进先出 shift() unshift()
var newlength = colors.unshift("yellow");
console.log(newlength);
console.log(colors);
var firstItem = colors.shift();
console.log(firstItem);
console.log(colors);
var values = [0,3,2,16,15,10];
//数组倒序
// values.reverse();
// console.log(values);
//sort排序
// values.sort();
// console.log(values);
function compare1(a,b){
//a位于b之前
/*
if (a < b){
return -1;
}else if (a > b){
return 1;
}else{
return 0;
}*/
return a - b;
}
function compare2(a,b){
//a位于b之前
/*
if (a < b){
return 1;
}else if (a > b){
return -1;
}else{
return 0;
}*/
return b - a;
}
// values.sort(compare1);//升序
// console.log(values);
values.sort(compare2);//升序
console.log(values);
script>
body>
html>
5.数组的操作方法
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>数组常用的方法title>
head>
<body>
<script type="text/javascript">
/*
var arr = [1,2,3];
var a = arr.toString();
var b = arr.toLocaleString();
console.log(a);
console.log(b);
*/
/*var person1 = {
toLocaleString:function(){
return "mjj";
},
toString:function(){
return "嘛纪级";
}
}
var person2 = {
toLocaleString:function(){
return "隔壁老王";
},
toString:function(){
return "隔壁老李";
}
}
var people = [person1,person2];
console.log(people);
console.log(people.toString());
console.log(people.toLocaleString());
*/
//分割字符串
var colors = ["red","blue","green"];
var a = colors.join("|");
console.log(a);
//栈(lifo last - in - first - out)方法 push()队 pop() 列方法
//push()往数组最后一项添加内容
var newlength = colors.push("purple");
console.log(newlength);
console.log(colors);
//pop()从数组末尾删除最后一项
var lastItem = colors.pop()
console.log(lastItem);
console.log(colors);
//队列 fifo 先进先出 shift() unshift()
var newlength = colors.unshift("yellow");
console.log(newlength);
console.log(colors);
var firstItem = colors.shift();
console.log(firstItem);
console.log(colors);
var values = [0,3,2,16,15,10];
//数组倒序
// values.reverse();
// console.log(values);
//sort排序
// values.sort();
// console.log(values);
function compare1(a,b){
//a位于b之前
/*
if (a < b){
return -1;
}else if (a > b){
return 1;
}else{
return 0;
}*/
return a - b;
}
function compare2(a,b){
//a位于b之前
/*
if (a < b){
return 1;
}else if (a > b){
return -1;
}else{
return 0;
}*/
return b - a;
}
// values.sort(compare1);//升序
// console.log(values);
values.sort(compare2);//升序
console.log(values);
//操作方法 concat() slice() splice()
//1.concat数组合并
var colors = ["red","blue"];
// var newColors = colors.concat("green");
// newColors = newColors.concat({name:"张三"});
// console.log(newColors);
var newColors = colors.concat({name:"lisi"},["black","purple"]);
// 2.slice将当前数组中的一个或者多个项创建一个新数组
newColors = newColors.slice(1,2);
newColors = newColors.slice(-2,-1); //slice(3,4);
// 3.splice删除，插入，替换
// 3.1删除
var names = ["zhangsan","lisi","alex","mjj"];
// names.splice(0,2);
// console.log(names);
// 3.2插入
// names.splice(1,0,"xiongda","jack");
// console.log(names);
// 3.3替换
names.splice(1,1,"xiaonger");
console.log(names);
script>
body>
html>
6.数组的位置方法
//位置方法 indexOf() lastIndexOf()
var names = ["zhangsan","mjj","wangwu","mjj","zhaoliu"];
alert(names.indexOf("mjj")); //1
alert(names.lastIndexOf("mjj")); //3
alert(names.indexOf("mjj",2));//3
alert(names.lastIndexOf("mjj",2));//1
alert(names.lastIndexOf("mjjxxx",2));//如果查不到结果，返回-1
7.数组的迭代方法
//5.迭代方法
//5.1filter()将数组元素进行过滤
var numbers = [1,2,3,6,9,15,4,20];
var filterResult = numbers.filter(function(item,index,array){
console.log("item:" + item);
console.log("index:" + index);
console.log("array:" + array);
return item > 10;
});
console.log(filterResult);
//5.2map()方法
var mapresult = numbers.map(function(index,item,array){
return item * 2;
});
console.log(mapresult);
// for (var i = 0;i < mapresult.length;i++){
// console.log(mapresult[i]);
// }
//5.3forEach()遍历
mapresult.forEach(function(index,item,array){
console.log(item);
});
8.map方法的应用
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>map方法的应用title>
head>
<body>
<script type="text/javascript">
var oldArray = [
{
"name":"zhangsan",
"age":17
},
{
"name":"mjj",
"age":29
},
{
"name":"lisi",
"age":30
},
];
/*
var newNames = [];
var newAges = [];
for(var i = 0;i
var newNames = oldArray.map(function(item,index){
return item.name
});
var newAges = oldArray.map(function(item,index){
return item.age
});
console.log(newNames);
console.log(newAges);
script>
body>
html>
五、字符串
1.字符串的字符方法
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符串的常用方法title>
head>
<body>
<script type="text/javascript">
//属性
length
//方法
/*
charAt()
charCodeAt()
concat()
slice()
substr()
substring()
indexOf()
lastIndexOf()
*/
var str = "hello world";
console.log(str.length); //获取字符串长度
console.log(str.charAt(1)); //e 获取指定的字符
console.log(str.charCodeAt(1)); //101 获取指定的字符对应的编码
console.log(str.concat("mjj","jack")); //拼接字符串 通常情况不使用他来做拼接，使用+来做多个字符的拼接
script>
body>
html>
2.字符串的切片方法
console.log(str.slice(2));
console.log(str.substring(2));
console.log(str.substr(2));
//第一个参数是起始的位置，第二个参数是结束的位置，顾头不顾尾
console.log(str.slice(2,4));
console.log(str.substring(2,4));
//第二个参数是返回的字符数
console.log(str.substr(2,4));
console.log(str.slice(-3,-1));//rld slice(8,10)
3.字符串的其他方法
var str = "hello world";
console.log(str.indexOf("o"));//4
console.log(str.lastIndexOf("o"));//7
console.log(str.indexOf("o",6));//7
console.log(str.lastIndexOf("o",6));//4
//trim()清除当前字符串的前后空格
var str = " hello world ";
console.log(str.trim());
console.log(str);
var str = "Hello Mjj";
console.log(str.toUpperCase());
console.log(str.toLowerCase());
4.如何查找当前字符串的所有位置
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查找当前字符在字符串的所有位置title>
head>
<body>
<script type="text/javascript">
var str = "he unfoled the map and set it on the floor";
var arr = [];
var pos = str.indexOf("e"); //1
console.log(pos);
while(pos>-1){
//找到当前e字符对应的位置
arr.push(pos);
pos = str.indexOf("e",pos+1);
}
console.log(arr);
script>
body>
html>
六、Date
1.Date日期对象的创建方式
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date日期对象title>
head>
<body>
<script type="text/javascript">
//UTC 1970.1.1到285616年
//Date日期对象
var now = new Date();
console.log(now);
var xmas = new Date("December 25,1995 13:30:30");
console.log(xmas);
var xmas = new Date(1995,11,25);
console.log(xmas);
var xmas = new Date(1995,11,25,14,30,0);
console.log(xmas);
script>
body>
html>
2.Date的常用方法
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Date日期对象title>
head>
<body>
<script type="text/javascript">
//UTC 1970.1.1到285616年
//Date日期对象
/*
1.四种创建方式
var now = new Date();
console.log(now);
var xmas = new Date("December 25,1995 13:30:30");
console.log(xmas);
var xmas = new Date(1995,11,25);
console.log(xmas);
var xmas = new Date(1995,11,25,14,30,0);
console.log(xmas);
*/
var now = new Date();
//常用方法
console.log(now.getDate());//获取月份的第几天1-31
console.log(now.getMonth());//获取月份0-11
console.log(now.getFullYear());//获取年份
console.log(now.getDay());//获取一星期中的第几天0-6
console.log(now.getHours());//获取小时0-23
console.log(now.getMinutes());//获取分钟0-59
console.log(now.getSeconds());//获取秒0-59
script>
body>
html>
3.日期格式化方法
//日期格式化方法
console.log(now.toDateString()); //星期几 月 日 年
console.log(now.toTimeString()); //时 分 秒 时区
//常用
console.log(now.toLocaleDateString()); //年月日
console.log(now.toLocaleTimeString()); //时 分 秒
console.log(now.toLocaleString()); //年 月 日 时 分 秒
console.log(now.toUTCString());
4.如何显示数字时钟的格式时间
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>返回数字时钟格式的时间title>
head>
<body>
<script type="text/javascript">
//0-23
//6:27:35pm
function nowNumTime(){
var now = new Date();
var hour = now.getHours();
var minute = now.getMinutes();
var seconds = now.getSeconds();
var tmp = '' + (hour>12?hour-12:hour);
console.log(tmp);
if(hour == 0){
tmp = 12;
}
tmp = tmp + (minute < 10? ':0':":"+minute);
tmp = tmp + (seconds < 10? ':0':":"+seconds);
tmp = tmp + (hour>=12? " p.m.":" a.m.");
return tmp;
}
var num = nowNumTime();
console.log(num);
script>
body>
html>
七、number类型
1.字符串和数值类型相互转换
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符串和数值类型相互转换title>
head>
<body>
<script type="text/javascript">
var str = "131.0251";
//字符串转数值类型
console.log(parseInt(str));
console.log(parseFloat(str));
console.log(typeof parseFloat(str));
console.log(Number(str));
var a = Number(str);
console.log(isNaN(a));
var num = 1313.798;
//强制类型转换
console.log(num.toString());
console.log(typeof num.toString());
console.log(String(num));
//隐式转换
console.log("" + num);
console.log("".concat(num));
console.log(Number(num.toFixed(2)));
script>
body>
html>
2.global对象的编码和解码方法
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>globle对象title>
head>
<body>
<script type="text/javascript">
//URI
var uri = "";
//编码使用最多的方法encodeURIComponent
console.log(encodeURI(uri));
console.log(encodeURIComponent(uri));
//解码decodeURIComponent(encodeuri);
//decodeURI(encodeuri);
//decodeURIComponent(encodeuri);
script>
body>
html>
3.window对象讲解
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>window对象title>
head>
<body>
<script type="text/javascript">
var a = 3;
console.log(window.a);
function hello(){
alert(window.a)
}
window.hello();
script>
body>
html>
4.math数字对象
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>math对象title>
head>
<body>
<script type="text/javascript">
//math
// var a = 3;
//方法 min() max()
var max = Math.max(3,34,56,21);
var min = Math.min(3,34,56,21);
var arr = [1,2,96,85,25,35];
var max = Math.max.apply(null,arr);
var min = Math.min.apply(null,arr);
console.log(max);
console.log(min);
//ceil() floor() round()
var num = 24.8;
console.log(Math.ceil(num)); //天花板函数 向上取整
console.log(Math.floor(num)); //地板函数 向下取整
console.log(Math.round(num)); //标准四舍五入
//随机数 random() 0<=random<1
console.log(Math.random());
script>
body>
html>
5.获取某个范围内的随机数
//1.获取min到max之间的整数(1-100)
function random(max,min){
return Math.floor(Math.random()*(max-min) + min);
}
6.如何来获取随机颜色
//2.获取随机颜色 rgb(0-255,0-255,0-255)
function randomColor(){
var r = random(0,256),g = random(0,256),b = random(0,256);
//模板字符串``
var result = `rgb(${r},${g},${b})`;
return result;
}
var rc = randomColor();
console.log(rc);
document.body.style.backgroundColor = rc;
7.如何获取随机验证码
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>练习title>
head>
<body>
<script type="text/javascript">
//1.获取min到max之间的整数(1-100)
function random(max,min){
return Math.floor(Math.random()*(max-min) + min);
}
//2.获取随机颜色 rgb(0-255,0-255,0-255)
function randomColor(){
var r = random(0,256),g = random(0,256),b = random(0,256);
//模板字符串``
var result = `rgb(${r},${g},${b})`;
return result;
}
var rc = randomColor();
console.log(rc);
document.body.style.backgroundColor = rc;
//3.随机验证码 四位 数字+字母（大写）
function createCode(){
//设置默认字符串
var code = '';
//设置长度
var codeLength = 4;
var randomCode = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i','j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z', 'A', 'B', 'C', 'D','E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y','Z'];
for (var i = 0;i < codeLength;i++){
//设置随机范围0-36
var index = random(0,36);
code += randomCode[index];
}
return code;
}
var rndCode = createCode();
console.log(rndCode);
document.write(`${rndCode}`);
script>
body>
html>
总结
js