JavaScript进阶篇（汇总+详解）

置顶 Ifeng_iPhone

已于 2022-09-17 15:43:57 修改

阅读量6.9k

点赞数 4

文章标签： javascript 开发语言 ecmascript

于 2022-07-26 18:37:41 首次发布

本文链接：https://blog.csdn.net/Ifeng_iPhone/article/details/126000846

版权

知识汇总部分：（干货！！）

//对象
let b={age:10,name:"HelloYf"};//新建对象b，属性age和name
b.name.toUpperCase();//返回name的内容大写
// b.name.toLowerCase();//返回name的内容小写
b.name.slice(1,3);//返回name的截取2~3字段el，数组亦可
b.name.replace("HelloYf","HelloWy")//替换为HelloWy

//数组
let x =[1,2,3,4,5,6];
x.pop();//出栈，即移除最后一个元素6
x.push(2);//入栈，即在最后增加一个元素
x.sort();//排序
for(i of x){}//遍历数组

//Date
let d =new Date();
console.info(d);//输出当前时间
d.getFullYear();//获取当前年份
d.setFullYear();//改变当前年份
d.getMonth();//获取0~11月，即1~12月

//Math
let m = Math.random();//random()括号中可以输入值，如：10则是1~10的随机数
console.info(m)//m为0~1的随机数
m.Math.round();//转化为整型integer
m.Math.sqrt();//求平方根
m=[1,2];
m.Math.max();//返回最大值，即2

//DOM
document.getElementsByTagName("xxx")[0].value=666;//利用标签名给第一块赋值
// document.getElementById("image").src()="../img/xxx.png";//更改图像地址
document.getElementById("xxx").style.color="red";//更改text文本颜色
document.getElementById("xxx").style.fontSize="20px";//更改字体大小
document.getElementById("xxx").style.display="none";//隐藏文字
document.addEventListener("click",myFunction());//插入点击监听事件

概要：

JavaScript 是⼀种基于对象的、事件驱动型的、解释型的脚本语⾔，JS设计的⽬的是实现⽹⻚的交互能⼒

•基于对象：（区别于⾯向对象），JavaScript和Java语⾔⼀样可以通过对象调⽤⽅法 obj.fn()

•事件驱动：⽹⻚⽂档中的HTML标签事件触发JavaScript代码执⾏

•解释型：边解释边执⾏（不会先对⽹⻚进⾏编译⽣成中间⽂件）

•脚本语⾔：JavaScript不会独⽴运⾏，依赖于⽹⻚⽂件（HTML⽂档）存在（通俗的理解为js要写在⽹⻚中）

面试题两个布尔类型的变量是否可以求和，为什么：

可以，在JavaScript中将true看做1计算，将false看做0，如果出现字符就会当做字符串拼接,如：

var a = true;
var b = false;
var c = xx;
var d = a+b;
var e = c+a;
console.log(d);//结果为1
console.log(e);//结果为xxtrue

JS不能⼲什么

•JS虽然是在⽤⼾的浏览器中执⾏，但是JS不能访问⽤⼾的本地⽂件；

•JS不能操作来⾃于不同服务的⽹⻚⽂档

一、基础语法

1、常用构造器：

Array    JavaScript中的数组(集合)，在此构造器中定义了可以对数据进⾏操作的函数
String   字符串，其中定义了对字符串进⾏截取、分隔、正则校验等操作的函数
Date     ⽇期，包含对⽇期进⾏操作函数
Math     数学，其中定义了数学运算绝对值、三⻆函数、四舍五⼊等操作的函数
Number   数值，包含对数值进⾏操作的函数
RegExp   正则表达式，⽤于对字符串进⾏正则校验
Boolean  布尔
Object   通⽤对象
Error    ⽤于异常处理的错误对象
Function 顶层对象，Function属性全局属性，Function函数全局函数
Events   事件对象 例如按钮发⽣了点击事件

2、正则表达式RegExp

1. 特殊符号：
\d 任意数字 ，相当于[0-9]
\s 空⽩字符
\b 单词便捷
\uxxxx 匹配unicode字符

2. 区间：
[0-9] 从0到9的任意数字 [0123456789]
[13579] 表⽰1、3、5、7、9中任意⼀个数字
[a-z] 从a到z的任意⼀个⼩写字⺟
[A-Z] 从A到Z的任意⼀个⼤写字⺟
[a-zA-Z] 任意⼀个字⺟
[0-9a-zA-Z] 任意字⺟和数字

3. 量词
a+ ⾄少⼀个a
a* 0~n个a
a? 0~1个a
a{m} m个a
a{m,n} m~n个

3、新建对象

// JS中{}就表⽰对象类型，JS对象的属性名可以直接定义，并且对象的属性⽀持扩展
//1.定义stu对象有两个属性
var stu = {stuNum:"10001",stuName:"王⼆狗"};
//2.对象号之后扩展⼀个属性
stu.stuGender = "男";

4、Math

Math中提供的函数（静态函数），可以通过 Math. 直接调用

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置对象-Math</title>
</head>
<body>
<button onclick="testMath()">测试Math</button>
<script type="text/javascript">
function testMath(){
//1.常量属性
var e = Math.E;
var pi = Math.PI;
//2.“静态”数学函数
//random : 随机产⽣⼀个[0,1)⼩数
var num = Math.random()*10;
//round : 对参数进⾏四舍五⼊得到⼀个整数
var i = Math.round(num); //0-10
//floor：只舍不⼊，获取⽐参数⼩的最⼤整数
var j = Math.floor(num); //0-9
//ceil: 只⼊不舍，获取⼤于等于参数的最⼩整数
var k = Math.ceil(num);
// abs : 获取参数的绝对值
var m = Math.abs(-5);
//sqrt : 获取参数的平⽅根
var n = Math.sqrt(9);
console.log(n);
}
</script>
</body>
</html>

5、Array

数组，存放⼀组相同类型数据的数据结构在JS中，同⼀个数组中可以存放多种不同类型的数据，相当于Java等强类型语⾔中的集合（⻓度可变，可以存储多种类型数据）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button onclick="testArray()">测试Array</button>
<script type="text/javascript">
function testArray(){
//1.创建数组
// a.通过构造器创建数组
var arr1 = new Array();
var arr2 = new Array("aaa","bbb","ccc");
// b.静态初始化数组
var arr3 = ["a","b","c","d",1,2,3];
//2.数组的操作
// a.添加元素(索引可以不连续，数组⻓度=最⼤索引+1)
arr1[0] = "wanglaoji";
arr1[1] = "jiaduobao";
arr1[5] = "kangshifu";
// b.通过索引获取数组中的元素
var v1 = arr1[0];
var v2 = arr1[1];
var v3 = arr1[9]; //数组索引越界（返回undefined）
// c.遍历
// ①for循环遍历
for (var i = 0; i <arr1.length; i++) {
var v = arr1[i];
console.log(i+":"+v);
}
// ②for ... in 遍历获取的数组元素的索引
for(var i in arr2){
var v = arr2[i];
console.log(i+":"+v)
}
//3.Array中定义的函数
// join :将数组中所有的元素使⽤"-"拼接成⼀个字符串
var s1 = arr3.join("-");
//slice : 从当前数组中截取元素，⽣成⼀个新数组
var arr = arr3.slice(2,4);
// reverse: 将当前数组中的元素反转
arr3.reverse();
console.log(arr3);
}
</script>
</body>
</html>

6、Date

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>内置对象Date</title>
</head>
<body>
<button onclick="testDate()">测试Date</button>
<script type="text/javascript">
function testDate(){
//1.创建Date对象:⼀个Date对象就表⽰⼀个时间，new Date()表⽰系统
var date = new Date();
//2. 函数
// set*: 设置当前⽇期的⽇期成分
date.setFullYear(2029);
date.setMonth(11);
date.setDate(28);
// get* : 从当前⽇期对象中获取 时间成分 （年月日时分秒毫秒星期）
var year = date.getYear()+1900; //获取年份，相对于1900年
var year2 = date.getFullYear(); //获取公元纪年的年份
var month = date.getMonth()+1; //获取⽉份0-11
var d = date.getDate(); //获取⽇期
var hour = date.getHours(); //获取⼩时
var min = date.getMinutes(); //获取分钟
var sec = date.getSeconds(); //获取秒
var ms = date.getMilliseconds();//获取毫秒
var day = date.getDay(); //获取星期
var timeStr = year+"年"+month+"⽉"+d+"⽇ "+hour+":"+min+":"+sec+" "
console.log(timeStr);
}
</script>
</body>
</html>

二、进阶用法

1、BOM 浏览器对象模型

1.1 window 对象中的属性

closed  返回窗口是否已被关闭
defaultStatus   设置或返回窗口状态栏中的默认文本
document    对 Document 对象的只读引用
frames  返回窗口中所有已经命名的框架集合，集合由 Window 对象组成，每个 Window 对象在窗口中含有一个 <frame> 或 <iframe> 标签
history 对 History 对象的只读引用，该对象中包含了用户在浏览器中访问过的 URL
innerHeight 返回浏览器窗口的高度，不包含工具栏与滚动条
innerWidth  返回浏览器窗口的宽度，不包含工具栏与滚动条
localStorage    在浏览器中以键值对的形式保存某些数据，保存的数据没有过期时间，会永久保存在浏览器中，直至手动删除
length  返回当前窗口中 <iframe> 框架的数量
location    引用窗口或框架的 Location 对象，该对象中包含当前 URL 的有关信息
name    设置或返回窗口的名称
navigator   对 Navigator 对象的只读引用，该对象中包含当前浏览器的有关信息
opener  返回对创建此窗口的 window 对象的引用
outerHeight 返回浏览器窗口的完整高度，包含工具栏与滚动条
outerWidth  返回浏览器窗口的完整宽度，包含工具栏与滚动条
pageXOffset 设置或返回当前页面相对于浏览器窗口左上角沿水平方向滚动的距离
pageYOffset 设置或返回当前页面相对于浏览器窗口左上角沿垂直方向滚动的距离
parent  返回父窗口
screen  对 Screen 对象的只读引用，该对象中包含计算机屏幕的相关信息
screenLeft  返回浏览器窗口相对于计算机屏幕的 X 坐标
screenTop   返回浏览器窗口相对于计算机屏幕的 Y 坐标
screenX 返回浏览器窗口相对于计算机屏幕的 X 坐标
sessionStorage  在浏览器中以键值对的形式存储一些数据，数据会在关闭浏览器窗口或标签页之后删除
screenY 返回浏览器窗口相对于计算机屏幕的 Y 坐标
self    返回对 window 对象的引用
status  设置窗口状态栏的文本
top 返回最顶层的父窗口

1.2 window 对象中的方法

alert() 在浏览器窗口中弹出一个提示框，提示框中有一个确认按钮
atob()  解码一个 base-64 编码的字符串
btoa()  创建一个 base-64 编码的字符串
blur()  把键盘焦点从顶层窗口移开
clearInterval() 取消由 setInterval() 方法设置的定时器
clearTimeout()  取消由 setTimeout() 方法设置的定时器
close() 关闭某个浏览器窗口
confirm()   在浏览器中弹出一个对话框，对话框带有一个确认按钮和一个取消按钮
createPopup()   创建一个弹出窗口，注意：只有 IE 浏览器支持该方法
focus() 使一个窗口获得焦点
getSelection()  返回一个 Selection 对象，对象中包含用户选中的文本或光标当前的位置
getComputedStyle()  获取指定元素的 CSS 样式
matchMedia()    返回一个 MediaQueryList 对象，表示指定的媒体查询解析后的结果
moveBy()    将浏览器窗口移动指定的像素
moveTo()    将浏览器窗口移动到一个指定的坐标
open()  打开一个新的浏览器窗口或查找一个已命名的窗口
print() 打印当前窗口的内容
prompt()    显示一个可供用户输入的对话框
resizeBy()  按照指定的像素调整窗口的大小，即将窗口的尺寸增加或减少指定的像素
resizeTo()  将窗口的大小调整到指定的宽度和高度
scroll()    已废弃。您可以使用 scrollTo() 方法来替代
scrollBy()  将窗口的内容滚动指定的像素
scrollTo()  将窗口的内容滚动到指定的坐标
setInterval()   创建一个定时器，按照指定的时长（以毫秒计）来不断调用指定的函数或表达式
setTimeout()    创建一个定时器，在经过指定的时长（以毫秒计）后调用指定函数或表达式，只执行一次
stop()  停止页面载入
postMessage()   安全地实现跨源通信

2、DOM⽂档对象模型

2.1 流操作

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>document对象</title>
</head>
<body>
<button onclick="testDocument()">测试document对象</button>
<script type="text/javascript">
function testDocument(){
//write : 通过⽹⻚输出流将数据输出并显⽰到⽹⻚中
// 如果执⾏多次write函数使⽤的是同⼀个流，则输出的数据会追
// 如果多次write使⽤的是不同的流，后⾯write的内容会覆盖之
document.write("从前有座⼭");
document.write("⼭⾥有座庙");
//close: 关闭当前⽹⻚输出流，关闭之后如果执⾏write，则会打开新的流
document.close();
//open ：打开并使⽤⼀个新的流
document.open();
document.write("庙⾥有...");
//writeln
}
</script>
</body>
</html>

2.2 获取网页的元素

function test1(){
//getElementById：根据标签的id属性获取⼀个元素
var e = document.getElementById("img2");
//getElementsByName：根据标签的name属性获取⼀组元素
var es = document.getElementsByName("m1");
//getElementsByClassName：根据标签的class属性获取⼀组元素
var es2 = document.getElementsByClassName("cc");
//getElementsByTagName：根据标签名获取⼀组元素
var es3 = document.getElementsByTagName("p");
console.log(es3);

2.3 标签节点的属性操作

//1.创建标签节点
var imgTag = document.createElement("img"); //<img>
//-------------------------------------------------------------begin
//2.创建属性节点
var srcAttr = document.createAttribute("src"); // src=""
srcAttr.nodeValue = "imgs/img01.png"; // src="imgs/img01.png"
//3.将属性节点添加到标签节点中
imgTag.setAttributeNode(srcAttr); // <img src="imgs/img01.p
//4.给标签节点添加/修改属性
imgTag.setAttribute("src","imgs/img02.png");
imgTag.setAttribute("width","200");
imgTag.alt = "图⽚⽆法显⽰";
//5.从标签节点上移出⼀个属性
imgTag.removeAttribute("alt");

2.4 拼接和插入节点

body.appendChild(imgTag) //拼接，在后面追加
body.insertBefore(imgTag,btnTag);//插入

3、 JavaScript事件

3.1 JS事件绑定(onclick位置变化)

3.1.1 html内联绑定：

<button onclick="test1()">测试按钮1</button>
<script type="text/javascript">
function test1(){
console.log("------------test1");
}
</script>

3.1.2 JS脚本外联绑定：

<button id="btn2">测试按钮2</button>
<script type="text/javascript">
var btn2 = document.getElementById("btn2");
btn2.onclick = function(){
console.log("------------test2");
}
</script>

3.2 HTML常用事件

⿏标事件
键盘事件（表单标签）
window事件
表单事件

3.2.1 鼠标事件

onclick 单击
ondblclick 双击
onmouseover ⿏标移动到HTML元素上
onmouseout ⿏标从HTML元素上移⾛
onmousemove ⿏标在HTML元素上移动
onmousedown ⿏标在HTML元素上左键按下
onmouseup ⿏标在HTML元素上左键松开

3.2.2 键盘事件

onkeydown 键盘按键按下（如果按下去不松开则⼀直触发）
onkeyup 键盘按键抬起
onkeypress 键盘按键按下(只⽀持字符键)

3.2.3 window事件

//onload ： 当⽹⻚中body标签内容加载完毕触发
window.onload = function(){
console.log("------onload");
}
//onunload ： 当前⽹⻚关闭或刷新时执⾏，⽤于回收资源
window.onunload = function(){
console.log("------onunload");
}
//onscroll ：当⽹⻚发⽣滚动时触发执⾏
window.onscroll = function(){
console.log("------onscroll");
}
//onresize ：窗⼝的尺⼨发⽣变化时触发
window.onresize = function(){
console.log("------onscroll");
}

3.2.4 表单事件

onfocus 获取焦点
onblur 失去焦点
onchange 内容发⽣改变
onselect 内容被选中
onsubmit 表单提交（必须绑定在form元素上）
onreset 重置表单（必须绑定在form元素上）

三、实践操作

1、基础操作以及身份证校验

1.1 基础操作：

（1）求和差积商

（2）输入日期，计算是某年的的第几天

（3）99乘法表

（4）正则表达式

（5）流的使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="../js/test.js"></script>
  <script>
    window.onload=function (){ console.log("loading...")}
    window.onscroll=function (){console.log("scrolling...")}
    window.onresize=function (){console.log("resizing...")}
  </script>
</head>
<body>
<form>
  <input type="button" value="clickMe1" onclick="test01();"></input>
  <input type="button" value="clickMe2" onclick="test02();"></input>
  <input type="button" value="clickMe3" onclick="test03();"></input>
  <input id="666" type="button" value="clickMe4"></input>
  <input id="888" type="button" value="校验"></input>
  <input type="button" value="开启延时" onclick="delayTask();"></input>
  <input type="button" value="开启循环" onclick="loopTask();"></input>
  <input type="button" value="关闭循环" onclick="closeLoopTask();"></input>
</form>
<from action="" onsubmit="return validate()"><label>表单2</label>
  输入身份证：<input type="text" id="myId">
  备注信息：<textarea  id="note" cols="15" rows="1.5"></textarea>
<input type="button" value="使用document获取元素" onclick="testDocument();"></input>
  <input type="submit/">
</from>
</body>
  <script>
    document.getElementById("888").onclick=function validate(){
      let myId = document.getElementById("myId").value;
      let regId=new RegExp("[0-9]{17}[0-9,X]");
      let result = regId.test(myId);
      if(!result){
        alert("身份证格式错误")
        return false;
      }

      let note =document.getElementById("note").value;
      if(note==null || note==""){
        alert("备注有误")
        return false;
      }
      return alert("校验成功");
    }

    document.getElementById("666").onclick= function (){
      alert("666666！")
      console.log("666")
    }
  </script>
</html>

//求和差积商
function test01(a,b){
  console.log(a+"和"+b+"的差为"+(a-b));
  console.log(a+"和"+b+"的积为"+(a*b));
  console.log(a+"和"+b+"的商为"+(a/b));
}

//计算输入的哪年的第几天
function test02(y,m,d){
  var sum = 0;//记录总天数
  switch (m-1){//由月份计算，利用case穿透的特点
    case 11:sum += 30;
    case 10:sum += 31;
    case 9:sum += 30;
    case 8:sum += 31;
    case 7:sum += 31;
    case 6:sum += 30;
    case 5:sum += 31;
    case 4:sum += 30;
    case 3:sum += 31;
    case 2:sum += 28;
    case 1:sum += 31;
    case 0:sum += d;
  }
  if(m > 2) {
    if (y % 400 == 0 || y % 4 == 0 && y % 100 != 0) {
      sum++;
    }
    console.log("这是"+y+"年的第"+sum+"天")
  }
  }



//99乘法表
function test03(){
  document.write("<table>");
  for (var i = 1; i < 10; i++) {
    document.write("<tr>");
    for (var j = 1; j <= i; j++) {
      document.write("<td style='border: 3px solid brown;'>");//设置元素边框border，颜色是brown
      document.write(j + " * " + i + " = " + i * j + " ");
      document.write("</td>");
    }
    document.write("<br>");
    document.write("</tr>");
  }
  document.write("</table>");
}

//switch 的使用
function myObj() {
  var people = {
    id: "10086",
    name: "Yaof",
    sport: function () {
      switch (num) {
        case 1:
          console.log("我在打篮球");
          break;
        case 2:
          console.log("我在踢足球");
          break;
        default:
          return 0;
      }
      return this.sport();
    }

  };
}

//使用正则表达式进行身份验证
function test04(){
  var regExp = new RegExp("^//d{6}[1900-2022][01-12][01-31][000-999][0-9x-z]$");
  var inPut = parseInt(prompt("请输入身份证证号："));
  var id = inPut;
  var flag = regExp.test(id);
  if(flag==ture){
    prompt("身份证正确！");
}else {
    prompt("身份证格式错误！");
  }
}

//window交互及流的使用
var i=0;
var task;
function delayTask(){
  window.setTimeout("action()",1000)
}
function action(){
  console.log(i++);
  if(i==500){
    window.clearInterval(task);
  }
}
function loopTask(){
  task = window.setInterval("action()",10);
}
function closeLoopTask(){
  window.clearInterval(task);
}
function testDocument(){
  document.write("hello!"+"<br>");
  document.write("hello!");
  document.close();
}

/*let imgTag = document.createElement("img");
let srcAttr = document.createAttribute("src"); // src=""
srcAttr.nodeValue = "../img/0.jpg"; // src="../img/0.jpg"
//3.将属性节点添加到标签节点中
imgTag.setAttributeNode(srcAttr);*/

2、省市选择栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>地址选择</title>
</head>
<body onload="initProvince();initCity();">
<form>
  <label>省份</label>
  <select id="province" onchange="showCity();"></select>
  <label>城市</label><select id="city" onchange="showCountry()"></select>
<!--  <label>区县</label><select id="country"></select>-->
</form>
<script src="../js/test03.js"></script>
</body>
</html>

let province = ["北京","上海","安徽","浙江"]
let city = [["北京"],["上海"],["合肥","滁州","宿州","蚌埠"],["杭州","湖州","宁波"]]
// let country = [[["北京一区"],["北京二区"],["北京三区"]],[["上海一区"],["上海二区"],["上海三区"]],[["蜀山区","瑶海区","包河区"],["琅琊区","明光市"],["埇桥区"]],[["西湖区","余杭区"]]]
function showCity(){
  let p = document.getElementById("province")
  p.selectedIndex;
  let result=city[p.selectedIndex]
  let c = document.getElementById("city")

  c.options.length=0;
  for (let i = 0; i < result.length; i++) {
    let option = document.createElement("option")
    option.value = result[i];
    option.text = result[i];
    c.appendChild(option);
  }


  // document.getElementById("city").selectedIndex = p.selectedIndex
}
/*function showCountry() {
  let p = document.getElementById("city")
  p.selectedIndex;
  let result = country[p.selectedIndex]
  let cty = document.getElementById("country")

  cty.options.length = 0;
  for (let i = 0; i < result.length; i++) {
    let option = document.createElement("option")
    option.value = result[i];
    option.text = result[i];
    c.appendChild(option);
  }
}*/

function initProvince(){
  //省下拉
  let p = document.getElementById("province")
  //下拉项
  for (let i = 0; i <province.length ; i++) {
    let option = document.createElement("option")
    option.value=i
    option.text=province[i]
    //添加到省的下拉列表中
    p.appendChild(option)
  }

}
function initCity(){
  //市下拉
  let p = document.getElementById("city")

  //下拉项
  for (let i = 0; i <city.length ; i++) {
    let option = document.createElement("option")
    option.value=i
    option.text=city[i]
    //添加到省的下拉列表中
    p.appendChild(option)
  }
}

/*
function initCountry(){
  //区下拉
  let p = document.getElementById("country")

  //下拉项
  for (let i = 0; i <country.length ; i++) {
    let option = document.createElement("option")
    option.value=i
    option.text=country[i]
    //添加到市的下拉列表中
    p.appendChild(option)
  }
}
*/

3、用户注册校验

包括用户名、密码、确认密码、手机号码、邮箱

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>用户注册</title>
  <link href="DataValidation.css" rel="stylesheet">
  <script src="../js/DataValidation.js"></script>
</head>
<body>
<!-- fieldset新增边框 -->
<fieldset>
<h1>用户注册-数据校验</h1>
<form>
  <hr>
  <div>
    <label>
      <input id="userName" type="text"  placeholder="用户名" ></input>
    </label>
  </div>
  <div>
    <label>
      <input id="password1" type="password"  placeholder="密码"></input>
    </label>
  </div>
  <div>
    <label>
      <input id="password2" type="password"  placeholder="确认密码"></input>
    </label>
  </div>
  <div>
    <label>
      <input id="tel" type="tel"   placeholder="手机号码"></input>
    </label>
  </div>
  <div>
    <label>
      <input id="email" type="email" placeholder="邮箱"></input>
    </label>
  </div>
  <div>
    <button onclick="validation()">提交</button>
  </div>
</form>
</fieldset>
</body>
</html>


body{
  text-align: center;!important;
  margin: 0;
}

input{
  border: 0;
  background: #cccccc;
  border-radius: 20px;
  margin-top:10px;
  height: 40px;
  width: 200px;
  padding: 0 20px 0 20px;
  font-size: 16px;

}
input:focus{
  /*轮廓为0*/
  outline: 0;
}


button{
  border: 0;
  background: #4d8bd5;
  border-radius: 20px;
  margin-top:20px;
  height: 40px;
  width: 200px;
  padding: 0 20px 0 20px;
  font-size: 16px;
  color: white;
  box-shadow: 2px 2px 2px #7575ef;
}
button:focus{
  outline:0;
  background: #0248fc;
}
button:hover{
  color: #505f85;
}
fieldset{
  height: 500px;
  /*设置文字居中*/
  margin:auto;
  color: #202123;
}

.illegal-input{
  border: red 1px solid !important;
  box-shadow: 0 0 5px red;
}

function validation() {
  //账号校验
  let userName = document.getElementById("userName").value;
  let um = new RegExp("[0-9a-zA-z]{8,20}$");
  if (!um.test(userName)) {
     alert("账号格式出错")
    return;
  }

  //密码校验
  let pwd1 = document.getElementById("password1").value;
  let pwd2 = document.getElementById("password2").value;
  let pd = new RegExp("^[0-9a-zA-z]{8,16}$");
  if (!pd.test(pwd1)) {
    alert("密码格式出错")
    return;
  }else if (!(pwd1 == pwd2)) {
    alert("密码不一致")
    return;
  }

  //手机号校验
  let tel = document.getElementById("tel").value;
  let tl = new RegExp("^1[3456789][0-9]{9}$");
  if (!tl.test(tel)) {
    alert("手机号码格式出错")
    return;
  }

  //邮箱校验
  let email = document.getElementById("email").value;
  let em = new RegExp("^[0-9a-zA-z]+@[0-9a-zA-z]+.[0-9a-zA-z]+$");
  if (!em.test(email)) {
    alert("邮箱格式出错")
    return;
  }
  alert("校验成功，数据正确！")
  return;
}

4、计算器的实现：

4.1 初步架构图：

4.2 具体实现：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>计算器</title>
  <link rel="stylesheet" href="myCalculator.css">
</head>
<body>
<fieldset style="width:300px;height: 500px;background:linear-gradient(to right, #e9eacd, #e89dae);margin: auto">
  <h1 style="padding: 0 100px 0 110px">计算器</h1>
  <div>
    <input  id="result" readonly="readonly" placeholder="0">
  </div>
  <div style="margin-left: 10px">
  <button onclick="clearValue()" class="span-two" value="AC" style="width: 145px">AC</button>
  <button onclick="get(this.value)" class="symbol" id="%" value="%">%</button>
  <button onclick="get(this.value)" class="symbol" id="/" value="/">/</button><br>
  <button onclick="get(this.value)" class="number" id="7" value="7">7</button>
  <button onclick="get(this.value)" class="number" id="8" value="8">8</button>
  <button onclick="get(this.value)" class="number" id="9" value="9">9</button>
  <button onclick="get(this.value)" class="symbol" id="×" value="*">×</button><br>
  <button onclick="get(this.value)" class="number" id="4" value="4">4</button>
  <button onclick="get(this.value)" class="number" id="5" value="5">5</button>
  <button onclick="get(this.value)" class="number" id="6" value="6">6</button>
  <button onclick="get(this.value)" class="symbol" id="-" value="-">-</button><br>
  <button onclick="get(this.value)" class="number" id="1" value="1">1</button>
  <button onclick="get(this.value)" class="number" id="2" value="2">2</button>
  <button onclick="get(this.value)" class="number" id="3" value="3">3</button>
  <button onclick="get(this.value)" class="symbol" id="+" value="+">+</button><br>
  <button onclick="get(this.value)" class="number" id="0" value="0">0</button>
  <button onclick="get(this.value)" class="symbol" id="." value=".">.</button>
  <button onclick="calculate()" class="calculate" id="=" value="=" style="width: 145px">=</button>
  </div>
  </fieldset>
<script src="../js/myCalculator.js"></script>
</body>
</html>

button{
  margin-top:10px;
  width: 70px;
  height: 50px;
  background: #e7d6ad;
}

button:focus{
  outline:0;
  background: #f3c86d;
}
button:hover{
  background: #e5e5c9;
}

input{
  width: 200px;
  height: 50px;
  margin: 0 50px 20px 55px;
  background: #f6f6e5;
  text-align: center;
  font: bold 20px Arial;
}

body {
  margin: 0;
  padding: 0;
  background: linear-gradient(to right, #CBCE91FF, #EA738DFF);
}
.calculator-grid {
  display: grid;
  justify-content: center;
  align-content: center;
  min-height: 100vh;
  grid-template-columns: repeat(4, 100px);
  grid-template-rows: minmax(120px, auto) repeat(5, 100px);
}

.calculator-grid > button {
  cursor: pointer;
  font-size: 2rem;
  border: 1px solid #FFFFFF;
  outline: none;
  background-color: rgba(255, 255, 255, 0.75);
}

.calculator-grid > button:hover {
  background-color: #a9a9a9;
}
/*.span-two {
  grid-column: span 2;
  color: #adf802;
  background-color: rgba(139, 0, 139, 0.8);
}*/

function clearValue(){
  document.getElementById("result").value="";
}
function get(value){
  document.getElementById("result").value+=value;
}
function calculate(){
  let result=0;
  result=document.getElementById("result").value;
  document.getElementById("result").value=result+"="+eval(result);
};

具体的项目信息请参考：(8条消息) JavaScript练习与提升_Ifeng_iPhone的博客-CSDN博客