js快速进阶---面向对象&内置对象&继承&RegExp&JSON&BOM&随机点名Demo
JavaScript快速进阶
JavaScript面向对象
基于Java的面向对象。在JavaScript 中同样也有面向对象。思想类似。
类的定义和使用
定义格式和使用
class 类名{
constructor(变量列表){
变量赋值； 例如： this.name = name
}
方法名(参数列表){
方法体；
return 返回值；
}
}
//使用格式
let 对象名 = new 类名(实际变量值);
对象名.方法名();
对象名.变量名();
字面量定义类和使用
定义格式和使用
let 对象名 = {
变量名:变量值,
变量名:变量值,
...
方法名:function(参数列表){
方法体;
return 返回值;
}
}
对象名.方法名();
对象名.变量名();
两种方法的差异： 第一种传统的方式需要构造方法，根据传入的参数进行生成对象。第二种方式，将对象的定义和赋值合成一步了，里面的变量和方法都是被固定了的。
如果你只需要使用一次对象而且对象使用的地方和功能固定，那么可以使用字面量的方法进行创建。如果你要定义一种规范，具体的实现要根据环境而定，那么就使用第一种传统的方式定义一个类。
JavaScript的继承
继承概念：让类与类产生子父类的关系，子类可以使用父类有权限的成员。
继承关键字：extends
顶级父类：Object 所有类都直接或者间接的继承Object
在实际开发中，继承很少使用，而且JavaScript的继承几乎和Java一样。
JavaScript的内置对象
Set和Map内置对象为了解内容
正则表达式RegExp
JSON
JSON(JavaScript Object Notation)：是一种轻量级的数据交换格式。
它是基于 ECMAScript 规范的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。
简洁和清晰的层次结构使得JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于计算机解析和 生成，并有效的提升网络传输效率。
let myJson = {
"name":"zhangsan",
"age":18
}
//定义天气对象
let weather = {
city : "北京",
date : "2088-08-08",
wendu : "10° ~ 23°",
shidu : "22%"
};
//1.将天气对象转换为JSON格式的字符串
let str = JSON.stringify(weather);
document.write(str + "
");
//2.将JSON格式字符串解析成JS对象
let weather2 = JSON.parse(str);
document.write("城市：" + weather2.city + "
");
document.write("日期：" + weather2.date + "
");
document.write("温度：" + weather2.wendu + "
");
document.write("湿度：" + weather2.shidu + "
");
BOM
BOM(Browser Object Model)：浏览器对象模型。
将浏览器的各个组成部分封装成不同的对象，方便我们进行操作。
windows窗口对象
定时器
唯一标识 setTimeout(功能，毫秒值)：设置一次性定时器。
clearTimeout(标识)：取消一次性定时器。
唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
clearInterval(标识)：取消循环定时器。
加载事件
window.onload：在页面加载完毕后触发此事件的功能。
Location地址栏对象
时器。
clearTimeout(标识)：取消一次性定时器。
唯一标识 setInterval(功能，毫秒值)：设置循环定时器。
clearInterval(标识)：取消循环定时器。
加载事件
window.onload：在页面加载完毕后触发此事件的功能。
Location地址栏对象
href 属性 ：就是浏览器的地址栏。我们可以通过为该属性设置新的URL，使浏览器读取并显示新的URL 的内容。
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
<style type="text/css">
table {
border: 1;
text-align: center;
margin: 0 auto;
}
caption {
margin: 100px auto;
}
td {
width: 50px;
background-color: hotPink;
padding: 10px 20px;
}
div {
width: 300px;
margin-left: -150px;
margin-top: 100px;
padding-left: 50%;
text-align: center;
}
style>
head>
<body>
<div id="time">div>
<table>
<caption>随机点名器caption>
<tbody id="tb">
tbody>
table>
<div>
<button id="btn1">开始button>
<button id="btn2">结束button>
div>
body>
<script src="js/jquery-3.3.1.min.js">script>
<script>
let names = [
"肖绍霆"
,"文鑫"
,"向贞好"
,"胥员员"
,"李勇"
,"熊明"
,"杜凯"
,"熊国良"
,"付帅"
,"龚文曦"
,"吴世林"
,"李鹏"
,"宋小明"
,"黄海"
,"曾光鹏"
,"墙世川"
,"幸勇"
,"彭清亮"
,"杨崇鑫"
,"王一舟"
,"汪家鹏"
,"高茂鑫"
,"张松恒"
,"杨海峰"
,"付杨恒"
,"唐浩翔"
,"张攀"]
//根据数组长度，循环生成 表格。
let myTbody = document.getElementById("tb");
for(let i = 0; i<names.length ; i++){
if(i%7 == 0){ //设置每一行多少个
myTr = document.createElement("tr");
myTbody.appendChild(myTr);
}
let myTd = document.createElement("td");
myTd.innerText=names[i];
myTr.appendChild(myTd);
}
//产生随机数的函数
function myRondom(len){
return Math.floor(Math.random()*len);
}
//存放定时器地址
let timeId ;
let romTd;
//标志位，代表进入定时器，解决越点越快的bug
let flag = 1;
document.getElementById("btn1").onclick=function(){
if(flag == 1){
flag--;
timeId = setInterval(function(){
//清除上一个td的背景色,直接获取所有td，将所有td颜色重置
//$("td").css("background-color","hotPink");
let allTd = document.getElementsByTagName("td");
for(let i = 0 ; i < allTd.length ; i++){
allTd[i].style.backgroundColor="hotPink";
}
//根据随机数获取td
romTd = document.getElementsByTagName("td")[myRondom(names.length)];
romTd.style.backgroundColor="lightYellow";
},150);
}
}
document.getElementById("btn2").onclick=function(){
//清除定时器
flag++;
clearInterval(timeId);
}
//实时显示时间
window.onload=function(){
let myTime = document.getElementById("time")
setInterval(function(){
let localTime = new Date().toLocaleString();
myTime.innerText = localTime;
},1000)
}
script>
html>