JavaScript[web前端]

布满荆棘的人生 2024-04-06 09:28 81阅读 0赞

**目录**

JavaScript

1 概述

1.1 历史

1.2 功能及作用

1.3 Js与html,css的关系

2 基本语法

2.1 脚本写在哪里？

2.2 变量

2.3 数据类型

2.4 算术运算符

2.5 赋值运算符

2.6 比较运算符

2.7 逻辑运算符

2.8 条件运算符

2.9 控制语句

3 函数

3.1 定义函数

3.2 函数调用

3.3 全局函数

4 内置对象

4.1 字符串对象

4.2 Date对象

4.3 Math对象

4.4 Array数组

5 事件

6 html DOM对象

6.1 概述

6.2 获取与操作

7 表单验证

8 计时

--------------------

## JavaScript ##

### 1 概述 ###

#### 1.1 历史 ####

JavaScript是由Netscape公司(美国网景公司，做浏览器)开发的一种脚本语言，并将这种语言命名为LiveScript，Java是sun公司(美国斯坦福大学校办公司)开发的面向对象的语言，与java一样，LiveScript也是面向对象的语言，而且无需编译，可由浏览器直接解释运行，Netscape公司见LiveScript大有发展前途，而SUN公司也觉得可以利用Livescript为Java的普及做铺垫，于是两家进行合作，将LiveScript改名为JavaScript，一般简称为js。

**JavaScript语言与java语言的区别：**

两者虽然在名称上有些许相似，但其实是两种完全不同的语言。Java是一种程序设计语言，JavaScript是客户端的脚本语言，它们唯一相同的地方可能就是名字中都有Java。

1.  开发公司不同， JavaScript是由Netscape公司开发的，而Java是sun公司开发的
2.  javascript是基于对象的，它是一种脚本语言，是一种基于对象和事件驱动的编程语言，因而它本身提供了非常丰富的内部对象供设计人员使用。而Java是面向对象的，即Java是一种真正的面向对象的语言，即使是开发简单的程序也必须设计对象。
3.  在浏览器中的执行方式不同， JavaScript是一种解释性编程语言，执行之前不需要编译，而java的源代码在执行之前，必须经过编译。

#### 1.2 功能及作用 ####

JavaScript一种直译式脚本语言，是嵌入在网页中，用来为网页添加各式各样的动态效果(效果动态、数据动态，javaScript可以操作网页内容)，不需要编译可直接通过某种特定的引擎解释运行，通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。

脚本语言：不需要编译(例如：sql、html、css、js、python )，由某种特定的引擎(数据库，浏览器)解释执行

1. 响应客户端鼠标和键盘事件

*  在网页上我们的鼠标是可以进行各种操作的，比如：鼠标移入事件、鼠标移出事件

图示：

![d50bd21f3620423fb127d4521cbbdfef.jpeg][]

鼠标移入：

![1b4bc41eda0241c4903044e3022131ae.jpeg][]

2. 客户端页面表单数据验证，表单就是有各种输入选择组件，可以让用户输入信息，最终将数据提交到后端

*  案例：百度账号登录账号密码验证：账号或密码输入为空的时候就不会向后端发送进行交互这样的数据是没有意义的，只有在账号密码都不为空的时候才会发送数据，和后端交互，这样的验证就叫做表单验证
    
     *  图示： ![d3b72b8051e546e5a2e1a3004366eda0.jpeg][]

3. 动态操作网页内容，改变页面标签的样式

#### 1.3 Js与html,css的关系 ####

JavaScript是一种基于对象和事件驱动并具有安全性的解释性语言，其目的就是增强Web客户交互，弥补了HTML的缺陷。

1.  html是网页的骨架(内容)
2.  css是网页的外观(皮肤)
3.  javaScript是网页的行为(动作)

### 2 基本语法 ###

#### **2.1 脚本写在哪里？** ####

javaScript脚本写在一组<script>标签中，此标签可以放在head中或body中，一般习惯放在head中，如果代码量较多，还可以将脚本写在外部的.js文件中，在html页面中导入外部的.js文件。

对话框：

*  alert(‘welcome!’); 提示对话框

<!DOCTYPE html>
    <html>
        <head>
            
            <script src="外部文件.js" type="text/javascript" charset="utf-8"></script>
            <script type="text/javascript">
                // 此标签内写js代码
                alert("你好，js！")
            </script>
        </head>
        <body>
            ....
        </body>
    </html>

//外部.js文件中
    alert("外部脚本");

注意：脚本语言，完全按照执行先后顺序来的，从上往下逐行执行，不是整体编译的

运行效果顺序：![78b880723d194e37a8aa3ec4d9f6c97d.jpeg][]

点击确定然后再弹出：![7cb35642c90c4d63822e7d8f92691348.jpeg][]

#### 2.2 变量 ####

1.  javaScrit是一种弱类型语言
2.  声明变量：使用用var关键字 ，使用变量可以表示任何类型数据
    
    1.  例如：

var name;

1.  声明变量的同时对其赋值，赋予的值是什么类型，变量就是什么类型
    
     *  例如：
        
            var b = "abc";
                b = 20;

#### 2.3 数据类型 ####

虽然javaScript声明时不需要数据类型，但是他的值仍然是有类型的，因为也会参与运算

1.  数值型(number)： 包括整型数和浮点型
2.  布尔型(boolean)： 即逻辑值，true或flase。
3.  字符串型：由单个或多个文本字符组成，字符串是用单引号或双引号来说明的(使用单引号来输入包含引号的字符串)
4.  undefined类型：变量没有赋值，值不明确
5.  Object对象类型：javaScript是一种面向对象的语言，但是对于我们(学习后端的)而言，把他理解为一个半面向对象，半面向过程的语言

案例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript">
               /*
                   1.数值型number：整数和浮点都是数值型
               */
                var a = 10;
                var b = 2.21;
                alert(a+b);//12.21
                /*
                   2.布尔型boolean：true false
                */
                var c = false;
                var d = a>b;
                alert(d);//true
                /*
                   3.字符串：双引号("")、单引号('') 都表示字符串
                */
                var e = "aaa";
                var f = 'aaa';
                alert(typeof(e));//string
                alert(typeof(f));//string
                /*
                   4.undefined类型：声明了变量，但是没有明确变量值
                */
                var g;
                alert(typeof(g));//undefined
                alert(g==undefined);//true
                /*
                   5.Object对象类型：javaScript是一种面向对象的语言，但是对于我们而言，
                                    把他理解为一个半面向对象，半面向过程的语言
                */
                var data = new Date();
                    alert(data.getFullYear());//2022
                    alert(data.getMonth()+1);//9
                    alert(data.getDate());//14
            </script>
        </head>
        <body>
        </body>
    </html>

#### 2.4 算术运算符 ####

\+(加)、- (减)、\* (乘)、/ (除)、% (求余数(保留整数))、++ (累加)、-- (递减)

注意：

1.  \+可以进行“加法”与“连接”运算，如果两个运算符中的一个是字符串，javascript就将另一个转换成字符串，然后将两个运算数连接起来。
2.  减法、乘法、除法在进行运算时，如果两个运算符中有一个是字符串，js就会进行一个隐式的数据类型转换，然后再进行运算
    
     *  只有+在遇到字符串时不会转型，因为+还具有连接功能

案例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <script type="text/javascript">
                
                var a = 12;
                var b = 10;
                var c = "5";
                var d = "a";
                alert(a+b);//22 加法运算
                alert(a+c);//125 连接运算
                
                alert(a-b);//2 减法运算(数值与数值，是减法运算)
                alert(b-c);//5 数值与字符串的数字，会进行一个隐式数据类型转换
                alert(b-d);//NaN(not a number)，试图将字符串转为数字，没有转换成功(相当于java中的类型转换异常)
                alert(b*c);//50 也会进行一个隐式数据类型转换
            </script>
        </head>
        <body>
        </body>
    </html>

#### 2.5 赋值运算符 ####

= (x=y)

\+= (x+=y等价于x=x+y)

\-= (x-=y等价于x=x-y)

\*= ( x \*=y等价于x=x \*y)

/= (x/=y等价于x=x/y)

%= (x%=y等价于x=x%y)

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <script type="text/javascript">
               var a = 10;
               var b = "5";
               //连接作用 
               alert(a+=b);//105 连接功能
               /*
                 下面在运算时都对b进行了隐式的数据类型转换
                */
               alert(a-=b);//100 运算时的a=105
               alert(a*=b);//500 运算时的a=100
               alert(a/=b);//100 运算的a=500
               alert(a%b);//0 运算时的a=100
            </script>
        </head>
        <body>
        </body>
    </html>

#### 2.6 比较运算符 ####

= 赋值  
== 比较内容是否相等  
=== 全等 比较类型和内容是否都相同  
!= 不等于  
> 大于  
< 小于  
>= 大于或等于  
<= 小于或等于

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript"> 
               var a = 5;
               var b = "5";
               alert(a==b);//true
               alert(a===b);//false
            </script>
        </head>
        <body>
        </body>
    </html>

#### 2.7 逻辑运算符 ####

&& (and)

|| (or)

! (not)

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript">
                var a = 6;
                var b = 3;
                alert(a<10 && b>1);//true
                alert(a==5||b==5);//false
                alert(!(a==b));//true
            </script>
        </head>
        <body>
        </body>
    </html>

#### 2.8 条件运算符 ####

条件运算符就是基于某些条件对变量进行赋值

语法：

var result = (条件表达式)?结果1:结果2

当条件成立返回?后的内容，否则返回:后的内容

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript">
                var a = 6;
                var b = 3;
                var c = (a>b)?1:0;
                alert(c);// 1
            </script>
        </head>
        <body>
        </body>
    </html>

#### 2.9 控制语句 ####

第一种是选择结构：

1.  单一选择结构（if）
2.  二路选择结构（if/else）
3.  多路选择结构（switch）

第二种类型的程序控制结构是循环结构：

1.  由计数器控制的循环（for）
2.  在循环的开头测试表达式（while）
3.  在循环的末尾测试表达式（do/while）
4.  break continue

### 3 函数 ###

#### 3.1 定义函数 ####

基本语法：

function functionName([arguments]){ 
         javascript statements//函数体 
         [return expression]//返回值 
    }

*  function: 表示函数定义的关键字;
 *  functionName:表示函数名;
 *  arguments:表示传递给函数的参数列表，各个参数之间用逗号隔开，可以为空;
 *  statements: 表示实现函数功能的函数体;
 *  return expression:表示函数将返回expression的值，同样是可选的的语句。

#### 3.2 函数调用 ####

案例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript">
               //定义了一个没有参数，没有返回值的函数
               function test1(){
                   alert();
               }
               //用函数名来调用函数
               test1();
               
               //有参函数，参数只需要定义参数名，不需要定义参数类型
               function test2(a,b,c){
                   alert(a+":"+b+":"+c);
               }
               //实参可以传入任意类型
               test2(10,"a",false);
               
               //有返回值不需要定义返回值类型
               function test3(a,b){
                   //...
                   return a+b;
               }
               //实参可以传入任意类型
               var s = test3(10,"5");
                   alert(s);
            </script>
        </head>
        <body>
        </body>
    </html>

#### 3.3 全局函数 ####

全局函数(又称内置函数)：就是js函数库中以及内置好的，在安装浏览器时，已经安装好了，只需要调用即可。

*  eg:alert();

**1.parseInt(arg)**

*  把括号内的内容转换成整数之后的值。如果括号内是字符串，则字符串开头的数字部分被转换成整数，如果以字母开头，则返回“NaN”

**2.parseFloat(arg)**

*  把括号内的字符串转换成浮点数之后的值，字符串开头的数字部分被转换成浮点数，如果以字母开头，则返回“NaN”

**3.typeof (arg)**

*  返回arg值的数据类型

**4.eval(arg)**

*  把字符串参数，当做js脚本运算执行

案例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript">
                /*      
                    parseInt(); 把浮点数--->整数，把数字字符串--->整数，
                                字符串包含字母--->转换到字母前，以字母开头--->NaN      
                    parseFloat(); 运算时字符串数字转为浮点数 浮点---->浮点
                                  字符串以非数字开头--->NaN  
                */
               var a = 10;
               var b = 10.5;
               var c = "5a";
               var d = "a5";
               var e = "5.5";
               alert(a+parseInt(b));//20
               alert(a+c);//105a + 字符串连接功能
               alert(a+parseInt(c));//15 遇到字符串相加时就需要用到数据类型转换
               alert(a+parseInt(d));//NaN 
               
               alert(a+parseFloat(b));//20.5
               alert(a+parseFloat(e));//15.5
               
               alert(typeof(a));//number
    
               var f1 = "2+3";
               var f2 = "alert(f1);";
               alert(f1);//2+3 因为"2+3"是一个字符串，所以直接返回的是2+3
               alert(eval(f1));//5 把字符串当做js脚本执行
               eval(f2);//2+3 把alert当做函数调用了
            </script>
        </head>
        <body>
        </body>
    </html>

### 4 内置对象 ###

#### 4.1 字符串对象 ####

属性：length用法：返回该字符串的长度

方法：

1.  charAt(n)：返回该字符串位于第n位的单个字符
2.  indexOf(char)：返回指定char首次出现的位置
3.  lastIndexOf(char) ：跟 indexOf() 相似，不过是从后边开始找
4.  substring(start,end) ：返回原字符串的子字符串，该字符串是原字符串从start位置到end位置的前一位置的一段
5.  substr(start,length) ：返回原字符串的子字符串，该字符串是原字符串从start位置开始，长度为length的一段
6.  split(分隔符字符) ：返回一个数组，该数组是从字符串对象中分离开来的，<分隔符字符>决定了分离的地方，它本身不会包含在所返回的数组中

#### 4.2 Date对象 ####

获取日期：

1.  new Date() 返回当日的日期和时间
2.  getFullYear() 返回四位数字年份
3.  getDate() 返回一个月中的某一天 (1 ~ 31)
4.  getMonth() 返回月份 (0 ~ 11)
5.  getDay() 返回一周中的某一天 (0 ~ 6)
6.  getHours() 返回 Date 对象的小时 (0 ~ 23)
7.  getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
8.  getSeconds() 返回 Date 对象的秒数 (0 ~ 59))

#### 4.3 Math对象 ####

*  Math 对象，提供对数据的数学计算。

属性：PI 返回π（3.1415926535...)

方法：

1.  Math.abs(x)
    
     *  绝对值计算
2.  Math.pow(x,y)
    
     *  数的幂，x的y次幂
3.  Math.sqrt(x)
    
     *  计算平方根
4.  Math.ceil(x)
    
     *  对一个数进行上舍入
5.  Math.floor(x)
    
     *  对一个数进行下舍入。
6.  Math.round(x)
    
     *  把一个数四舍五入为最接近的整数
7.  Math.random()
    
     *  返回 0 ~ 1 之间的随机数
8.  Math.max(x,y)
    
     *  返回 x 和 y 中的最大值
9.  Math.min(x,y)
    
     *  返回 x 和 y 中的最小值

案例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript">
               // 字符串对象
               var s1 = "abc";
               var s2 = new String("abc:def:gh");
               alert(s1.length);//3
               alert(s2.charAt(2));//c
               alert(s2.lastIndexOf("h"));//9
               alert(s2.substring(1,4));//bc: 开始位置，结束长度(不包含)
               alert(s2.substr(1,4));//bc:d  开始位置，截取的长度
               alert(s2.split(":"));//abc,def,gh
               // 日期对象
               var data = new Date();
               alert(data.getFullYear());//年份
               alert(data.getMonth()+1);//月份(0-11)
               alert(data.getDay()+1);//一周中的第几天(0-6)
               alert(data.getHours());//返回Date对象的小时(0-23)
               alert(data.getMinutes());//返回Date对象的分钟(0-59)
               alert(data.getSeconds());//返回Date对象的秒数(0-59)
               alert(data.getDate());//返回一个月中的某一天(1-31)
               // 算术对象(不需要new对象，可以直接通过Math调用)
               alert(Math.PI);//3.141592653589793
               alert(Math.abs(-9));//9
               alert(Math.pow(2,3));//8
               alert(Math.sqrt(9));//3
               alert(Math.ceil(2.4));//3
               alert(Math.floor(2.4));//2
               alert(Math.round(3.5));//4
               alert(Math.random());//0.09744582582601757
               alert(Math.max(1,2));//2
               alert(Math.min(1,2));//1
            </script>
        </head>
        <body>
        </body>
    </html>

#### 4.4 Array数组 ####

属性：

*  length ：数组的长度，即数组里有多少个元素。

方法：

1.  join(<分隔符>) ：返回一个字符串，该字符串把数组中的各个元素串起来，用<分隔符>置于元素与元素之间。
2.  reverse() 使数组中的元素顺序反过来。如果对数组\[1, 2, 3\]使用这个方法，它将使数组变成：\[3, 2, 1\]。
3.  sort() ：使数组中的元素按照一定的顺序排列。如果不指定<方法函数>，则按字母顺序排列，对数字排序需要调用排序函数。

1.  **function sortNumber(a,b)\{** 
2.   **return a - b;**
3.  **\}**

案例：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript">
                /*
                     数组的声明创建            
                 */
                // ①通过下标赋值
                var array1 = new Array();//创建一个空数组
                     array1[0] = 1;
                     array1[1] = "s";
                     array1[2] = false;
                   alert(array1);//1,s,false
                
                // ②类似于构造函数方式赋值        
                var array2 = new Array(1,2,true,new Date());
                   alert(array2);//1,2,true,Mon Sep 19 2022 21:20:57 GMT+0800 (中国标准时间)
                
                // ③[]直接赋值
                var array3 = ["ab","cd","efg"];
                // 把数组中的元素使用特定的符号连接为字符串
                var s = array3.join(":")
                alert(s);//ab:cd:efg
                // 逆序
                alert(array3.reverse());//efg,cd,ab
                
                // 排序   
                var array4 = ['a','d','b','c']
                alert(array4.sort());//a,b,c,d
                
                var array5 = [2,11,4,1,21]
                alert(array5.sort());//1,11,2,21,4
                //按排序规则定义函数，传入到sort方法
                alert(array5.sort(sortNumber));//1,2,4,11,21
                //定义一个排序的函数
                function sortNumber(a,b){
                    return a-b;
                }
                </script>
        </head>
        <body>
        </body>
    </html>

### 5 事件 ###

事件：html中的标签拥有事件，通过事件可以驱动javascipt函数，从而产生一个动态效果

常用事件:

1.  onclick() 鼠标点击标签时；
2.  onblur() 标签失去焦点;
3.  onfocus() 标签获得焦点;
4.  onmouseover() 鼠标被移到某标签之上;
5.  onmouseout() 鼠标从某标签移开;
6.  onload() 在网页加载完毕后触发相应的的事件处理程序;
7.  onchange() 指当前标签失去焦点并且标签的内容发生改变时触发事件处理程序。

### 6 html DOM对象 ###

#### 6.1 概述 ####

DOM是Document Object Model文档对象(网页中的标签)模型的缩写，通过html dom，可用javaScript操作html文档的所有标签。

*  文档对象模型：这指的是一类对象，指的是网页中的标签
 *  从js的角度，认为网页中的每一个标签就是一个独立的对象，这一类对象被称为dom对象，这样就可以以面向对象的思想来操作网页
 *  那么如何获取网页中的标签呢？
    
     *  使用document对象来获取

#### 6.2 获取与操作 ####

*  我们可以通过 JavaScript来操作HTML标签

*  要操作，就要先获得，我们可以使用document对象，获取网页中的标签

四种获得标签的方法：

1.  通过id找到 HTML 标签 document.getElementById("id");
2.  通过标签名找到 HTML 标签 document.getElementsByTagName("p");
3.  通过类名找到 HTML 标签 document.getElementsByClassName("p");
4.  通过name找到 HTML 标签 document.getElementsByName("name");

**注意：**

**下面三个方法即使只得到一个元素，返回的也是一个集合，不能直接通过.value获取标签值，需要遍历集合来获取**

获得到标签后，我们可以对标签进行以下操作：

1.  对标签的属性进行操作
    
     *  标签中支持的属性，如value、type等，包含获取属性，给属性赋值
2.  对标签的内容进行操作
    
     *  一般通过innerHTML获取到标签体中的内容，包含子标签
3.  对标签的样式进行操作
    
     *  例如：hight、width、backgroundColor等

操作时，要明确几点：

1.  触发动作的标签是谁
2.  对哪个标签操作，给赋予id属性
3.  对标签的什么内容操作

案例：

<html>
        <head>
            <meta charset="utf-8">
            <title></title>
            <script type="text/javascript">
               // 1.对标签属性操作
               function test1(){
                   var tobj1 = document.getElementById("t1");
                   alert(tobj1);//[object HTMLInputElement]
                   console.log(tobj1.value);//拿到文本框上的内容
                   console.log(tobj1.type);//得到标签的类型
                   var tobj2 = document.getElementById("t2"); 
                       tobj2.value = tobj1.value;//将文本框1的value值赋给文本框2的value值
                       tobj1.value = "";//将文本框1清空
                       tobj1.type = "radio";//改变标签类型  
               }
               // 2.对标签内容操作
               function test2(){
                   var pobj = document.getElementById("p1");
                   alert(pobj.innerHTML);//<b>这是一个段落</b> 获取到标签体中的内容,包含子标签
                   var divobj = document.getElementById("div1");
                       divobj.innerHTML = pobj.innerHTML;
               }
               // 3.对标签样式操作
               function test3(){
                    var divobj = document.getElementById("div2");
                     divobj.style.width = "100px";
                     divobj.style.height = "100px";
                     divobj.style.backgroundColor = "red";
               }
            </script>
        </head>
        <body>
            
            <input type="text" id="t1" value=""/>
            <input type="text" id="t2" value=""/>
            <input type="button" value="测试按钮1" onclick="test1()"/>
            <hr style="width: 35%; margin-left: 0px;"/>
            
            
            <p id="p1">
                <b>这是一个段落</b>
            </p>
            <div id="div1"></div>
            <input type="button" value="测试按钮2" onclick="test2()" style="margin-top: 10px;"/>
            <hr style="width: 35%; margin-left: 0px;"/>
            
            
            <div id="div2" style="width: 50px; height: 50px; background-color: aquamarine;"></div>
            <input type="button" value="测试按钮3" onclick="test3()" style="margin-top: 10px;"/>
            <hr style="width: 35%; margin-left: 0px;"/>
        </body>
    </html>

效果：

![0be3033c1490431180836e57ca60bd4f.gif][]

### 7 表单验证 ###

在客户端为后端服务器收集数据，里面有许多可以输入，选择的组件，凡是从前端向后端发送的数据,都需要进行验证，我们不能将垃圾数据随便传递到后端处理，这样才能减少后端服务器的压力，因此我们需要通过借助js实现对内容逻辑的验证

*  在提交表单时，如何触发js？
    
     *  onsubmit: 在点击submit按钮时触发

案例：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>login</title>
        <style>
            *{
                margin: 0;
                padding: 0;
            }
            html{
                height: 100%;
            }
            body{
                height: 100%;
            }
            .container{
                height: 100%;
                background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
            }
            .login-wrapper{
                background-color: #fff;
                width: 360px;
                height: 430px;
                border-radius: 15px;
                padding: 0px 50px;
                position: relative;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }
            .header{
                font-size: 38px;
                font-weight: bold;
                text-align: center;
                line-height: 140px;
            }
            .form_box{
                width: 100%;
                margin-top: 0px;
            }
            #passwordid,#usernameid{
                width: 340px;
                margin: auto;
                padding: 10px 10px;
                margin-top: 15px;
                border: 0px;
                border: 1px solid rgb(128,125,125);
                /* border-bottom: 1px solid rgb(128,125,125); */
                font-size: 18px;
            }
            .btn{
                text-align: center;
                padding: 10px;
                width: 100%;
                border: 0px;
                margin-top: 15px;
                background-image: linear-gradient(to right, #a6c1ee, #fbc2eb);
                color: #fff;
            }
            #usernamemegid,#passwordmegid{
                margin-left: 10px;
            }
        </style>
        <script>
            // 验证账号
            function checkAccount(){
                var usernameobj = document.getElementById("usernameid");
                var usernamemsgobj = document.getElementById("usernamemegid");
                if(usernameobj.value.length==0){
                    usernamemsgobj.innerHTML = "账号不能为空";
                    usernamemsgobj.style.color="red";
                    return false;
                }else{
                    usernamemsgobj.innerHTML = "√";
                    usernamemsgobj.style.color="green";
                    return true;
                }
            }
            // 验证密码
            function checkPassword(){
                var passwordobj = document.getElementById("passwordid");
                var passwordmsgobj = document.getElementById("passwordmegid");
                //对标签属性操作
                if(passwordobj.value.length==0){
                    passwordmsgobj.innerHTML = "密码不能为空";//对标签内容进行操作
                    passwordmsgobj.style.color="red";//对标签样式操作
                    return false;
                }else{
                    passwordmsgobj.innerHTML = "√";
                    passwordmsgobj.style.color="green";
                    return true;
                }
            }
             function checkForm(){
                // 账号密码都符合要求才会提交，否则返回false
                if(checkAccount()&&checkPassword()){
                    return true;
                }
                    return false;
             }
        </script>
    </head>
    <body>
        <div class="container">
            <div class="login-wrapper">
                <div class="header">Login</div>
                <div class="form_box">
                    <form action="server.html" method="get" onsubmit="return checkForm()">
                        <input type="text" name="username" placeholder="username" id="usernameid" onblur="checkAccount()">
                        <span id="usernamemegid"></span><br />
                        <input type="password" name="password" placeholder="password" id="passwordid" onblur="checkPassword()">
                        <span id="passwordmegid"></span><br />
                        <input type="submit" value="登录" class="btn"/>
                    </form>
                </div>
                </div>
            </div>
        </div>
    </body>
    </html>

效果：

![e0c68e1ef27c4197bfb2152d8d3d9f9e.gif][]

### 8 计时 ###

通过使用 JavaScript，我们有能力做到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

方法:

1.  setTimeout(“函数”,”时间”)
    
     *  未来的某时执行代码
2.  clearTimeout()
    
     *  取消setTimeout()
3.  setInterval(“函数”,”时间”)
    
     *  每隔指定时间重复调用
4.  clearInterval()
    
     *  取消setInterval()

案例(图片切换)：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style type="text/css">
    			.img_box{
    				width: 590px;
    				position: relative;
    			}
    			#left_btn,#right_btn{
    				width: 30px;
    				height: 50px;
    				background-color: darkgray;
    				text-align: center;
    				line-height: 50px;
    				position: absolute;
    				top: 210px;
    				border: 0px;
    				opacity: 0;
    			}
    			#right_btn{
    				right: 0px;
    				border-bottom-left-radius: 20px;
    				border-top-left-radius: 20px;
    			}
    			#left_btn{
    				left: 0px;
    				border-bottom-right-radius: 20px;
    				border-top-right-radius: 20px;
    			}
    		</style>
    		<script type="text/javascript">
    			var imgArr = new Array("img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg")
    		    var imgIndex = 0;
    			// 左移
    			function left_changeImg(){
    				imgIndex--;
    				if(imgIndex<0){
    					imgIndex = imgArr.length-1;
    				}
    				document.getElementById("imgId").src = imgArr[imgIndex];
    				/*var imgobj = document.getElementById("imgId");
    				imgobj.src = imgArr[imgIndex];*/
    			}
    			// 右移
    			function right_changeImg(){
    				imgIndex++;
    				if(imgIndex>=imgArr.length){
    					imgIndex = 0;
    				}
    				document.getElementById("imgId").src = imgArr[imgIndex];
    				/*var imgobj = document.getElementById("imgId");
    				imgobj.src = imgArr[imgIndex];*/
    			}
    			var t;
    			t = setInterval("right_changeImg()",2000);
    		    // 鼠标移入暂停播放 移出继续播放
    			function overOut(opa){
    				document.getElementById("left_btn").style.opacity = opa;
    				document.getElementById("right_btn").style.opacity = opa;
    				if(opa==0.5){
    					clearInterval(t);
    				}else{
    					t = setInterval("right_changeImg()",2000);
    				}
    			}
    		</script>
    	</head>
    	<body>
    		
    		<div class="img_box" onmouseout="overOut(0)" onmouseover="overOut(0.5)">
    			<img src="img/1.jpg" id="imgId"/>
    			<input type="button" value="<" id="left_btn" onclick="left_changeImg()"/>
    			<input type="button" value=">" id="right_btn" onclick="right_changeImg()"/>
    		</div>
    	</body>
    </html>

效果：

![f0ad8112159043a8a496ea81191dab05.gif][]

[d50bd21f3620423fb127d4521cbbdfef.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/13c305c643f14e519640dea01073acc9.jpeg
[1b4bc41eda0241c4903044e3022131ae.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/4871d7725a8c4c2590963ab033a1b83f.jpeg
[d3b72b8051e546e5a2e1a3004366eda0.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/9d29c37946504f11a1fd99c571c01d91.jpeg
[78b880723d194e37a8aa3ec4d9f6c97d.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/3690af7cc696468c93597fc211e5a867.jpeg
[7cb35642c90c4d63822e7d8f92691348.jpeg]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/96ef02dfe9ad416792fda640195725bb.jpeg
[0be3033c1490431180836e57ca60bd4f.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/00ccc383c1944688a77f374ec9e0fcfd.gif
[e0c68e1ef27c4197bfb2152d8d3d9f9e.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/0c21ed1b4a6f4c988adb8f882daab245.gif
[f0ad8112159043a8a496ea81191dab05.gif]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/06/b81a625b85454591a33b49b7141ecb8a.gif