CSS

01第一个样式

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS层叠样式表</title>
  6.     <style type="text/css">
  7.         p {
  8.             background-color: red;
  9.             font-size: 20px;
  10.         }
  11.     </style>
  12. </head>
  13. <body>
  14.     <p>http://www.15pb.com.cn</p>
  15.     <p>十五派信息安全教育</p>
  16. </body>
  17. </html>

02外部方式引入样式表

image.png

  1. p {
  2.     background-color: red;
  3.     font-size: 20px;
  4. }
  5. .study-url{
  6.     background-color: skyblue; 
  7. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>外部方式引入css</title>
  6.     <!-- rel 关系， type 文件类型， href 文件路径 -->
  7.     <link rel="stylesheet" type="text/css" href="import.css">
  8. </head>
  9. <body>
  10.     <p class="study-url">http://www.15pb.com.cn</p>
  11.     <p>十五派信息安全教育</p>
  12. </body>
  13. </html>

03选择器

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>CSS层叠样式表</title>
  6.     <style type="text/css">
  7.         /* 类选择器 */
  8.         .study-url{
  9.             background-color: skyblue; 
  10.         }
  11.         /* 标签选择器 */
  12.         p {
  13.             background-color: red;
  14.             font-size: 20px;
  15.         }
  17.     </style>
  18. </head>
  19. <body>
  20.     <p class="study-url">http://www.15pb.com.cn</p>
  21.     <p>十五派信息安全教育</p>
  22. </body>
  23. </html>

04背景样式

image.png

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>背景样式</title>
  8.     <style type="text/css">
  9.         pre{
  10.             font-size: 30px;
  11.         }
  12.         body {
  13.             background-color: aqua;
  14.             background-image: url("img/4.jpg");
  15.             background-repeat: repeat-y;
  16.             background-attachment:fixed;
  17.             background-position: top left;
  18.             /* background: aqua url("img/4.jpg") repeat-y fixed top center */
  19.         }
  20.     </style>
  21. </head>
  22. <body>
  23.     <p>网络安全</p>
  24.     <p>十五派信息安全教育</p>
  25.     <p>  随着国家对于网络安全的逐步重视以及各大公司对于信息安全人才的需求猛增，对于基础型网络安全人才的要求正逐步走向理性，已经可以看到大量公司对于人才的需求正从注重奇技淫巧向基础扎实技术涉猎面广发展，为网络安全教育的合理性奠定了一个必要基础。与此同时恰逢十五派软件安全课程成熟，有能力抽调部分研发力量集中研发新课程，进而诞生了十五派网络安全课程。
  26.         网络安全高级课是十五派推出的主打课程，主要面向对黑客技术或信息安全有兴趣、有追求的，或是有意从事前端安全的极客群体。为了使得十五派的网络安全方向毕业生更有竞争力，因此课程从研发之初就将课程的重点放在“网络”而并非“前端”上，前端的渗透仅仅被作为一个基础，而体现学生关键竞争力的被定位到网络协议分析与APP安全上，这将使得从十五派毕业的学生基础更加扎实，工作适应面更广。
  27.         勿在浮沙筑高台，本课程将涵盖HTML、CSS、JavaScript、PHP、SQL、Python、Java、Smali等八种语言的开发级讲解，业内罕有，从而使得后面课程的深入讲解成为可能。与此同时，不用担心十五派的网络安全课程会像其他机构一样“变异”成网站开发培训附带网络安全或网络运维培训附带网络安全。我们充分利用了十五派在软件安全教学过程中总结的教学方法，可以使得学生在较短的时间内掌握以上语言的开发技能，进而将以上八种语言的学习时间控制在一个月以内，而基础部分的课时占比更是被严格控制在30%以内。
  28.     </p>
  29. </body>
  30. </html>

05文本样式

image.png

  1. p {
  2.     /* 指定颜色 */
  3.     color: rgb(121, 59, 59); 
  4.     /* 指定文字的方向，rtl 从右到左，阿拉伯数字 */
  5.     direction: ltr;
  6.     /* 字符之间的空隙 */
  7.     letter-spacing: 20px;
  8.     /* 行高 */
  9.     line-height: 50px;
  10.     /* 文本对齐 justify是左或右对齐,看direction*/
  11.     text-align: justify;
  13.     /* 设置文本下划线、上划线、删除线 */
  14.     text-decoration: underline;
  15.     /* 设置文本阴影 */
  16.     text-shadow:5px 5px 5px red;
  17.     /* 设置文本大(u)小(l)写转换 */
  18.     text-transform: uppercase;
  19.     /* 首行缩进 */
  20.     text-indent:20px;
  21. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>文本样式</title>
  8.     <link rel="stylesheet" href="import1.css">
  9. </head>
  10. <body>
  12.     <p>网络安全</p>
  13.     <p>十五派信息安全教育</p>
  14.     <p>a b c d e f</p>
  15.     <p>1 2 3 4 5 6</p>
  16.     <p>  随着国家对于网络安全的逐步重视以及各大公司对于信息安全人才的需求猛增，对于基础型网络安全人才的要求正逐步走向理性，已经可以看到大量公司对于人才的需求正从注重奇技淫巧向基础扎实技术涉猎面广发展，为网络安全教育的合理性奠定了一个必要基础。与此同时恰逢十五派软件安全课程成熟，有能力抽调部分研发力量集中研发新课程，进而诞生了十五派网络安全课程。
  17.         网络安全高级课是十五派推出的主打课程，主要面向对黑客技术或信息安全有兴趣、有追求的，或是有意从事前端安全的极客群体。为了使得十五派的网络安全方向毕业生更有竞争力，因此课程从研发之初就将课程的重点放在“网络”而并非“前端”上，前端的渗透仅仅被作为一个基础，而体现学生关键竞争力的被定位到网络协议分析与APP安全上，这将使得从十五派毕业的学生基础更加扎实，工作适应面更广。
  18.         勿在浮沙筑高台，本课程将涵盖HTML、CSS、JavaScript、PHP、SQL、Python、Java、Smali等八种语言的开发级讲解，业内罕有，从而使得后面课程的深入讲解成为可能。与此同时，不用担心十五派的网络安全课程会像其他机构一样“变异”成网站开发培训附带网络安全或网络运维培训附带网络安全。我们充分利用了十五派在软件安全教学过程中总结的教学方法，可以使得学生在较短的时间内掌握以上语言的开发技能，进而将以上八种语言的学习时间控制在一个月以内，而基础部分的课时占比更是被严格控制在30%以内。
  19.     </p>
  21. </body>
  22. </html>

06字体样式

image.png

  1. p {
  2.     /* 设置字体 */
  3.     font-family: 隶书;
  4.     /* 设置字体斜体 */
  5.     font-style: italic;
  6.     /* 设置字体粗细 */
  7.     font-weight: bold;
  8.     /* 设置字体大小 */
  9.     font-size: 20px;
  10. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>字体样式</title>
  8.     <link rel="stylesheet" href="import2.css">
  9. </head>
  10. <body>
  12.     <p>网络安全</p>
  13.     <p>十五派信息安全教育</p>
  14.     <p>a b c d e f</p>
  15.     <p>  随着国家对于网络安全的逐步重视以及各大公司对于信息安全人才的需求猛增，对于基础型网络安全人才的要求正逐步走向理性，已经可以看到大量公司对于人才的需求正从注重奇技淫巧向基础扎实技术涉猎面广发展，为网络安全教育的合理性奠定了一个必要基础。与此同时恰逢十五派软件安全课程成熟，有能力抽调部分研发力量集中研发新课程，进而诞生了十五派网络安全课程。
  16.         网络安全高级课是十五派推出的主打课程，主要面向对黑客技术或信息安全有兴趣、有追求的，或是有意从事前端安全的极客群体。为了使得十五派的网络安全方向毕业生更有竞争力，因此课程从研发之初就将课程的重点放在“网络”而并非“前端”上，前端的渗透仅仅被作为一个基础，而体现学生关键竞争力的被定位到网络协议分析与APP安全上，这将使得从十五派毕业的学生基础更加扎实，工作适应面更广。
  17.         勿在浮沙筑高台，本课程将涵盖HTML、CSS、JavaScript、PHP、SQL、Python、Java、Smali等八种语言的开发级讲解，业内罕有，从而使得后面课程的深入讲解成为可能。与此同时，不用担心十五派的网络安全课程会像其他机构一样“变异”成网站开发培训附带网络安全或网络运维培训附带网络安全。我们充分利用了十五派在软件安全教学过程中总结的教学方法，可以使得学生在较短的时间内掌握以上语言的开发技能，进而将以上八种语言的学习时间控制在一个月以内，而基础部分的课时占比更是被严格控制在30%以内。
  18.     </p>
  20. </body>
  21. </html>

07列表样式

image.png

  1. ul{
  2.     /* 设置无序列表项 类型是空心圆,none是没有列表符号 */
  3.     list-style-type: circle;
  4.     /* 设置列表符号的位置  */
  5.     list-style-position: outside;
  6.     /* 设置列表符号的图标 */
  7.     list-style-image: url("logo/1.gif");
  8.     /* 设置上面三个属性 */
  9.     /* list-style: circle outside url("logo/9.gif"); */
  10. }
  11. ol{
  12.     /* 设置大写拉丁字母 */
  13.     list-style-type: upper-latin;
  14. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <link rel="stylesheet" href="import3.css">
  8.     <title>列表样式</title>
  9. </head>
  10. <body>
  12.     <ul>
  13.         <li>列表项</li>
  14.         <li>列表项</li>
  15.         <li>列表项</li>
  16.     </ul>
  18.     <ol>
  19.         <li>列表项</li>
  20.         <li>列表项</li>
  21.         <li>列表项</li>
  22.     </ol>
  25. </body>
  26. </html>

08伪类选择器

image.png

  1. /* 超链接未访问时属性 */
  2. a:link{
  3.     color:red;
  4. }
  5. /* 超链接访问后属性 */
  6. a:visited{
  7.     color: green;
  8. }
  9. /* 鼠标在超链接上面属性 */
  10. a:hover{
  11.     color: yellow;
  12.     font-size: 30px;
  13. }
  14. /* 鼠标点击超链接时属性 */
  15. a:active{
  16.     color:blue;
  17. }
  18. /* 鼠标在输入框上面属性 */
  19. input:hover{
  20.     background-color: red;
  21. }
  22. /* 鼠标激活输入框属性 */
  23. input:active{
  24.     background-color: blue;
  25. }
  26. /* 光标在输入框内属性 */
  27. input:focus{
  28.     background-color: yellow;
  29. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>伪类选择器</title>
  8.     <link rel="stylesheet" href="import4.css">
  9. </head>
  10. <body>
  11.     <p>http://www.15pb.com.cn</p>
  12.     <p>十五派信息安全教育</p>
  14.     <a href="http://www.15pb.com.cn">十五派信息安全教育</a>
  16.     用户名：<input type="text" >
  18. </body>
  19. </html>

09结构性伪类选择器

image.png

  1. /* body中第一个标签是p时有效 */
  2. /* p:first-child{
  3.     background-color: red;
  4. } */
  5. /* body中最后一个标签是p时有效 */
  6. /* p:last-child {
  7.     background-color: red;
  8. } */
  9. /* body中指定位置标签是p时有效 */
  10. p:nth-child(3){
  11.     background-color: red;
  12. }
  13. /* 设置表格指定列属性 */
  14. /* td:nth-child(2){
  15.     background-color: blue;
  16. } */
  17. /* 设置表格倒数指定列属性 */
  18. /* td:nth-last-child(2){
  19.     background-color: red;
  20. } */
  21. /* 设置body下的第一个元素h1,如果不是则找到它设置，找不到则无效 */
  22. body h1:first-of-type{
  23.     background-color: red; 
  24. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>结构性伪类选择器</title>
  8.     <link rel="stylesheet" href="import5.css">
  9. </head>
  10. <body>
  11.     <h1>标题</h1>
  12.     <p>网络安全</p>
  13.     <p>十五派信息安全教育</p>
  14.     <p>a b c d e f</p>
  16.     <table border="1" width="500px">
  17.         <tr>
  18.             <td>1</td>
  19.             <td>1</td>
  20.             <td>1</td>
  21.             <td>1</td>
  22.         </tr>
  23.         <tr>
  24.             <td>2</td>
  25.             <td>2</td>
  26.             <td>2</td>
  27.             <td>2</td>
  28.         </tr>
  29.         <tr>
  30.             <td>3</td>
  31.             <td>3</td>
  32.             <td>3</td>
  33.             <td>3</td>
  34.         </tr>
  35.     </table>
  37.     <p>  随着国家对于网络安全的逐步重视以及各大公司对于信息安全人才的需求猛增，对于基础型网络安全人才的要求正逐步走向理性，已经可以看到大量公司对于人才的需求正从注重奇技淫巧向基础扎实技术涉猎面广发展，为网络安全教育的合理性奠定了一个必要基础。与此同时恰逢十五派软件安全课程成熟，有能力抽调部分研发力量集中研发新课程，进而诞生了十五派网络安全课程。
  38.         网络安全高级课是十五派推出的主打课程，主要面向对黑客技术或信息安全有兴趣、有追求的，或是有意从事前端安全的极客群体。为了使得十五派的网络安全方向毕业生更有竞争力，因此课程从研发之初就将课程的重点放在“网络”而并非“前端”上，前端的渗透仅仅被作为一个基础，而体现学生关键竞争力的被定位到网络协议分析与APP安全上，这将使得从十五派毕业的学生基础更加扎实，工作适应面更广。
  39.         勿在浮沙筑高台，本课程将涵盖HTML、CSS、JavaScript、PHP、SQL、Python、Java、Smali等八种语言的开发级讲解，业内罕有，从而使得后面课程的深入讲解成为可能。与此同时，不用担心十五派的网络安全课程会像其他机构一样“变异”成网站开发培训附带网络安全或网络运维培训附带网络安全。我们充分利用了十五派在软件安全教学过程中总结的教学方法，可以使得学生在较短的时间内掌握以上语言的开发技能，进而将以上八种语言的学习时间控制在一个月以内，而基础部分的课时占比更是被严格控制在30%以内。
  40.     </p>
  41. </body>
  42. </html>

10伪元素选择器

image.png

  1. /* before 在标签前面加上内容 */
  2. p::before{
  3.     content: "我是添加上去的内容";
  4. }
  5. /* after 在标签最后加上内容 */
  6. p::after{
  7.     content: "结束了";
  8. }
  9. /* 修改第一行 属性 */
  10. p::first-line{
  11.     background-color: yellow;
  12. }
  13. /* 修改第一单词 属性 */
  14. p::first-letter{
  15.     font-size: 30px;
  16. }
  17. /* 修改选中 属性 */
  18. p::selection{
  19.     background-color: red;
  20. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="weielm.css">
  9. </head>
  10. <body>
  11.     <!-- <p>网络安全</p>
  12.     <p>十五派信息安全教育</p>
  13.     <p>a b c d e f</p> -->
  14.     <p>  随着国家对于网络安全的逐步重视以及各大公司对于信息安全人才的需求猛增，对于基础型网络安全人才的要求正逐步走向理性，已经可以看到大量公司对于人才的需求正从注重奇技淫巧向基础扎实技术涉猎面广发展，为网络安全教育的合理性奠定了一个必要基础。与此同时恰逢十五派软件安全课程成熟，有能力抽调部分研发力量集中研发新课程，进而诞生了十五派网络安全课程。
  15.         网络安全高级课是十五派推出的主打课程，主要面向对黑客技术或信息安全有兴趣、有追求的，或是有意从事前端安全的极客群体。为了使得十五派的网络安全方向毕业生更有竞争力，因此课程从研发之初就将课程的重点放在“网络”而并非“前端”上，前端的渗透仅仅被作为一个基础，而体现学生关键竞争力的被定位到网络协议分析与APP安全上，这将使得从十五派毕业的学生基础更加扎实，工作适应面更广。
  16.         勿在浮沙筑高台，本课程将涵盖HTML、CSS、JavaScript、PHP、SQL、Python、Java、Smali等八种语言的开发级讲解，业内罕有，从而使得后面课程的深入讲解成为可能。与此同时，不用担心十五派的网络安全课程会像其他机构一样“变异”成网站开发培训附带网络安全或网络运维培训附带网络安全。我们充分利用了十五派在软件安全教学过程中总结的教学方法，可以使得学生在较短的时间内掌握以上语言的开发技能，进而将以上八种语言的学习时间控制在一个月以内，而基础部分的课时占比更是被严格控制在30%以内。
  17.     </p>
  18. </body>
  19. </html>

11ID选择器

image.png

  1. /* 标签选择器 */
  2. p {
  3.     background-color: yellow;
  4. }
  5. /* 类选择器 */
  6. .cls1 {
  7.     background-color: aqua;
  8. }
  10. /* id选择器 */
  11. #p1{
  12.     background-color: red;
  13. }
  14. #p2{
  15.     background-color: blue;
  16. }
  17. #p3{
  18.     background-color:darkseagreen;
  19. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="id.css">
  9. </head>
  10. <body>
  11.     <p class="cls1" id="p1">网络安全</p>
  12.     <p class="cls1" id="p2">十五派信息安全教育</p>
  13.     <p class="cls1" id="p3">a b c d e f</p>
  15. </body>
  16. </html>

12星号选择器

image.png

  1. * {
  2.     background-color: aqua;
  3. }
  5. /* 标签选择器 */
  6. p {
  7.     background-color: yellow;
  8. }
  9. /* 类选择器 */
  10. .cls1 {
  11.     background-color: aqua;
  12. }
  14. /* id选择器 */
  15. #p1{
  16.     background-color: red;
  17. }
  18. #p2{
  19.     background-color: blue;
  20. }
  21. #p3{
  22.     background-color:darkseagreen;
  23. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="xinghao.css">
  9. </head>
  10. <body>
  11.     <label>十五派信息安全教育</label>
  12.     <div>网络安全</div>
  13.     <p class="cls1" id="p1">网络安全</p>
  14.     <p class="cls1" id="p2">十五派信息安全教育</p>
  15.     <p class="cls1" id="p3">a b c d e f</p>
  16. </body>
  17. </html>

13逗号选择器

image.png

  1. /* 逗号选择器，可以联合标签名、类名、id名 */
  2. label,div,.cls1,#p1 {
  3.     background-color: yellow;
  4. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="douhao.css">
  9. </head>
  10. <body>
  11.         <label>十五派信息安全教育</label>
  12.         <div>网络安全</div>
  13.         <p class="cls1" id="p1">网络安全</p>
  14.         <p class="cls1" id="p2">十五派信息安全教育</p>
  15.         <p class="cls1" id="p3">a b c d e f</p>
  16. </body>
  17. </html>

14后代选择器

image.png

  2. /* 可以通过空格访问父标签下面的子标签 */
  3. div p{
  4.     background-color: aqua;
  5. }
  6. /* 可以访问父标签的孙子标签 */
  7. /* div p span{
  8.     background-color: hotpink;
  9. } */
  11. /* 直接访问父标签的孙子标签 */
  12. div span{
  13.     background-color:red;
  14. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="houdai.css">
  9. </head>
  10. <body>
  11.     <div>
  12.         <label for="">信息安全</label>
  13.         <p>网络安全<span>非常重要</span></p>
  14.     </div>
  16. </body>
  17. </html>

15子选择器

image.png

  1. /* 指定父标签的子标签 的属性 */
  2. div>p{
  3.     background-color: aqua;
  4. }
  6. /* 不能直接访问孙子标签，需要精确 */
  7. /* div>span{
  8.     background-color: red;
  9. } */
  10. div>p>span{
  11.     background-color: red;
  12. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="zi.css">
  9. </head>
  10. <body>
  11.         <div>
  12.                 <label for="">信息安全</label>
  13.                 <p>网络安全<span>非常重要</span></p>
  14.          </div>
  15. </body>
  16. </html>

16相邻兄弟选择器

image.png

  2. /* 兄弟关系，指定同级标签中，h1旁边是p标签的属性 */
  3. /* 即 h1和p之间是相邻的 */
  4. h1 + p {
  5.     font-family: 隶书;
  6. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="xiongdi.css">
  9. </head>
  10. <body>
  11.         <h1>信息安全</h1>
  12.         <p>网络安全</p>
  13. </body>
  14. </html>

17属性选择器

image.png

  2. /* 通过属性选择 */
  3. p[id="p1"]{
  4.     background-color: aqua;
  5. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <link rel="stylesheet" href="shuxing.css">
  9. </head>
  10. <body>
  11.     <p class="cls1" id="p1">信息安全</p>
  12. </body>
  13. </html>

JS语法

01JS代码注释

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script>
  9.         /*
  10.             多行注释
  11.             代码语句最后最好加分号；
  12.             变量、函数名、操作符区分大小写
  13.         */
  15.         alert("hello js");
  16.         console.log("log ing");
  17.         // var num = prompt("请输入数字");
  18.         // alert(num);
  19.         // 单行注释
  20.     </script>
  21.     <!-- <script src="1.js"></script> -->
  22. </head>
  23. <body>
  25.     网页内容
  27. </body>
  28. </html>

01JS引入方式

  1. console.log("hello 3");
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script type="text/javascript">
  9.         console.log("hello 1 ");
  10.         console.log("hello 1 1");
  12.         var num=1;
  13.         var $num1=1;
  14.         var _num2=2;
  15.         var num3="hello";
  16.         var num4=1.34;
  18.         var num5;
  20.         num5 = 1.0;
  21.         num5 = "hello";
  23.         num6 = 15;
  27.     </script>
  29.     <script src="1.js"></script>
  30. </head>
  31. <body>
  32.     <script type="text/javascript">
  33.         console.log("hello 2 ");
  34.     </script>
  35. </body>
  36. </html>

02数据类型

  1. // 当变量未定义时，返回是undefined
  2. console.log(typeof(num));
  3. var num = 1;
  4. console.log(typeof(num));
  5. var floatNum = 1.5;
  6. console.log(typeof(floatNum));
  8. var string="hello";
  9. console.log(typeof(string));
  10. var bool = false;
  11. console.log(typeof(bool));
  13. var user;
  14. console.log(typeof(user));
  16. // 将变量初始化为null,变量类型是object
  17. var pass = null;
  18. console.log(typeof(pass));
  20. var num = "hello"/100;
  21. if(isNaN(num)){
  22.     console.log(num + " num is not number");
  23. }else{
  24.     console.log("num is number");
  25. };
  27. Number 可以转换任意类型为数值
  28. var num01 = "1.2";
  29. var num02 = false;
  30. var num03 = "hello1.2";
  31. // 当字符串中是纯数值，可以直接转换，
  32. console.log(typeof(Number(num01)));
  33. console.log(Number(num01));
  34. // 当变量是布尔类型，true=1, false=0;
  35. console.log(typeof(Number(num02)));
  36. console.log(Number(num02));
  37. // 如果里面有其他的内容，转换之后就是NaN
  38. console.log(typeof(Number(num03)));
  39. console.log(Number(num03));
  41. var string1=" 1.2.2 ";
  42. // parseInt 可以过滤空格，去除浮点后面的数
  43. console.log("parseInt:" + parseInt(string1));
  45. var string2=" 1.2.2 ";
  46. console.log("parseFloat:" + parseFloat(string2));
  48. var num11 = 123;
  49. var bool1 = false;
  50. var string11=" 1.2.2 ";
  51. var string22='hello';
  52. console.log("num11:"+typeof(num11));
  53. console.log(num11);
  54. // 控制台输出的内容，蓝色代表数值，黑色就是字符串
  55. var string33=num11.toString();
  56. console.log("nustring33:"+typeof(string33));
  57. console.log(string33);
  58. // 布尔类型转为字符串，false="false",true="true"
  59. console.log(bool1.toString());
  60. var stringxxx = null;
  61. // 空对象，使用String转换输出字符串 null
  62. console.log(String(stringxxx));
  64. 布尔类型
  65. var bool22 = "123";
  66. var bool33 = "0";
  67. var bool44 = 0;
  68. // 布尔类型在控制台输出，也是蓝色
  69. // 转换布尔类型，只有0是false，其他都是true;
  70. console.log(Boolean(bool22));
  71. console.log(Boolean(bool33));
  72. console.log(Boolean(bool44));
  74. 算数运算符
  75. var num41 = ((12+12-5)*5)/5;
  76. console.log(num41);
  77. var num42 = 12%5;
  78. console.log(num42);
  79. 递增递减运算符
  80. var num43 = 0;
  81. var num44 = num43++;
  82. var num45 = ++num43;
  83. console.log(num43);
  84. console.log(num44);
  85. console.log(num45);
  87. var num53 = 0;
  88. var num54 = ++num53;
  89. var num55 = num53++;
  90. console.log(num53);
  91. console.log(num54);
  92. console.log(num55);
  94. 赋值运算符
  95. var num62 = -1;
  96. var num63 = 1;
  97. var num64 = num63;
  98. // += 左值必须已经初始化过
  99. num64 += num63;
  100. console.log(num64);
  101. num64 -= num62;
  102. console.log(num64);
  103. num64 /= 2; // 除以之后，如果除不尽有小数
  104. console.log(num64);
  105. num64 %= 2;
  106. console.log(num64);
  108. 比较运算符
  109. var num72 = 1;
  110. var num73 = true;
  111. var num74 = "1";
  112. var num75 = 1;
  113. // == 只比较数值，可以进行隐式转换
  114. if(num72 == num74){
  115.     console.log("相等");
  116. }else{
  117.     console.log("不相等");
  118. }
  119. // === 比较数值，也比较类型
  120. if(num72 === num74){
  121.     console.log("相等");
  122. } else{
  123.     console.log("不相等");
  124. }
  125. // != 只比较值是否不相等
  126. if(num72 != num74){
  127.     console.log("不相等");
  128. } else{
  129.     console.log("相等");
  130. }
  131. // !== 比较值是否不相等的同时，比较类型是否不相等
  132. if(num72 !== num74){
  133.     console.log("不相等");
  134. } else{
  135.     console.log("相等");
  136. }
  138. 三元操作符
  139. var num82 = 1;
  140. var isRet = (num82 == 1) ? true:false;
  141. console.log(isRet);
  143. // 逻辑与
  144. var num92 = 1;
  145. var num93 = 0;
  146. var num94 = (--num92)&&(num93--);
  147. console.log(num92);
  148. console.log(num93);
  149. console.log(num94);
  151. num92++;
  152. num93--;
  153. // 逻辑与，当第一个表达式返回为真，才会计算执行&&后面的表达式
  154. // 当执行完表达式之后，返回的最后一个表达式执行的结果
  155. num94 = (num92++)&&(num93++);
  156. console.log(num92);
  157. console.log(num93);
  158. console.log(num94);
  160. var num95 = null;
  161. var num96 = 5;
  162. // 当表达式中有null时，返回null
  163. console.log(num95&&num96);
  164. console.log(num96&&num95);
  165. // 当表达式中有NaN时，返回NaN
  166. num95 = "hello";
  167. num95 *= 5;
  168. console.log(num95&&num96);
  169. console.log(num96&&num95);
  170. // 当表达式中有未初始化变量，返回undefined
  171. var num97;
  172. console.log(num97&&num96);
  173. console.log(num96&&num97);
  176. 逻辑或
  177. var num102 = 1;
  178. var num103 = 0;
  179. var num104 = (--num102)||(num103--);
  180. console.log(num102);
  181. console.log(num103);
  182. console.log(num104);
  184. num102++;//1
  185. num103--;//-2
  186. // 逻辑或，当第一个表达式为真，第二个表达式就不用执行了
  187. num104 = (num102++)||(num103++);
  188. console.log(num102);
  189. console.log(num103);
  190. console.log(num104);
  192. var num105 = null;
  193. var num106 = null;
  194. console.log(num105||num106);
  195. console.log(num106||num105);
  196. num105 = "hello";
  197. num105 *= 5;
  198. // num105(NaN), num106(null)
  199. // 当第一个是NaN时，会进一步判断第二个
  200. console.log(num105||num106);
  201. // 当第一个是null时，会进一步判断第二个
  202. console.log(num106||num105);
  203. // 当表达式中都是null,NaN,undefined，返回最后执行的结果
  204. var num107;
  205. console.log(num107||num106);
  206. console.log(num106||num107);
  208. 逻辑非
  209. var num112 = 1;
  210. var num113 = !num112;
  211. var num114 = !num113;
  212. console.log(num112);
  213. console.log(num113);
  214. console.log(num114);
  216. num112 = "123";
  217. num113 = 0.0;
  218. console.log(!!num112);
  219. console.log(!!num113);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="2.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

02if实例

  1. console.log("if语句");
  3. // 接收输入
  4. var num = prompt("请你输入一个数");
  5. var num2 = prompt("请你输入另一个数");
  7. if(num == null || num2== null){
  8.     alert("输入无效");
  9. } else{
  10.     // prompt函数默认返回都是字符串
  11.     // 两个字符串相加，就是字符串拼接
  12.     console.log(num+num2);
  14.     // 转换为整型之后进行计算
  15.     var num3 = parseInt(num)+parseInt(num2);
  16.     console.log(num3);
  17. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="3.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

04jf实例

  1. // 1.接收输入的年龄
  2. var age = prompt("请输入您的年龄");
  3. // 类型转换
  4. age = parseInt(age);
  5. // 2. 根据年龄进入判断
  6. if (age<18){
  7.     alert("未成年人不得入内");
  8. } else if (age>=18&&age<=59){
  9.     alert("可以进入");
  10. } else {
  11.     alert("您已超出年龄限制");
  12. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="4.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

05if实例

  1. var strings = "hello";
  2. console.log(strings.length);
  4. var password = prompt("请输入您的密码");
  5. if(password.length != 6){
  6.     alert("请输入6位长度的密码");
  7. } else{
  8.     if(isNaN(password)){
  9.         alert("请输入6位数字");
  10.     } else{
  11.         alert("密码设置正确");
  12.     }
  13. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="5.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

07switch实例

  1. // 获取星期
  2. var day = new Date().getDay();
  3. console.log(day);
  5. // 输出到网页中
  6. // document.write("今天是星期" + day);
  8. //
  9. switch (day) {
  10.   case 1:
  11.     document.write("今天是星期" + day);
  12.     document.write("可以好好学习");
  13.     break;
  14.   case 2:
  15.     document.write("今天是星期" + day);
  16.     document.write("可以继续学习");
  17.     break;
  18.   case 3:
  19.     document.write("今天是星期" + day);
  20.     document.write("可以努力学习");
  21.     break;
  22.   case 4:
  23.     document.write("今天是星期" + day);
  24.     document.write("可以学习学习");
  25.     break;
  26.   case 5:
  27.     document.write("今天是星期" + day);
  28.     document.write("可以学习努力");
  29.     break;
  30.   default:
  31.     document.write("今天是星期" + day);
  32.     document.write("可以努力努力");
  33.     break;
  34. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="7.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

08循环结构

  1. // 求和，1-100
  2. // var sum = 0;
  3. // for(var i=1; i<=100; i++){
  4. //     sum += i;
  5. // }
  7. // 打印九九乘法表
  8. // for(var i=1; i<=9; i++){
  9. //     for(var j=1; j<=i; j++){
  10. //         document.write(i+"*"+j+"="+ (i*j) + " ");
  11. //     }
  12. //     document.write("<br />");
  13. // }
  15. //while
  16. // var i=1,j=1;
  17. // while(i<=9){
  18. //     j=1;
  19. //     while(j<=i){
  20. //         document.write(i+"*"+j+"="+ (i*j) + " ");
  21. //         j++;
  22. //     }
  23. //     document.write("<br />");
  24. //     i++;
  25. // }
  27. // do-while
  28. var i=1;
  29. do {
  30.     var j=1;
  31.     while(j<=i){
  32.         document.write(i+"*"+j+"="+ (i*j) + " ");
  33.         j++;
  34.     }
  35.     document.write("<br />");
  36.     i++;
  37. }while(i<=9);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="8.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

09函数

  1. // 定义一个函数
  2. function add(num1,num2){
  3.     return num1+num2;
  4. }
  5. // 函数变量
  6. var add1 = function(num1,num2){
  7.     return num1+num2;
  8. }
  10. // 调用函数
  11. var sum = add1(1,2);
  12. console.log(sum);
  14. // 定义一个增强版加法函数
  15. function addEx(){
  16.     // 获取参数个数
  17.     var lens = arguments.length;
  18.     var sum = 0;
  19.     for(var i=0; i<lens; i++){
  20.         sum += arguments[i];
  21.     }
  22.     return sum;
  23. }
  25. var sum1 = addEx(1,2,3);
  26. console.log(sum1);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="9.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

01数组的基本操作

  1. // 数组的基本操作
  3. // 创建数组
  4. //  new Array()
  5. var arrays = new Array();
  6. var arrays2 = new Array(1,2,3,4,5,6);
  7. //  字面量方式
  8. var arrays3 = [1,2,3,3,5,6];
  9. //  访问数组元素
  10. console.log(arrays3[0]);
  11. console.log(arrays2[3]);
  13. arrays3[0] = 12;
  14. console.log(arrays3[0]);
  16. // 初始化数组元素
  17. arrays[0] = 1;
  18. arrays[99] = 1;
  19. var len = arrays.length;
  20. console.log(len);
  21. // 数组元素未初始化时 是undefined
  22. for(var i=0; i<100;i++){
  23.     console.log(arrays[i]); 
  24. }
  26. // 数组中的方法
  27. // 在数组尾部压入一个数值
  28. arrays.push(99);
  29. console.log(arrays.length); 
  30. console.log(arrays[100]); 
  31. // 在数组尾部压入一组数值
  32. arrays.push(100,101,102);
  33. console.log(arrays.length); 
  35. // 在数组开头加入一组数值
  36. arrays.unshift(111,2,3,4);
  37. console.log(arrays.length); 
  38. console.log(arrays[0]); 
  40. // 删除数组最后一个元素
  41. arrays.pop();
  42. console.log(arrays.length); 
  44. // 删除数组的第一个元素
  45. arrays.shift();
  46. console.log(arrays[0]); 
  47. console.log(arrays.length); 
  49. // 转换函数,排序
  50. var arrays4 = [1,3,5,2,4,6,8,7,9];
  51. var str = arrays4.join();
  52. console.log(str);
  53. // 排序
  54. console.log(arrays4.sort());
  55. // 逆序输出
  56. console.log(arrays4.reverse());
  58. // 自定义排序
  59. function cmp(a,b){
  60.     // 返回正数，从小到大
  61.     // 返回负数，从大到小
  62.     return b-a;
  63. }
  64. // sort传参可以传递一个函数进去，用于排序参考
  65. console.log(arrays4.sort(cmp));
  67. // 连接数组
  68. var arrays5 = [1,3,5,2,4,6,8,7,9];
  69. var arrays6 = [9,6,4,6,3,2,4,1];
  70. // 连接数组
  71. var arrays7 = arrays5.concat(arrays6);
  72. console.log(arrays7);
  73. // 选取区间 [5,10)
  74. var arrays8 = arrays7.slice(5,10);
  75. console.log(arrays8);
  76. // 不指定结束，就是到末尾
  77. var arrays9 = arrays7.slice(5);
  78. console.log(arrays9);
  79. // 
  80. // start是负数以及指定了负数再指定范围，都是不正确的
  81. var arrays10 = arrays7.slice(-1, 10);
  82. console.log(arrays10);
  84. // 对数组进行操作
  85. var arrays11 = arrays7.slice(5);
  86. console.log(arrays11);
  87. // 从第一个开始删除，删除7个元素
  88. arrays11.splice(3,7);
  89. console.log(arrays11);
  90. // 参数1=下标
  91. // 参数2=删除的数量
  92. // 参数3=添加的元素(在删除的下标开始添加)
  93. arrays11.splice(3,1,5,6,7,8,9);
  94. console.log(arrays11);
  95. // 替换
  96. arrays11.splice(3,1,99);
  97. console.log(arrays11);
  99. // 查找元素指定元素，返回数组下标
  100. // 找不到返回-1
  101. var index = arrays11.indexOf(99,2);
  102. // 打印下标
  103. console.log(index);
  104. // 通过下标访问数值
  105. console.log(arrays11[index]);
  107. // 从后往前找
  108. var arrays12 = ["hello","andy","jack"];
  109. var index = arrays12.lastIndexOf("andy");
  110. // 打印下标
  111. console.log(index);
  112. // 通过下标访问数值
  113. console.log(arrays12[index]);
  115. // JS的数组，可以保存多种类型的元素
  116. var arrays13 = ["hello",true,123456];
  117. console.log(arrays13);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="1.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

02字符串对象函数的使用

  2. var strings = "hello 15pb";
  4. // 获取某一个字符
  5. var ch = strings.charAt(1);
  6. console.log(ch);
  8. // 获取某一个字符的字符编码
  9. // ascii 编码
  10. var chCode = strings.charCodeAt(1);
  11. console.log(chCode);
  13. // 查找字符串
  14. var strings1 = "hello 15pb";
  15. // 返回找到的字符串的起始数组下标
  16. var index = strings1.indexOf("15");
  17. console.log(index);
  18. // 从后往前查找字符串，返回下标
  19. var index1 = strings1.lastIndexOf("15");
  20. console.log(index1);
  22. // 截取字符串
  23. var strings2 = "hello world 15pb no1";
  24. //  [start, end)
  25. var str1 = strings2.slice(6,11);
  26. console.log(str1);
  27. //   [start, end)
  28. var str2 = strings2.substring(6,11);
  29. console.log(str2);
  30. //  start, len
  31. var str3 = strings2.substr(6,5);
  32. console.log(str3);
  34. // 编写一个函数，获取字符串中扩展名
  35. function getExt(string){
  36. // 1. 查找.的索引
  37. // 从后往前查找字符串，返回下标
  38. var index = string.lastIndexOf(".");
  40. // 2. 获取子字符串
  41. var strExt = string.substring(index);
  42. console.log(strExt);
  43.     return strExt;
  44. }
  45. // 调用函数 获取 扩展名
  46. getExt("hello.txt");
  48. // 指定分隔符 分割字符串，转换为数组
  49. var strings3 = "hello world 15pb no1";
  50. var strings = strings3.split(" ");
  51. console.log(strings);
  53. var strings4 = "hello-world-15pb-no1";
  54. var strings = strings4.split("-");
  55. console.log(strings);
  57. // 替换字符串
  58. var strings5 = "hello-world-15pb-no1";
  59. // 第一个参数传入子字符串或者正则表达式
  60. // 替换完成之后，需要有一个变量接收
  61. var strs = strings5.replace("world", "hello");
  62. console.log(strs);
  64. // 大小写转换
  65. // 大写转换函数，返回大写的字符串
  66. var strs = strings5.toUpperCase();
  67. console.log(strs);
  68. // 小写转换函数，返回小写的字符串
  69. var strs1 = strs.toLowerCase();
  70. console.log(strs1);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="2.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

03字符串例子

  2. // 将字符串分割为数组
  3. // split分割
  4. var strings = "hello-world-a15pb-no1";
  5. var strArray = strings.split("-");
  6. // console.log(strArray);
  8. // 遍历数组,修改首字母是大写
  9. var len = strArray.length;
  10. for(var i=0; i<len; i++){
  11.     if(i == 0 ) continue;
  12.     // console.log(strArray[i]);
  13.     // 修改每一个字符串的首字母为大写。
  14.     // 获取字符串中的第一个字母
  15.     var ch = strArray[i].charAt(0); 
  16.     // 变成大写
  17.     var ch1 = ch.toUpperCase();
  18.     // 替换
  19.     var strs = strArray[i].replace(ch,ch1);
  20.     strArray[i] = strs;
  21. }
  22. // 输出
  23. for(var i=0; i<len; i++){
  24.     console.log(strArray[i]);
  25. }
  26. // 拼接字符串
  27. var string1 = "";
  28. for(var i=0; i<len; i++){
  29.     // 连接字符串
  30.     string1 += strArray[i];
  31. }
  32. console.log(string1);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="3.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

04Math对象及函数的使用

  1. // var arrays = [1,2,3,4,5,6] ;
  2. // 求一组数的最小值
  3. var min = Math.min(1,5,3,6,4,2);
  4. console.log(min);
  5. // 求一组数的最大值
  6. var max = Math.max(1,5,3,6,4,2);
  7. console.log(max);
  9. // 向上取整，有小数点就进位
  10. var num1 = Math.ceil(13.01);
  11. console.log(num1);
  12. // 向下取整,丢弃小数点
  13. var num2 = Math.floor(13.99);
  14. console.log(num2);
  15. // 四舍五入
  16. var num3 = Math.round(13.51);
  17. console.log(num3);
  18. var num4 = Math.round(13.49);
  19. console.log(num4);
  20. // 绝对值
  21. var abs = Math.abs(-15);
  22. console.log(abs);
  24. // 随机数
  25. // Math.random 0~1之间的一个小数
  26. var nums = Math.random();
  27. console.log(nums);
  28. // 获取一个0~100之间的数
  29. var nums1 = Math.floor(Math.random()*100);
  30. console.log(nums1);
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="4.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

05Date对象相关的函数

  1. // 日期对象
  2. // 创建日期对象
  3. var date = new Date();
  4. // 获取年
  5. console.log(date.getFullYear());
  6. // 月份范围：0 ~ 11
  7. console.log(date.getMonth()+1);
  8. // 日期范围：1 ~ 31
  9. console.log("当前日期："+date.getDate());
  10. // 星期天是0，其他是 1~ 6
  11. console.log("星期" +date.getDay());
  12. // 小时
  13. console.log("小时：" +date.getHours());
  14. // 分
  15. console.log("分：" +date.getMinutes());
  17. // 设置日期对象的信息
  18. date.setHours(11);
  19. // 输出时间字符串
  20. console.log(date.toString());
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="5.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>

06异常

  4. // var sum;
  5. // console.log(sum.length);
  7. // 递归，就是自己调用自己
  8. // 递归要有合理的退出条件，否则就可能造成RangeError: Maximum call stack size exceeded
  9. function Add(num){
  10.     if(num == 1){
  11.         return 1;
  12.     } else {
  13.         return num+Add(num-1);
  14.     }
  15. }
  17. var sum = Add(23);
  18. console.log(sum);
  20. // 程序跑起来可以暂停，让调试来控制
  21. // debugger
  22. // 求100的和
  23. var sum = 0, i;
  24. for(i = 1; i<=100; i++) {
  25.   sum += i;
  26. }
  27. console.log(sum);
  29. // 乘法
  30. function mul(a,b){
  31.     return a * b ;
  32. }
  33. console.log(mul(1,"hello"));
  34. // 除法
  35. function div(a,b){
  36.     if(b==0){
  37.         throw "除0异常";
  38.     }
  39.     return a / b ;
  40. }
  41. // console.log(div(1,0));
  42. try {
  43.     // 这个语句块就是用户代码
  44.     console.log(div(1,0));
  45.     // console.log(mul(1,2));
  46. } catch{
  47.     // 这个语句块是异常时运行
  48.     console.log("出错了");
  49. } finally{
  50.     // 这个语句块是不论异常还是正常都会执行
  51.     console.log("程序运行完毕");
  52. }
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.     <title>Document</title>
  8.     <script src="6.js"></script>
  9. </head>
  10. <body>
  12. </body>
  13. </html>