慧河第二次培训

Asitwas

已于 2022-10-30 02:29:20 修改

阅读量200

点赞数 2

文章标签：学习前端 javascript css html

于 2022-10-30 02:29:08 首次发布

本文链接：https://blog.youkuaiyun.com/Asitwas/article/details/127585074

版权

慧河第二次培训

CSS补充

一，CSS颜色渐变效果

在我们制作html网页时，经常要使用到颜色渐变的的色彩效果，这个效果主要要通过css来实现，而css中的颜色渐变则分为线性渐变与径向渐变两种。

1，线性渐变

（1）从上到下（默认）

<!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>
    <div class="hezi"></div>
</body>
<style>
    .hezi{
        height: 200px;
        width: 200px;
        background-image: linear-gradient(green,yellow);
    }
</style>
</html>

效果：

（2）从左到右

<!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>
    <div class="hezi"></div>
</body>
<style>
    .hezi{
        height: 200px;
        width: 200px;
        background-image: linear-gradient(to right,green,yellow);
    }
</style>
</html>

效果：

那除了从左到右，我们可不可以通过将right改成left实现从右到左的效果呢？

<!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>
    <div class="hezi"></div>
</body>
<style>
    .hezi{
        height: 200px;
        width: 200px;
        background-image: linear-gradient(to left,green,yellow);
    }
</style>
</html>

效果：
事实证明是可以的

（3）对角线

对角线渐变可以通过在to后输入两个方向词来实现

<!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>
    <div class="hezi"></div>
</body>
<style>
    .hezi{
        height: 200px;
        width: 200px;
        background-image: linear-gradient(to right bottom,green,yellow);
    }
</style>
</html>

效果：
方向词最多输入不同径向上的两个

（4）更多角度

<!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>
    <div class="hezi"></div>
</body>
<style>
    .hezi{
        height: 200px;
        width: 200px;
        background-image: linear-gradient(0deg,green,yellow);
    }
</style>
</html>

效果
在这里插入图片描述

<!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>
    <div class="hezi"></div>
</body>
<style>
    .hezi{
        height: 200px;
        width: 200px;
        background-image: linear-gradient(135deg,green,yellow);
    }
</style>
</html>

效果：

（四）使用数字或百分号控制渐变

使用数字控制渐变

<!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>
    <div class="hezi"></div>
</body>
<style>
    .hezi{
        height: 200px;
        width: 200px;
        background-image: linear-gradient(blue 80px,green 160px,yellow 200px);
    }
</style>
</html>

效果：

使用百分号控制渐变

<!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>
    <div class="hezi"></div>
</body>
<style>
    .hezi{
        height: 200px;
        width: 200px;
        background-image: linear-gradient(blue 10%,green 50%,yellow);
    }
</style>
</html>

效果：
（在这里转学姐的注释）这里面第一个颜色百分号前面的数字表示的是颜色条在整个区域中所占的比例。最后一个颜色前面的数字是指该颜色条的初始位置在区域中的位置，以及该位置以后的区域都为该颜色。中间的颜色前面的数字所表示的是该颜色条在区域当中的位置。

（五）重复线性渐变:repeating-linear-gradient() 函数

这里给出代码和效果，具体实现方法与上面类似

数字

<!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>
    <div class="hezi"></div>
</body>
<style>
    .hezi{
        height: 200px;
        width: 200px;
        background-image: repeating-linear-gradient(blue 30px,green 60px,yellow 90px);
    }
</style>
</html>

效果：

在这里插入图片描述

百分率

<!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>
    <div class="hezi"></div>
</body>
<style>
    .hezi{
        height: 200px;
        width: 200px;
        background-image: repeating-linear-gradient(blue 10%,green 20%,yellow 30%);
    }
</style>
</html>

效果：

二，CSS盒子阴影效果

这里找了张图，来自优快云社区的ZhaoYLi，鸣谢
请添加图片描述
再附学姐的解释：
box-shadow：[左右阴影偏移距离(px)] [上下阴影偏移距离(px)] [模糊程度(px)] [模糊距离(px)] [颜色]
[左右阴影偏移距离(px)] ---- 正数-阴影偏向盒子右端，负数-阴影偏向盒子左端
[上下阴影偏移距离(px)] ---- 正数-阴影偏向盒子下端，负数-阴影偏向盒子上端
[模糊程度(px)] ---- 数值越大-表示盒子阴影的模糊程度越高，负数-阴影模糊程度越小
[模糊距离(px)] ---- 数值越大-模糊的范围就越大
[颜色] ---- 设置模糊颜色

注：
1，至少设置两个长度值，分别表示阴影的水平偏移量和垂直偏移量，可以为负；
2，模糊值是设定阴影的模糊效果的宽度，可以不设置，则默认为0；
3，外延值是设定阴影再“扩大”的宽度，可以不设置，则默认为0；
4，inset表示设置“内阴影”，可以不设置，则默认为外阴影。
（感觉这样比我用我贫乏的语言组织能力来说效果好得多）

然后我来自己实现一下

<!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>
    <div class="hezi"></div>
</body>
<style>
    .hezi{
        height: 200px;
        width: 200px;
        background: greenyellow;
        box-shadow: 10px 10px 20px 10px yellow; 
    }
</style>
</html>

效果：

使用inset可以实现内阴影

<!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>
    <div class="hezi"></div>
</body>
<style>
    .hezi{
        height: 200px;
        width: 200px;
        background: greenyellow;
        box-shadow: 10px 10px 20px 10px yellow inset; 
    }
</style>
</html>

效果：

三，滚动条scroll（自己了解）

由于类型过多，在这里就不逐一实现了

<!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>
    <div id="hezi">
        11111111111111111111111111
        1111111
        111111111111111111
        111111111111
        111111111111111
        11111111
        11111111111111111111111111111111111111111111111111111111111
        1111111111111111111111111
        1111111111
        111111
        1111111111111
        11111111111111111111111
        11111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111
    </div>
    
</body>
<style>
    #hezi{
        width: 150px;
        height: 150px;
        overflow-y: scroll;
        overflow-x: scroll;
        background: thistle;
    }
</style>
</html>

效果：

另外，滚动条还有很多属性
（这里又是一波转载摘自优快云 Ryan_鲸落）

scrollbar-3d-light-color立体滚动条亮边的颜色（设置滚动条的颜色）
scrollbar-arrow-color上下按钮上三角箭头的颜色
scrollbar-base-color滚动条的基本颜色
scrollbar-dark-shadow-color立体滚动条强阴影的颜色
scrollbar-face-color立体滚动条凸出部分的颜色
scrollbar-highlight-color滚动条空白部分的颜色
scrollbar-shadow-color立体滚动条阴影的颜色
**HTML各种滚动属性代码**
<marquee>普通卷动</marquee> <br />   
<marquee behavior=slide>滑动</marquee>  <br />  
<marquee behavior=alternate>来回卷动 </marquee><br /> 
<marquee direction=down>向下卷动</marquee> <br /> 
<marquee direction=up>向上卷动</marquee> <br /> 
<marquee direction=right>向右卷动</marquee> <br /> 
<marquee direction=left>向左卷动</marquee> <br /> 
<marquee loop=2>卷动次数</marquee> <br />   
<marquee scrollamount=30>设定卷动距离</marquee> <br /> 
**html滚动条颜色设置方法介绍**
scrollbar-arrow-color: color; /*三角箭头的颜色*/
scrollbar-face-color: color; /*立体滚动条的颜色（包括箭头部分的背景色）*/
scrollbar-3dlight-color: color; /*立体滚动条亮边的颜色*/
scrollbar-highlight-color: color; /*滚动条的高亮颜色（左阴影？）*/
scrollbar-shadow-color: color; /*立体滚动条阴影的颜色*/
scrollbar-darkshadow-color: color; /*立体滚动条外阴影的颜色*/
scrollbar-track-color: color; /*立体滚动条背景颜色*/
scrollbar-base-color: color; /*滚动条的基色*/
**webkit不再是用简单的几个CSS属性，而是一坨的CSS伪元素**
-webkit-scrollbar 滚动条整体部分
-webkit-scrollbar-button 滚动条两端的按钮
-webkit-scrollbar-track 外层轨道
-webkit-scrollbar-track-piece 内层轨道，滚动条中间部分（除去）
-webkit-scrollbar-thumb （拖动条）
-webkit-scrollbar-corner 边角
-webkit-resizer 定义右下角拖动块的样式

说实话，有的地方还没理解透，先记着吧

控制台

浏览器中的控制台（附某网站的控制台）

某网站的控制台

控制台的简单使用

let 变量名=值；（let声明的变量可以多次被赋值）

const 常量名=值； (常量，只能赋值一次，但引用值内容可以改变)

var 变量名=值；（变量名=值；…） var声明的变量可以被多次赋值，容易出现作用域问题，可以同时声明多个变量

console 访问变量 console.log（）；

简单应用下：

再有：

还有：

JavaScript的学习

这里JavaScript的学习主要借助的是w3school网站

一，JavaScript 输出

1，JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：
1、使用 window.alert() 写入警告框
2、使用 document.write() 写入 HTML 输出
3、使用 innerHTML 写入 HTML 元素
4、使用 console.log() 写入浏览器控制台

2，使用 innerHTML

使用document.getElementById(id)可以在JavaScript中访问HTML元素

<!DOCTYPE html>
<html>
<body>
<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
</body>
</html>

效果：

3，使用 document.write()

document.write()使用比较方便，但由于在HTML文档完全加载后使用document.write()将删除所有已有的HTML，所以document.write()多出于测试目的使用

<!DOCTYPE html>
<html>
<body>
<h2>我的第一张网页</h2>
<p>我的第一个段落。</p>
<script>
document.write(5 + 6);
</script>
</body>
</html>

效果：

3，使用 window.alert()

window.alert()会能够使用警告框来显示数据

<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
window.alert(5 + 6);
</script>
</body>
</html>

效果：

4，使用 console.log()

使用浏览器控制台显示数据

\<!DOCTYPE html>
<html>
<body>
<h1>我的第一张网页</h1>
<p>我的第一个段落</p>
<script>
console.log(5 + 6);
</script>
</body>
</html>

效果：

二，JavaScript 语句

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 语句</h2>
<p><b>JavaScript 程序</b> 是一系列由计算机执行的 <b>语句</b>。</p>
<p id="demo"></p>
<script>
var x, y, z;  // 语句 1
x = 22;        // 语句 2
y = 11;        // 语句 3
z = x + y;    // 语句 4
document.getElementById("demo").innerHTML =
"z 的值是" + z + "。";  
</script>
</body>
</html>

效果：

1，JavaScript 程序

计算机程序是由计算机“执行”的一系列“指令”。
在编程语言中，这些编程指令被称为语句。
JavaScript 程序就是一系列的编程语句。
注释：在 HTML 中，JavaScript 程序由 web 浏览器执行。

2，JavaScript 语句

JavaScript 语句由以下构成：
值、运算符、表达式、关键词和注释。
这条语句告诉浏览器在 id=“demo” 的 HTML 元素中输出 “Hello Kitty.”

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 语句</h2>
<p>在 HTML 中，JavaScript 语句由浏览器执行。</p>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = "Hello Kitty.";
</script>
</body>
</html>

效果：

3，JavaScript 空白字符

JavaScript 会忽略多个空格。我们要向脚本添加空格，以增强可读性。
在运算符旁边（ = + - * / ）添加空格是个好习惯：

4，JavaScript 行长度和折行

为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。
如果 JavaScript 语句太长，对其进行折行的最佳位置是某个运算符

5，JavaScript 代码块

JavaScript 语句可以用花括号（{…}）组合在代码块中。
代码块的作用是定义一同执行的语句。

6，JavaScript 关键词

JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。
下面的表格列出了一部分关键词：

三，JavaScript 变量

1，JavaScript 变量

JavaScript 变量是存储数据值的容器。
在本例中，x、y 和 z 是变量：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>在本例中，x、y 以及 z 都是变量。</p>
<p id="demo"></p>
<script>
var x = 7;
var y = 8;
var z = x + y;
document.getElementById("demo").innerHTML =
"z 的值是：" + z;
</script>
</body>
</html>

效果：

2，JavaScript 标识符

所有 JavaScript 变量必须以唯一的名称的标识。
这些唯一的名称称为标识符。
标识符可以是短名称（比如 x 和 y），或者更具描述性的名称（age、sum、totalVolume）。
构造变量名称（唯一标识符）的通用规则是：

名称可包含字母、数字、下划线和美元符号
名称必须以字母开头
名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
名称对大小写敏感（y 和 Y 是不同的变量）
保留字（比如 JavaScript 的关键词）无法用作变量名称

提示：JavaScript 标识符对大小写敏感。

3，赋值运算符

在 JavaScript 中，等号（=）是赋值运算符，而不是“等于”运算符。
这一点与代数不同。下面的代码在代数中是不合理的：
x = x + 5
然而在 JavaScript 中，它非常合理：把 x + 5 的值赋给 x。
（计算 x + 5 的值并把结果放入 x 中。x 的值递增 5。）
注释：JavaScript 中的“等于”运算符是 ==。

4，JavaScript 数据类型

JavaScript 变量可存放数值，比如 100，以及文本值，比如 “Bill Gates”。
在编程中，文本值被称为字符串。
JavaScript 可处理多种数据类型，但是现在，我们只关注数值和字符串值。
字符串被包围在双引号或单引号中。数值不用引号。
如果把数值放在引号中，会被视作文本字符串。

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>字符串用引号包围。</p>
<p>数值不用引号包围。</p>
<p id="demo"></p>
<script>
var pi = 3.14;
var person = "Bill Gates";
var answer = 'How are you!';
document.getElementById("demo").innerHTML =
pi + "<br>" + person + "<br>" + answer;
</script>
</body>
</html>

5，声明（创建） JavaScript 变量

在 JavaScript 中创建变量被称为“声明”变量。
我们可以通过 var 关键词来声明 JavaScript 变量。
声明之后，变量是没有值的，我们可以使用等号赋值给变量。

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 变量</h1>
<p>创建一个变量，向其赋值，然后显示它：</p>
<p id="demo"></p>
<script>
var carName = "porsche";
document.getElementById("demo").innerHTML = carName;
</script>
</body>
</html>

效果：

6，JavaScript 算术

与代数类似，我们能够通过 JavaScript 变量进行算术运算，使用 = 和 + 之类的运算符：
如var x = 3 + 5 + 8;
字符串也可以使用加号，但是字符串将被级联：
如var x = "Bill" + " " + "Gates";
提示：如果把要给数值放入引号中，其余数值会被视作字符串并被级联。

四，JavaScript Let

1，全局作用域

全局（在函数之外）声明的变量拥有全局作用域。

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 全局作用域</h1>
<p>可以从任何脚本或函数中访问全局变量。</p>
<p id="demo"></p>
<script>
var carName = "porsche";
myFunction();
function myFunction() {
    document.getElementById("demo").innerHTML =
    "I can display " + carName;
}
</script>
</body>
</html>

效果：

全局变量可以在 JavaScript 程序中的任何位置访问。

2，函数作用域

局部（函数内）声明的变量拥有函数作用域。

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 局部作用域</h1>
<p>myFunction() 之外的 carName 未定义。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
    var carName = "porsche";
    document.getElementById("demo1").innerHTML =
    typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML =
typeof carName;
</script>
</body>
</html>

效果：

局部变量只能在它们被声明的函数内访问。

3，JavaScript 块作用域

通过 var 关键词声明的变量没有块作用域。
在块 {} 内声明的变量可以从块之外进行访问。
在 ES2015 之前，JavaScript 是没有块作用域的。
可以使用 let 关键词声明拥有块作用域的变量。
在块 {} 内声明的变量无法从块外访问：
如{ let x = 10; }
// 此处不可以使用 x

4，重新声明变量

使用 var 关键字重新声明变量会带来问题。
在块中重新声明变量也将重新声明块外的变量：

<!DOCTYPE html>
<html>
<body>
<h1>使用 let 声明变量</h1>
<p id="demo"></p>
<script>
var  x = 10;
// Here x is 10
{  
  let x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

效果：

使用 let 关键字重新声明变量可以解决这个问题。
在块中重新声明变量不会重新声明块外的变量：

<!DOCTYPE html>
<html>
<body>
<h1>使用 let 声明变量</h1>
<p id="demo"></p>
<script>
var  x = 10;
// Here x is 10
{  
  let x = 2;
  // Here x is 2
}
// Here x is 10
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

效果：

五，JavaScript Const

1，Const

通过 const 定义的变量与 let 变量类似，但不能重新赋值：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript const</h2>
<p>您无法更改原始值。</p>
<p id="demo"></p>
<script>
try {
  const PI = 3.141592653589793;
  PI = 3.14;
}
catch (err) {
  document.getElementById("demo").innerHTML = err;
}
</script>
</body>
</html>

效果：

2，块作用域

在块作用域内使用 const 声明的变量与 let 变量相似。,
在本例中，x 在块中声明，不同于在块之外声明的 x：

<!DOCTYPE html>
<html>
<body>
<h2>使用 const 声明变量</h2>
<p id="demo"></p>
<script>
var  x = 10;
// 此处 x 是 10
{  
  const x = 2;
  // 此处 x 是 2
}
// 此处 x 是 10
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

效果：

3，在声明时赋值

JavaScript const 变量必须在声明时赋值

六，JavaScript 运算符

1，赋值

<!DOCTYPE html>
<html>
<body>
<h1>= 运算符</h1>
<p id="demo"></p>
<script>
var x = 15;
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

效果：

2，加法

<!DOCTYPE html>
<html>
<body>
<h1>+ 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
var y = 8;
var z = x + y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

效果：

3，乘法

<!DOCTYPE html>
<html>
<body>
<h1>* 运算符</h1>
<p id="demo"></p>
<script>
var x = 7;
var y = 8;
var z = x * y;
document.getElementById("demo").innerHTML = z;
</script>
</body>
</html>

4，JavaScript 算数运算符

5，JavaScript 赋值运算符

6，JavaScript 字符串运算符

+ 运算符也可用于对字符串进行相加（concatenate，级联）。

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 运算符</h1>
<p>+ 运算符串联（相加）字符串。</p>
<p id="demo"></p>
<script>
var txt1 = "Bill";
var txt2 = "Gates";
document.getElementById("demo").innerHTML = txt1 + " " + txt2;
</script>
</body>
</html>

效果：

在这里插入图片描述

+= 赋值运算符也可用于相加（级联）字符串：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 运算符</h1>
<p>赋值运算符 += 串联字符串。</p>
<p id="demo"></p>
<script>
txt1 = "Hello ";
txt1 += "Kitty！";
document.getElementById("demo").innerHTML = txt1;
</script>
</body>
</html>

效果：

7，字符串和数字的相加

相加两个数字，将返回和，但对一个数字和一个字符串相加将返回一个字符串：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 运算符</h1>
<p>对数字和字符串相加，会返回字符串。</p>
<p id="demo"></p>
<script>
var x = 7 + 8;
var y = "7" + 8;
var z = "Hello" + 7;
document.getElementById("demo").innerHTML =
x + "<br>" + y + "<br>" + z;
</script>
</body>
</html>

效果：

8，JavaScript 比较运算符

9，JavaScript 逻辑运算符

10，JavaScript 类型运算符

七，JavaScript 算数

1，JavaScript 算数运算符

算术运算符对数值（文字或变量）执行算术运算。

2，加法

加法运算符（+）加数：

3，减法

减法运算符（-）减数。

4，乘法

乘法运算符（*）乘数。

5，除法

除法运算符（/）除数。

6，系数

系数运算符（%）返回除法的余数。

7，递增

递增运算符（++）对数值进行递增。

8，递减

递减运算符（–）对数值进行递减。

9，幂

取幂运算符（**）将第一个操作数提升到第二个操作数的幂。

<!DOCTYPE html>
<html>
<body>
<h1>** 运算符</h1>
<p id="demo"></p>
<script>
var x = 5;
document.getElementById("demo").innerHTML = x ** 2;
</script>
</body>
</html>

效果：

10，运算符优先级

运算符优先级（Operator precedence）描述了在算术表达式中所执行操作的顺序。

真多啊

八，JavaScript 数据类型

1，数据类型的概念

在编程过程中，数据类型是重要的概念。
为了能够操作变量，了解数据类型是很重要的。
如果没有数据类型，计算机就无法安全地解决这道题：
var x = 911 + "Porsche";
给 “Volvo” 加上 911 有意义吗？这么做会发生错误还是会产生一个结果？
JavaScript 会这样处理上面的例子：
var x = "911" + "Porsche";
当数值和字符串相加时，JavaScript 将把数值视作字符串。

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p>当数值和字符串相加时，JavaScript 将把数值视作字符串。</p>
<p id="demo"></p>
<script>
var x = 911 + "Porsche";
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

效果：

2，JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同变量可用作不同类型：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数据类型</h2>
<p>JavaScript 拥有动态类型。这意味着相同变量可用于保存不同类型：</p>
<p id="demo"></p>
<script>
var x;               // 现在 x 是 undefined
var x = 7;           // 现在 x 是数值
var x = "Bill";      // 现在 x 是字符串值
document.getElementById("demo").innerHTML = x;
</script>
</body>
</html>

效果：

3，JavaScript 字符串值

字符串（或文本字符串）是一串字符（比如 “Bill Gates”）。
字符串被引号包围，我们可使用单引号或双引号：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>字符串被引号包围。您可使用单引号或双引号：</p>
<p id="demo"></p>
<script>
var carName1 = "Porsche 911";   // 使用双引号
var carName2 = 'Porsche 911';   // 使用单引号
document.getElementById("demo").innerHTML =
carName1 + "<br>" + 
carName2; 
</script>
</body>
</html>

效果：

可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 字符串</h2>
<p>您可以在字符串内使用引号，只要这些引号与包围字符串的引号不匹配：</p>
<p id="demo"></p>
<script>
var answer1 = "It's alright";             // 双引号内的单引号
var answer2 = "He is called 'Bill'";    // 双引号内的单引号
var answer3 = 'He is called "Bill"';    // 单引号内的双引号
document.getElementById("demo").innerHTML =
answer1 + "<br>" + 
answer2 + "<br>" + 
answer3;
</script>
</body>
</html>

效果：

4，JavaScript 数值

JavaScript 只有一种数值类型。
写数值时用不用小数点均可：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数值</h2>
<p>写数值时用不用小数点均可：</p>
<p id="demo"></p>
<script>
var x1 = 34.00;
var x2 = 34;
var x3 = 3.14;
document.getElementById("demo").innerHTML =
x1 + "<br>" + x2 + "<br>" + x3;
</script>
</body>
</html>

效果：

超大或超小的数值可以用科学计数法来写：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 数值</h2>
<p>超大或超小的数值可以用科学计数法来写：</p>
<p id="demo"></p>
<script>
var y = 123e5;
var z = 123e-5;
document.getElementById("demo").innerHTML =
y + "<br>" + z;
</script>
</body>
</html>

效果：

5，JavaScript 布尔值

布尔值只有两个值：true 或 false。

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Booleans</h2>
<p>布尔值只有两个值：true 或 false。</p>
<p id="demo"></p>
<script>
var x = 7;
var y = 7;
var z = 8;
document.getElementById("demo").innerHTML =
(x == y) + "<br>" + (x == z);
</script>
</body>
</html>

效果：

九，JavaScript 函数

JavaScript 函数是被设计为执行特定任务的代码块。
JavaScript 函数会在某代码调用它时被执行。

1，JavaScript 函数语法

JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数：
(参数 1, 参数 2, ...)
由函数执行的代码被放置在花括号中：{}
function name(参数 1, 参数 2, 参数 3) {要执行的代码}
函数参数（Function parameters）是在函数定义中所列的名称。
函数参数（Function arguments）是当调用函数时由函数接收的真实的值。
在函数中，参数是局部变量。
在其他编程语言中，函数近似程序（Procedure）或子程序（Subroutine）。

2，函数调用

函数中的代码将在其他代码调用该函数时执行：

当事件发生时（当用户点击按钮时）
当 JavaScript 代码调用时
自动的（自调用）

3，函数返回

当 JavaScript 到达 return 语句，函数将停止执行。
如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>本例调用了一个执行计算的函数，然后返回结果：</p>
<p id="demo"></p>
<script>
var x = myFunction(7, 8);
document.getElementById("demo").innerHTML = x;
function myFunction(a, b) {
    return a * b;
}
</script>
</body>
</html>

效果：

4，为何使用函数？

何使用函数能够对代码进行复用：只要定义一次代码，就可以多次使用它。
使用函数能够多次向同一函数传递不同的参数，以产生不同的结果。

5，() 运算符调用函数

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>本例调用函数把华氏度转换为摄氏度：</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
    return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius(86);
</script>
</body>
</html>

效果：

访问没有 () 的函数将返回函数定义：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>不使用 () 访问函数将返回函数声明而不是函数结果：</p>
<p id="demo"></p>
<script>
function toCelsius(f) {
    return (5/9) * (f-32);
}
document.getElementById("demo").innerHTML = toCelsius;
</script>
</body>
</html>

效果：

6，用作变量值的函数,

函数的使用方法与变量一致，在所有类型的公式、赋值和计算中。

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"温度是：" + toCelsius(86) + " 摄氏度。";

function toCelsius(fahrenheit) {
    return (5/9) * (fahrenheit-32);
} 
</script>
</body>
</html>

效果：

7，局部变量

在 JavaScript 函数中声明的变量，会成为函数的局部变量。
局部变量只能在函数内访问。

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 函数</h2>
<p>myFunction() 之外的 carName 未定义。</p>
<p id="demo1"></p>
<p id="demo2"></p>
<script>
myFunction();
function myFunction() {
    var carName = "Volvo";
    document.getElementById("demo1").innerHTML =
    typeof carName + " " + carName;
}
document.getElementById("demo2").innerHTML =
typeof carName;
</script>
</body>
</html>

效果：

十，JavaScript 对象

在真实生活中，汽车是一个对象。
汽车有诸如车重和颜色等属性，也有诸如启动和停止的方法：

1，JavaScript 对象

这段代码把一个单一值（porsche）赋给名为 car 的变量：

<!DOCTYPE html>
<html>
<body>
<h2>JavaScript 变量</h2>
<p id="demo"></p>
<script>
// 创建并显示变量：
var car = "porsche";
document.getElementById("demo").innerHTML = car;
</script>
</body>
</html>

对象也是变量。但是对象包含很多值。
这段代码把多个值（porsche, 911, white）赋给名为 car 的变量：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象</h1>
<p id="demo"></p>
<script>
// 创建对象：
var car = {type:"porsche", model:"911", color:"white"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML = car.type;
</script>
</body>
</html>

值以名称:值对的方式来书写（名称和值由冒号分隔）。
JavaScript 对象是被命名值的容器。

2，对象属性

（JavaScript 对象中的）名称:值对被称为属性。

3，对象方法

对象也可以有方法。
方法是在对象上执行的动作。
方法以函数定义被存储在属性中。

方法是作为属性来存储的函数。

4，this 关键词

在函数定义中，this 引用该函数的“拥有者”。
在上面的例子中，this 指的是“拥有” fullName 函数的 person 对象。
换言之，this.firstName 的意思是 this 对象的 firstName 属性。

5，对象定义

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象创建</h1>
<p id="demo"></p>
<script>
// 创建对象：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>

6，访问对象属性

用objectName.propertyName访问对象属性

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象创建</h1>
<p id="demo"></p>
<script>
// 创建对象：
var person = {firstName:"Bill", lastName:"Gates", age:62, eyeColor:"blue"};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person.firstName + " 已经 " + person.age + " 岁了。";
</script>
</body>
</html>

效果：

或者用objectName[“propertyName”]访问对象属性

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象属性</h1>
<p>有两种不同的方法来访问对象属性。</p>
<p>您可以使用 person.property 或 person["property"]。</p>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
    firstName: "Bill",
    lastName : "Gates",
    id       :  12345
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML =
person["firstName"] + " " + person["lastName"];
</script>
</body>
</html>

效果：

7，访问对象方法

使用objectName.methodName()

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象方法</h1>
<p>对象方法是一种函数定义，存储为属性值。</p>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
    firstName: "Bill",
    lastName : "Gates",
    id       : 12345,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML = person.fullName();
</script>
</body>
</html>

效果：

如果不使用 () 访问 fullName 方法，则将返回函数定义：

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 对象方法</h1>
<p>如果您不使用 () 访问对象，则返回函数定义：</p>
<p id="demo"></p>
<script>
// 创建对象：
var person = {
    firstName: "Bill",
    lastName : "Gates",
    id       : 12345,
    fullName : function() {
       return this.firstName + " " + this.lastName;
    }
};
// 显示对象中的数据：
document.getElementById("demo").innerHTML = person.fullName;
</script>
</body>
</html>

效果：

方法实际上是以属性值的形式存储的函数定义。

不要把字符串、数值和布尔值声明为对象！

如果通过关键词 “new” 来声明 JavaScript 变量，则该变量会被创建为对象：
var x = new String(); // 把 x 声明为 String 对象 var y = new Number(); // 把 y 声明为 Number 对象 var z = new Boolean(); // 把 z 声明为 Boolean 对象
避免字符串、数值或逻辑对象。他们会增加代码的复杂性并降低执行速度。

终于写完了QAQ