JavaScript 快速应用基本类型、window、计时器、Cookie

偏执的太偏执、 2023-10-06 22:43 34阅读 0赞

#### 阅读目录 ####

*  JavaScript Number 对象
 *   *  精度
     *  二进制、八进制、十六进制
     *  无穷大（Infinity）
     *  NaN – 非数字值
     *  数字可以是数字或者对象
     *  Number 属性
     *  数字方法
     *  数字类型原型上的一些方法
 *  JavaScript 字符串(String)对象
 *   *  字符串（String）
     *  在字符串中查找字符串
     *  内容匹配
     *  替换内容
     *  字符串大小写转换
     *  字符串转为数组
     *  特殊字符
     *  字符串属性和方法
 *  JavaScript Date(日期)对象
 *   *  设置日期
     *  两个日期比较
 *  JavaScript Array(数组)对象
 *   *  创建一个数组
     *  访问数组
     *  在一个数组中你可以有不同的对象
     *  数组方法和属性
     *  创建新方法
 *  JavaScript Boolean（布尔）对象
 *   *  Boolean 对象属性
     *   *  JavaScript Boolean constructor 属性
         *  JavaScript Boolean prototype 构造器
     *  Boolean 对象方法
     *   *  JavaScript Boolean toString() 方法
         *  JavaScript Boolean valueOf() 方法
 *  JavaScript Math(算数)对象
 *   *  算数值
     *  算数方法
 *  JavaScript RegExp 对象
 *   *  RegExp 修饰符
     *  test() 方法搜索字符串指定的值，根据结果并返回真或假
     *  exec() 方法检索字符串中的指定值
 *  JavaScript Window 浏览器对象模型
 *   *  Window 对象
     *  Window 尺寸
     *  其他 Window 方法
 *  JavaScript Window Screen
 *   *  Window Screen 可用宽度
     *  Window Screen 可用高度
 *  JavaScript Window Location
 *   *  Window Location Href
     *  Window Location Pathname
     *  Window Location Assign
 *  JavaScript Window History
 *   *  Window history.back()
     *  Window history.forward()
 *  JavaScript Window Navigator
 *  JavaScript 弹窗
 *   *   **警告框**
     *   **确认框**
     *   **提示框**
     *   **换行**
 *  JavaScript 计时事件
 *   *  setInterval() 间隔指定的毫秒数不停地执行指定的代码
     *  setTimeout() 在指定的毫秒数后执行指定代码
 *  JavaScript Cookie
 *   *  使用 JavaScript 创建 Cookie
     *  使用 JavaScript 读取 Cookie
     *  使用 JavaScript 修改 Cookie
     *  使用 JavaScript 删除 Cookie
     *  Cookie 字符串
     *  JavaScript Cookie 实例
     *   *  设置 cookie 值的函数
         *  获取 cookie 值的函数
         *  检测 cookie 值的函数

## JavaScript Number 对象 ##

JavaScript 只有一种数字类型，可以使用也可以不使用小数点来书写数字。

**JavaScript 数字**

JavaScript 数字可以使用也可以不使用小数点来书写：

var pi=3.14;    // 使用小数点
    var x=34;       // 不使用小数点

极大或极小的数字可通过科学（指数）计数法来写：

var y=123e5;    // 12300000
    var z=123e-5;   // 0.00123

**所有 JavaScript 数字均为 64 位**

JavaScript 不是类型语言。与许多其他编程语言不同，JavaScript 不定义不同类型的数字，比如整数、短、长、浮点等等。

在JavaScript中，数字不分为整数类型和浮点型类型，所有的数字都是由 浮点型类型。JavaScript 采用 IEEE754 标准定义的 64 位浮点格式表示数字，它能表示最大值 `（Number.MAX_VALUE）` 为 `±1.7976931348623157e+308`，最小值 `（Number.MIN_VALUE）为 ±5e-324`。

此格式用 64 位存储数值，其中 0 到 51 存储数字（片段），52 到 62 存储指数，63 位存储符号：

![在这里插入图片描述][fcfb3189a9ef4f779d807f398ceaec7a.png]

<table> 
 <tbody> 
  <tr> 
   <th>值 (aka Fraction/Mantissa)</th> 
   <th>指数（Exponent）</th> 
   <th>符号（Sign）</th> 
  </tr> 
  <tr> 
   <td>52 bits (0 – 51)</td> 
   <td>11 bits (52 – 62)</td> 
   <td>1 bit (63)</td> 
  </tr> 
 </tbody> 
</table>

![在这里插入图片描述][041aaf20b65e47ba8b326a62d221b088.png]

### 精度 ###

整数（不使用小数点或指数计数法）最多为 15 位。

实例：

<button onclick="myFunction()">点我</button>
    <p id="demo"></p>
    
    <script>
    function myFunction() {
        
        var x = 999999999999999;
        var y = 9999999999999999;
        document.getElementById("demo").innerHTML = x + "<br>" + y;
    }
    </script>

![在这里插入图片描述][c30c4bf2341c427badb34ea0dbaf2840.png]  
小数的最大位数是 17，但是浮点运算并不总是 100% 准确：

var x;
    document.write("<p>仅显示17位: ");
    
    x=12345678901234567890;
    document.write(x + "</p>");
    document.write("<p>0.2 + 0.1 = ");
    
    x=0.2+0.1;
    document.write(x + "</p>");
    document.write("<p>可以通过乘以10或除以10来计算: ");
    
    x=(0.2*10+0.1*10)/10;
    document.write(x +"</p>");

显示

仅显示17位: 12345678901234567000
    
    0.2 + 0.1 = 0.30000000000000004
    
    可以通过乘以10或除以10来计算: 0.3

### 二进制、八进制、十六进制 ###

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 “x”，则解释为十六进制数。

var y = 0377;
    var z = 0xFF; 
    document.write(y + "<br>");// 255
    document.write(z + "<br>");// 255

输出：

255
    255

**注：绝不要在数字前面写零，除非您需要进行八进制转换。**

默认情况下，JavaScript 数字为十进制显示。

但是你可以使用 `toString()` 方法 输出16进制、8进制、2进制。

var myNumber = 128;
    document.write(myNumber + ' 十进制<br>');
    document.write(myNumber.toString(16) + ' 十六进制<br>');
    document.write(myNumber.toString(8) + ' 八进制<br>');
    document.write(myNumber.toString(2) + ' 二进制<br>');

输出：

128 十进制
     80 十六进制
    200 八进制
    10000000 二进制

### 无穷大（Infinity） ###

当数字运算结果超过了 JavaScript 所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在 JavaScript 中以 Infinity 表示。

同样地，当负数的值超过了 JavaScript 所能表示的负数范围，结果为负无穷大，在JavaScript 中以 -Infinity 表示。

无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。

myNumber=2;
    
    while (myNumber!=Infinity){
        
        myNumber=myNumber*myNumber;
        document.write(myNumber +'<BR>');
    }

输出结果：

4
    16
    256
    65536
    4294967296
    18446744073709552000
    3.402823669209385e+38
    1.157920892373162e+77
    1.3407807929942597e+154
    Infinity

除以 0 也产生了无限：

var x = 2/0;
    var y = -2/0;
    document.write(x + "<br>");// Infinity
    document.write(y + "<br>");// -Infinity

输出结果：

Infinity
    -Infinity

### NaN – 非数字值 ###

NaN 属性是代表非数字值的特殊值。  
该属性用于指示某个值不是数字。  
可以把 Number 对象设置为该值，来指示其不是数字值。

你可以使用 `isNaN()` 全局函数来判断一个值是否是 NaN 值。

<p>一个数字除以一个字符串结果不是一个数字</p>
    <p>一个数字除以一个字符串数字结果是一个数字</p>
    <p id="demo"></p>
    
    <script>
    var x = 1000 / "Apple";
    var y = 1000 / "1000";
    document.getElementById("demo").innerHTML = isNaN(x) + "<br>" + isNaN(y);
    // true
    // false
    </script>

输出结果：

一个数字除以一个字符串结果不是一个数字
    
    一个数字除以一个字符串数字结果是一个数字
    
    true
    false

除以 0 是无穷大，无穷大是一个数字:

<p id="demo"></p>
    
    <script>
    var y = 1000 / 0; // Infinity
    document.getElementById("demo").innerHTML = isNaN(y);// false
    </script>

### 数字可以是数字或者对象 ###

数字可以私有数据进行初始化，就像 `x = 123;`

JavaScript 数字对象初始化数据， `var y = new Number(123);`

<p id="demo"></p>
    
    <script>
    var x = 123;              // x 是一个数字
    var y = new Number(123);  // y 是一个对象
    var txt = typeof(x) + " " + typeof(y);
    document.getElementById("demo").innerHTML=txt; // number object
    </script>

<p id="demo"></p>
    
    <script>
    var x = 123;              // x 是一个数字
    var y = new Number(123);  // y 是一个对象
    document.getElementById("demo").innerHTML = x===y; // false
    </script>

### Number 属性 ###

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>Number.MAX_VALUE</code></td> 
   <td>最大值</td> 
  </tr> 
  <tr> 
   <td><code>Number.MIN_VALUE</code></td> 
   <td>最小值</td> 
  </tr> 
  <tr> 
   <td><code>Number.NaN</code></td> 
   <td>非数字</td> 
  </tr> 
  <tr> 
   <td><code>Number.NEGATIVE_INFINITY</code></td> 
   <td>负无穷，在溢出时返回</td> 
  </tr> 
  <tr> 
   <td><code>Number.POSITIVE_INFINITY</code></td> 
   <td>正无穷，在溢出时返回</td> 
  </tr> 
  <tr> 
   <td><code>Number.EPSILON</code></td> 
   <td>表示 1 和比最接近 1 且大于 1 的最小 Number 之间的差别</td> 
  </tr> 
  <tr> 
   <td><code>Number.MIN_SAFE_INTEGER</code></td> 
   <td>最小安全整数。</td> 
  </tr> 
  <tr> 
   <td><code>Number.MAX_SAFE_INTEGER</code></td> 
   <td>最大安全整数。</td> 
  </tr> 
 </tbody> 
</table>

### 数字方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>Number.parseFloat()</code></td> 
   <td>将字符串转换成浮点数，和全局方法&nbsp;<code>parseFloat()</code>&nbsp;作用一致。</td> 
  </tr> 
  <tr> 
   <td><code>Number.parseInt()</code></td> 
   <td>将字符串转换成整型数字，和全局方法&nbsp;<code>parseInt()</code>&nbsp;作用一致。</td> 
  </tr> 
  <tr> 
   <td><code>Number.isFinite()</code></td> 
   <td>判断传递的参数是否为有限数字。</td> 
  </tr> 
  <tr> 
   <td><code>Number.isInteger()</code></td> 
   <td>判断传递的参数是否为整数。</td> 
  </tr> 
  <tr> 
   <td><code>Number.isNaN()</code></td> 
   <td>判断传递的参数是否为&nbsp;<code>isNaN()</code>。</td> 
  </tr> 
  <tr> 
   <td><code>Number.isSafeInteger()</code></td> 
   <td>判断传递的参数是否为安全整数。</td> 
  </tr> 
 </tbody> 
</table>

### 数字类型原型上的一些方法 ###

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>toExponential()</code></td> 
   <td>返回一个数字的指数形式的字符串，如：1.23e+2</td> 
  </tr> 
  <tr> 
   <td><code>toFixed()</code></td> 
   <td>返回指定小数位数的表示形式。<p></p> 
    <div> 
     <pre><span>复制</span>var a=123;
b=a.toFixed(2); // b="123.00"</pre> 
    </div> </td> 
  </tr> 
  <tr> 
   <td><code>toPrecision()</code></td> 
   <td>返回一个指定精度的数字。如下例子中，a=123 中，3会由于精度限制消失:<p></p> 
    <div> 
     <pre><span>复制</span>var a=123;
b=a.toPrecision(2); // b="1.2e+2"</pre> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

## JavaScript 字符串(String)对象 ##

String 对象用于处理已有的字符块。

**JavaScript 字符串**

一个字符串用于存储一系列字符就像 `“willem”.`

一个字符串可以使用单引号或双引号：

var blogname="willem";
    var blogname='willem';

你使用位置（索引）可以访问字符串中任何的字符：

var character=blogname[7];

字符串的索引从零开始, 所以字符串第一字符为 `[0]`，第二个字符为 `[1]`，等等。

你可以在字符串中使用引号，如下实例：

var answer="It's alright";
    var answer="He is called 'Johnny'";
    var answer='He is called "Johnny"';

或者你可以在字符串中使用转义字符 `(\)` 使用引号：

var answer='It\'s alright';
    var answer="He is called \"Johnny\"";

### 字符串（String） ###

字符串（String）使用长度属性 length 来计算字符串的长度：

var txt="Hello World!";
    document.write(txt.length+"<br />");
    
    var txt="ABCDEFGHIJKLMNOPQRSTUVWXYZ";
    document.write(txt.length+"<br />");
    
    var txt="欢迎来到我的博客！"+"<br />";
    document.write(txt.length);

输出结果：

12
    26
    15

### 在字符串中查找字符串 ###

字符串使用 `indexOf()` 来定位字符串中某一个指定的字符首次出现的位置：

var str="Hello world, welcome to the universe.";
    var n=str.indexOf("welcome"); // 13

如果没找到对应的字符函数返回 `-1`。

`lastIndexOf()` 方法在字符串末尾开始查找字符串出现的位置。

### 内容匹配 ###

`match()` 函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。

var str="Hello world!";
    document.write(str.match("world") + "<br>");
    document.write(str.match("World") + "<br>");
    document.write(str.match("world!"));

输出结果：

world
    null
    world!

### 替换内容 ###

`replace()` 方法在字符串中用某些字符替换另一些字符。

str="Please visit Microsoft!"
    var n=str.replace("Microsoft","willem");
    console.log(n); // Please visit willem!

### 字符串大小写转换 ###

字符串大小写转换使用函数 `toUpperCase() / toLowerCase():`

var txt="Hello World!";       // String
    var txt1=txt.toUpperCase();   // txt1 文本会转换为大写
    var txt2=txt.toLowerCase();   // txt2 文本会转换为小写

### 字符串转为数组 ###

字符串使用 `split()` 函数转为数组:

txt="a,b,c,d,e"   // String
    txt.split(",");   // 使用逗号分隔
    txt.split(" ");   // 使用空格分隔
    txt.split("|");   // 使用竖线分隔

### 特殊字符 ###

Javascript 中可以使用反斜线 `（\）` 插入特殊符号，如： 撇号，引号等其他特殊符号。

查看如下 JavaScript 代码：

var txt="We are the so-called "Vikings" from the north.";
    document.write(txt);

在 JavaScript 中，字符串的开始和停止使用单引号或双引号。  
这意味着，上面的字符串将被切成： `We are the so-called`

解决以上的问题可以使用反斜线来转义引号：

var txt="We are the so-called \"Vikings\" from the north.";
    document.write(txt);

输出结果：

We are the so-called "Vikings" from the north.

下表列出其他特殊字符，可以使用反斜线转义特殊字符：

### 字符串属性和方法 ###

属性:

length
      prototype
    constructor

方法:

charAt()
    charCodeAt()
        concat()
    fromCharCode()
         indexOf()
     lastIndexOf()
      match()
    replace()
     search()
    slice()
    split()
       substr()
    substring()
    toLowerCase()
    toUpperCase()
    valueOf()

## JavaScript Date(日期)对象 ##

创建日期：Date 对象用于处理日期和时间，可以通过 new 关键词来定义 Date 对象。

以下代码定义了名为 myDate 的 Date 对象：

有四种方式初始化日期：

new Date();
    new Date(value);
    new Date(dateString);
    new Date(year, monthIndex [, day [, hours [, minutes [, seconds [, milliseconds]]]]]);

上面的参数大多数都是可选的，在不指定的情况下，默认参数是0。

实例化一个日期的一些例子：

var today = new Date()
    var d1 = new Date("December 08, 2021 13:53:00")
    var d2 = new Date(21,12,08)
    var d3 = new Date(21,12,08,13,33,0)
    
    console.log(today);
    console.log(d1);
    console.log(d2);
    console.log(d3);

输出结果：

Wed May 18 2022 11:44:32 GMT+0800 (中国标准时间)
    new.html:19 Wed Dec 08 2021 13:53:00 GMT+0800 (中国标准时间)
    new.html:20 Sun Jan 08 1922 00:00:00 GMT+0800 (中国标准时间)
    new.html:21 Sun Jan 08 1922 13:33:00 GMT+0800 (中国标准时间)

### 设置日期 ###

通过使用针对日期对象的方法，我们可以很容易地对日期进行操作。

在下面的例子中，我们为日期对象设置了一个特定的日期 (2010 年 1 月 14 日)：

var myDate=new Date();
        myDate.setFullYear(2021,0,14);
    
    console.log(myDate); // Thu Jan 14 2021 11:47:00 GMT+0800 (中国标准时间)

在下面的例子中，我们将日期对象设置为 5 天后的日期：

var myDate=new Date();
        myDate.setDate(myDate.getDate()+5);

注意: 如果增加天数会改变月份或者年份，那么日期对象会自动完成这种转换。

### 两个日期比较 ###

日期对象也可用于比较两个日期。

下面的代码将当前日期与 2100 年 1 月 14 日做了比较：

var x=new Date();
        x.setFullYear(2100,0,14);
        
    var today = new Date();
    
    if (x>today) {
        
        alert("今天是2100年1月14日之前");
    } else {
        
        alert("今天是2100年1月14日之后");
    }

![在这里插入图片描述][4941edb654434821a8ff31493b52c1dc.png]  
完整的 Date 对象请参考手册。

## JavaScript Array(数组)对象 ##

数组对象的作用是：使用单独的变量名来存储一系列的值。

什么是数组 ?

数组对象是使用单独的变量名来存储一系列的值。

如果你有一组数据（例如：动物名字），存在单独变量如下所示：

var animal1="tiger";
    var animal2="lion";
    var animal3="monkey";

然而，如果你想从中找出某一种动物？  
并且不是3种，而是300种呢？  
这将不是一件容易的事！

最好的方法就是用数组。

数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。

数组中的每个元素都有自己的的 `ID`，以便它可以很容易地被访问到。

### 创建一个数组 ###

创建一个数组，有三种方法。

下面的代码定义了一个名为 `myAniamals` 的数组对象：

1、常规方式:

var myAniamals=new Array();
    	myAniamals[0]="tiger";      
    	myAniamals[1]="lion";
    	myAniamals[2]="monkey";

2、简洁方式:

var myAniamals=new Array("tiger","lion","monkey");

3、字面量:

var myAniamals=["tiger","lion","monkey"];

### 访问数组 ###

通过指定数组名以及索引号码，你可以访问某个特定的元素。

以下实例可以访问 myAniamals 数组的第一个值：

var name=myAniamals[0];

以下实例修改了数组 myAniamals 的第一个元素:

myAniamals[0]="dog";

> \[0\] 是数组的第一个元素。\[1\] 是数组的第二个元素。

### 在一个数组中你可以有不同的对象 ###

所有的 JavaScript 变量都是对象。数组元素是对象，函数是对象。

因此，你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组：

myArray[0]=Date.now;
    myArray[1]=myFunction;
    myArray[2]=myAniamals;

### 数组方法和属性 ###

使用数组对象预定义属性和方法：

var x=myAniamals.length             // myAniamals 中元素的数量
    var y=myAniamals.indexOf("tiger")   // "tiger" 值的索引值

完整的数组对象操作参考：`https://wgchen.blog.csdn.net/article/details/124150847`

### 创建新方法 ###

原型是 JavaScript 全局构造函数。它可以构建新 Javascript 对象的属性和方法。

<p id="demo">单击按钮创建一个数组,调用 ucase() 方法, 并显示结果。</p>
    <button onclick="myFunction()">点我</button>
    
    <script>
        Array.prototype.myUcase = function () {
        
            for (i = 0; i < this.length; i++) {
        
                this[i] = this[i].toUpperCase();
            }
        }
        function myFunction() {
        
            var fruits = ["Banana", "Orange", "Apple", "Mango"];
            fruits.myUcase();
            var x = document.getElementById("demo");
            x.innerHTML = fruits;
        }
    </script>

上面的例子创建了新的数组方法用于将数组小写字符转为大写字符。  
![在这里插入图片描述][fe80458b34f747f0ba4fb9027fc5d40c.png]

## JavaScript Boolean（布尔）对象 ##

Boolean（布尔）对象用于将非布尔值转换为布尔值（true 或者 false）。

**创建 Boolean 对象**

Boolean 对象代表两个值：`”true” 或者 “false”`

下面的代码定义了一个名为 myBoolean 的布尔对象：

var myBoolean=new Boolean();

如果布尔对象无初始值或者其值为:

0
    -0
    null
    ""
    false
    undefined
    NaN

那么对象的值为 false。否则，其值为 true（即使当变量值为字符串 “false” 时）!

**实例演示**

检查布尔对象是 true 还是 false。

输出结果：

0 为布尔值 false
               1 为布尔值 true
          空字符串是布尔值 false
            null 是布尔值 false
             NaN 是布尔值 false
    字符串'false' 是布尔值 true

### Boolean 对象属性 ###

<table> 
 <tbody> 
  <tr> 
   <th align="left">属性</th> 
   <th align="left">描述</th> 
  </tr> 
  <tr> 
   <td> constructor </td> 
   <td>返回对创建此对象的 Boolean 函数的引用</td> 
  </tr> 
  <tr> 
   <td> prototype </td> 
   <td>使您有能力向对象添加属性和方法。</td> 
  </tr> 
 </tbody> 
</table>

#### JavaScript Boolean constructor 属性 ####

定义和用法  
constructor 属性返回对创建此对象的 Boolean 函数的引用。

浏览器支持  
所有主流浏览器都支持 constructor 属性。

语法：`boolean.constructor`

技术细节

<table> 
 <tbody> 
  <tr> 
   <th align="left">返回值：</th> 
   <td>函数对象。 返回创建布尔对象的函数原型。</td> 
  </tr> 
  <tr> 
   <th align="left">JavaScript 版本：</th> 
   <td>1.1</td> 
  </tr> 
 </tbody> 
</table>

实例：

<p id="demo">单击按钮创建一个boolean对象，显示它的constructor属性。</p>
    <button onclick="myFunction()">点我</button>
    
    <script>
        function myFunction() {
        
            var myvar = new Boolean(1);
            var x = document.getElementById("demo");
            x.innerHTML = myvar.constructor;
        }
    </script>

结果输出：

function Boolean() {
         [native code] }

#### JavaScript Boolean prototype 构造器 ####

定义和用法

prototype 属性使您有能力向对象添加属性和方法。

当构造一个原型，所有的布尔对象默认都添加了属性或方法。

注意： Boolean.prototype 不是引用布尔值，但 Boolean() 对象是。

注意： Prototype 是一个全局属性，这对于几乎全部的 JavaScript 对象。

浏览器支持  
所有主要浏览器都支持 prototype 属性。

语法

Boolean.prototype.name=value

实例

<p id="demo">单击按钮，如果 boolean 值为 <em>true</em> 显示 “green”,否则显示 “red”。</p>
    <button onclick="myFunction()">点我</button>
    
    <script>
        // 为 Boolean 对象创建一个新的方法：
        Boolean.prototype.myColor = function () {
        
            if (this.valueOf() == true) {
        
                this.color = "green";
            }else {
        
                this.color = "red";
            }
        }
        function myFunction() {
        
            // 创建一个 Boolean 对象, 并添加 myColor 方法:
            var a = new Boolean(1);
                a.myColor();
            var x = document.getElementById("demo");
                x.innerHTML = a.color;
        }
    </script>

![在这里插入图片描述][6527ed22cc964d41bbd690662740d8b0.png]

结果输出：

green

### Boolean 对象方法 ###

<table> 
 <tbody> 
  <tr> 
   <th align="left">方法</th> 
   <th align="left">描述</th> 
  </tr> 
  <tr> 
   <td> toString() </td> 
   <td>把布尔值转换为字符串，并返回结果。</td> 
  </tr> 
  <tr> 
   <td> valueOf() </td> 
   <td>返回 Boolean 对象的原始值。</td> 
  </tr> 
 </tbody> 
</table>

#### JavaScript Boolean toString() 方法 ####

定义和用法

toString() 方法可把一个逻辑值转换为字符串，并返回结果。

注意：当需要把 Boolean 对象转换成字符串的情况 JavaScript 会自动调用此方法。

浏览器支持  
所有主要浏览器都支持 toString() 方法。

语法

boolean.toString()

返回值

<table> 
 <tbody> 
  <tr> 
   <th>Type</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>String</td> 
   <td>“true” 或者 “false”</td> 
  </tr> 
 </tbody> 
</table>

实例  
将布尔值转换为字符串：

<p id="demo">单击按钮以字符串的形式显示Boolean对象的值。</p>
    <button onclick="myFunction()">点我</button>
    
    <script>
        function myFunction() {
        
            var myvar = new Boolean(1);
            var x = document.getElementById("demo");
            x.innerHTML = myvar.toString();
        }
    </script>

输出结果：

true

#### JavaScript Boolean valueOf() 方法 ####

定义和用法  
valueOf() 方法可返回 Boolean 对象的原始值。

浏览器支持  
所有主要浏览器都支持 valueOf() 方法。

语法

boolean.valueOf()

返回值

<table> 
 <tbody> 
  <tr> 
   <th>Type</th> 
   <th>描述</th> 
  </tr> 
  <tr> 
   <td>Boolean</td> 
   <td><em>true</em>&nbsp;或者<em>false</em></td> 
  </tr> 
 </tbody> 
</table>

实例  
返回 Boolean 对象的原始值:

<p id="demo">单击按钮创建一个Boolean对象，并显示它的构造函数：</p>
    <button onclick="myFunction()">点我</button>
    
    <script>
        function myFunction() {
        
            var bool = new Boolean(0);
            var x = document.getElementById("demo");
            x.innerHTML = bool.valueOf();
        }
    </script>

输出结果：

false

## JavaScript Math(算数)对象 ##

Math 对象  
Math（算数）对象的作用是：执行普通的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

使用 Math 的属性/方法的语法：

var x=Math.PI;
    var y=Math.sqrt(16);
    
    console.log(x); // 3.141592653589793
    console.log(y); // 4

注意： Math 对象无需在使用这个对象之前对它进行定义。

### 算数值 ###

JavaScript 提供 8 种可被 Math 对象访问的算数值：

你可以参考如下 Javascript 常量使用方法：

Math.E
    Math.PI
    Math.SQRT2
    Math.SQRT1_2
    Math.LN2
    Math.LN10
    Math.LOG2E
    Math.LOG10E

### 算数方法 ###

除了可被 Math 对象访问的算数值以外，还有几个函数（方法）可以使用。

下面的例子使用了 Math 对象的 round 方法对一个数进行四舍五入。

document.write(Math.round(4.7)); // 5

下面的例子使用了 Math 对象的 `random()` 方法来返回一个 `介于 0 和 1 之间的随机数`：

document.write(Math.random()); // 0.30147306227724235

下面的例子使用了 Math 对象的 `floor()` 方法和 `random()` 来返回一个 `介于 0 和 11 之间的随机数`：

document.write(Math.floor(Math.random()*11)); // 5

完整的 Math 对象请参考手册。

## JavaScript RegExp 对象 ##

RegExp：是正则表达式（regular expression）的简写。

什么是 RegExp？

正则表达式描述了字符的模式对象。

当您检索某个文本时，可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。

简单的模式可以是一个单独的字符。

更复杂的模式包括了更多的字符，并可用于解析、格式检查、替换等等。

您可以规定字符串中的检索位置，以及要检索的字符类型，等等。

语法

var patt=new RegExp(pattern,modifiers);
    
    或更简单的方法
    
    var patt=/pattern/modifiers;

模式描述了一个表达式模型。  
修饰符(modifiers)描述了检索是否是全局，区分大小写等。

注意：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠`\`）。

比如，以下是等价的：

var re = new RegExp("\\w+");
    var re = /\w+/;

### RegExp 修饰符 ###

修饰符用于执行不区分大小写和全文的搜索。

`i`– 修饰符是用来执行不区分大小写的匹配。

`g` – 修饰符是用于执行全文的搜索  
（而不是在找到第一个就停止查找，而是找到所有的匹配）。

实例 1  
在字符串中不区分大小写找 ”WillEm”：

var str = "Visit WillEm";
    var patt1 = /willem/i;
    document.write(str.match(patt1)); // WillEm

实例 2  
全文查找 “is”

var str="Is this all there is?";
    var patt1=/is/g;
    document.write(str.match(patt1)); // is,is

实例 3  
全文查找和不区分大小写搜索 “is”

var str="Is this all there is?";
    var patt1=/is/gi;
    document.write(str.match(patt1)); // Is,is,is

### test() 方法搜索字符串指定的值，根据结果并返回真或假 ###

下面的示例是从字符串中搜索字符 “e” ：

var patt1=new RegExp("e");
    document.write(patt1.test("The best things in life are free"));// true

当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 `\`）

var str = 'willem';
    
    var patt1 = new RegExp('\\w', 'g'); // 有转义作为正则表达式处理
    var patt2 = new RegExp('\w', 'g');  // 无转义作为字符串处理
    var patt3 =/\w+/g;  // 与 patt1 效果相同
    
    document.write(patt1.test(str)) //输出 true
    document.write("<br>") 
    document.write(patt2.test(str)) //输出 false
    document.write("<br>")  
    document.write(patt3.test(str)) //输出 true

### exec() 方法检索字符串中的指定值 ###

返回值是被找到的值。如果没有发现匹配，则返回 null。

下面的示例是从字符串中搜索字符 “e” ：

var patt1=new RegExp("e");
    document.write(patt1.exec("The best things in life are free"));// e

## JavaScript Window 浏览器对象模型 ##

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器”对话”。

浏览器对象模型 (BOM)

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

### Window 对象 ###

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

### Window 尺寸 ###

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight – 浏览器窗口的内部高度(包括滚动条)
     window.innerWidth – 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
    document.documentElement.clientWidth

或者

document.body.clientHeight
    document.body.clientWidth

实例  
实用的 JavaScript 方案（涵盖所有浏览器）：

<p id="demo"></p>
    
    <script>
        var w = window.innerWidth
            || document.documentElement.clientWidth
            || document.body.clientWidth;
        var h = window.innerHeight
            || document.documentElement.clientHeight
            || document.body.clientHeight;
        x = document.getElementById("demo");
        x.innerHTML = "浏览器window宽度: " + w + ", 高度: " + h + "。"
    </script>

该例显示浏览器窗口的高度和宽度。  
![在这里插入图片描述][82f7ed49a6b04f61bbac52c7fe810928.png]

### 其他 Window 方法 ###

window.open() – 打开新窗口
       window.close() – 关闭当前窗口
      window.moveTo() – 移动当前窗口
    window.resizeTo() – 调整当前窗口的尺寸

## JavaScript Window Screen ##

window.screen 对象包含有关用户屏幕的信息。

Window Screen

window.screen 对象在编写时可以不使用 window 这个前缀。

一些属性：

screen.availWidth – 可用的屏幕宽度
    screen.availHeight – 可用的屏幕高度

### Window Screen 可用宽度 ###

`screen.availWidth` 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

实例：返回您的屏幕的可用宽度：

document.write("可用宽度: " + screen.availWidth); // 可用宽度: 1920

### Window Screen 可用高度 ###

`screen.availHeight` 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

实例：返回您的屏幕的可用高度：

document.write("可用高度: " + screen.availHeight); // 可用高度: 1080

## JavaScript Window Location ##

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

**Window Location**

window.location 对象在编写时可不使用 window 这个前缀。 一些例子：

一些实例:

location.hostname 返回 web 主机的域名
    location.pathname 返回当前页面的路径和文件名
        location.port 返回 web 主机的端口 （80 或 443）
    location.protocol 返回所使用的 web 协议（http: 或 https:）

### Window Location Href ###

location.href 属性返回当前页面的 URL。

实例  
返回（当前页面的）整个 URL：

document.write(location.href); // file:///E:/node/html_test/new.html

### Window Location Pathname ###

location.pathname 属性返回 URL 的路径名。

实例  
返回当前 URL 的路径名：

document.write(location.pathname); // /E:/node/html_test/new.html

### Window Location Assign ###

location.assign() 方法加载新的文档。

实例：加载一个新的文档：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>百度</title>
    <script>
    function newDoc() {
        
        window.location.assign("https://www.baidu.com")
    }
    </script>
    </head>
    <body>
    
    <input type="button" value="加载新文档" onclick="newDoc()">
        
    </body>
    </html>

## JavaScript Window History ##

window.history 对象包含浏览器的历史。

**Window History**

window.history 对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

history.back() – 与在浏览器点击后退按钮相同
    history.forward() – 与在浏览器中点击向前按钮相同

### Window history.back() ###

history.back() 方法加载历史列表中的前一个 URL。

这与在浏览器中点击后退按钮是相同的：

实例：在页面上创建后退按钮：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <head>
        <script>
            function goBack() {
        
                window.history.back()
            }
        </script>
    </head>
    <body>
    
        <input type="button" value="Back" onclick="goBack()">
    
    </body>
    </html>

### Window history.forward() ###

history.forward() 方法加载历史列表中的下一个 URL。

这与在浏览器中点击前进按钮是相同的：

实例：在页面上创建一个向前的按钮：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script>
        function goForward() {
        
            window.history.forward()
        }
    </script>
    </head>
    <body>
    
        <input type="button" value="Forward" onclick="goForward()">
    
    </body>
    </html>

## JavaScript Window Navigator ##

window.navigator 对象包含有关访问者浏览器的信息。

Window Navigator  
window.navigator 对象在编写时可不使用 window 这个前缀。

<div id="example"></div>
    
    <script>
        txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
        txt += "<p>浏览器名称: " + navigator.appName + "</p>";
        txt += "<p>浏览器版本: " + navigator.appVersion + "</p>";
        txt += "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
        txt += "<p>硬件平台: " + navigator.platform + "</p>";
        txt += "<p>用户代理: " + navigator.userAgent + "</p>";
        txt += "<p>用户代理语言: " + navigator.language + "</p>";
        document.getElementById("example").innerHTML = txt;
    </script>

![在这里插入图片描述][758f543c0bef4d9e8938abad6954d8e8.png]  
警告!!!  
来自 navigator 对象的信息具有误导性，不应该被用于检测浏览器版本，这是因为：

navigator 数据可被浏览器使用者更改
    		  一些浏览器对测试站点会识别错误
    		  浏览器无法报告晚于浏览器发布的新操作系统

浏览器检测

由于 navigator 可误导浏览器检测，使用对象检测可用来嗅探不同的浏览器。

由于不同的浏览器支持不同的对象，您可以使用对象来检测浏览器。例如，由于只有 Opera 支持属性 “window.opera”，您可以据此识别出 Opera。

例子：`if (window.opera) {...some action...}`

## JavaScript 弹窗 ##

可以在 JavaScript 中创建三种消息框：`警告框、确认框、提示框。`

###  **警告框** ###

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法

window.alert("sometext");

`window.alert()` 方法可以不带上window对象，直接使用 alert() 方法。

<input type="button" onclick="myFunction()" value="显示警告框" />
    
    <script>
    function myFunction(){
        
    	alert("你好，我是一个警告框！");
    }
    </script>

###  **确认框** ###

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 “确认” 或者 “取消” 来确定用户操作。

当你点击 “确认”, 确认框返回 true， 如果点击 “取消”, 确认框返回 false。

语法

window.confirm("sometext");

`window.confirm()` 方法可以不带上 window 对象，直接使用 confirm() 方法。

实例

<p>点击按钮，显示确认框。</p>
    <button onclick="myFunction()">点我</button>
    <p id="demo"></p>
    
    <script>
    function myFunction() {
        
        var x;
        var r = confirm("按下按钮!");
        if (r == true) {
        
            x = "你按下了\"确定\"按钮!";
        }
        else {
        
            x = "你按下了\"取消\"按钮!";
        }
        document.getElementById("demo").innerHTML = x;
    }
    </script>

###  **提示框** ###

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法

window.prompt("sometext","defaultvalue");

`window.prompt()` 方法可以不带上 window 对象，直接使用 prompt() 方法。

<p>点击按钮查看输入的对话框。</p>
    <button onclick="myFunction()">点我</button>
    <p id="demo"></p>
    
    <script>
    function myFunction() {
        
        var x;
        var person = prompt("请输入你的名字", "Harry Potter");
        if (person != null && person != "") {
        
            x = "你好 " + person + "! 今天感觉如何?";
            document.getElementById("demo").innerHTML = x;
        }
    }
    </script>

![在这里插入图片描述][0080aa6984274fc2be813d986fa5bc7e.png]

###  **换行** ###

弹窗使用 反斜杠 `+ "n"(\n)` 来设置换行。

<p>点击按钮在弹窗中使用换行。</p>
    <button onclick="myFunction()">点我</button>
    <p id="demo"></p>
    
    <script>
    function myFunction(){
        
        alert("Hello\nHow are you?");
    }
    </script>

## JavaScript 计时事件 ##

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

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setInterval() – 间隔指定的毫秒数不停地执行指定的代码。
     setTimeout() – 在指定的毫秒数后执行指定代码。

注意： `setInterval() 和 setTimeout()` 是 HTML DOM Window对象的两个方法。

### setInterval() 间隔指定的毫秒数不停地执行指定的代码 ###

语法

window.setInterval("javascript function",milliseconds);

`window.setInterval()` 方法可以不使用 window 前缀，直接使用函数 setInterval()。

setInterval() 第一个参数是函数（function）。

第二个参数间隔的毫秒数

注意： 1000 毫秒是一秒。

实例：每三秒弹出 “hello” ：

<p>单击按钮每3秒出现一个“Hello”警告框。</p>
    <p>再次点击警告框，经过3秒出现新的警告框，这将一直执行 ...</p>
    <button onclick="myFunction()">点我</button>
    
    <script>
    function myFunction() {
        
        setInterval(function () {
         
            alert("Hello") 
        }, 3000);
    }
    </script>

实例展示了如何使用 setInterval() 方法，但是每三秒弹出一次对用户体验并不好。

以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码，就是手表一样。

实例：显示当前时间

<p>在页面显示一个时钟</p>
    <p id="demo"></p>
    
    <script>
    var myVar = setInterval(function () {
         
    				myTimer() 
    			}, 1000);
    			
    function myTimer() {
        
        var d = new Date();
        var t = d.toLocaleTimeString();
        document.getElementById("demo").innerHTML = t;
    }
    </script>

![在这里插入图片描述][90fce1e1fdba45c1bfa8eea55dd0b6f3.png]

**如何停止执行?**

`clearInterval()` 方法用于停止 `setInterval()` 方法执行的函数代码。

语法

window.clearInterval(intervalVariable)

`window.clearInterval()` 方法可以不使用 window 前缀，直接使用函数 clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

myVar = setInterval("javascript function",milliseconds);

然后你可以使用 clearInterval() 方法来停止执行。

实例：以下例子,我们添加了 `“停止”` 按钮：

<p id="demo"></p>
    <button onclick="myStopFunction()">停止</button>
    
    <script>
    var myVar=setInterval(function(){
        
    				myTimer()
    		  },1000);
    
    function myTimer(){
        
        var d=new Date();
        var t=d.toLocaleTimeString();
        document.getElementById("demo").innerHTML=t;
    }
    
    function myStopFunction(){
        
        clearInterval(myVar);
    }
    </script>

### setTimeout() 在指定的毫秒数后执行指定代码 ###

语法

myVar = window.setTimeout("javascript function", milliseconds);

setTimeout() 方法会返回某个值。  
在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。

setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。  
这个语句可能诸如 `“alert(‘5 seconds!’)”`，或者对函数的调用，诸如 alertMsg。

第二个参数指示从当前起多少毫秒后执行第一个参数。

提示：1000 毫秒等于一秒。

实例：等待3秒，然后弹出 “Hello”:

<p>点击按钮，在等待 3 秒后弹出 "Hello"。</p>
    <button onclick="myFunction()">点我</button>
    
    <script>
    function myFunction(){
        
       setTimeout(function(){
        
       		alert("Hello")
       },3000);
    }
    </script>

**如何停止执行?**

clearTimeout() 方法用于停止执行 setTimeout() 方法的函数代码。

语法

window.clearTimeout(timeoutVariable)

`window.clearTimeout()` 方法可以不使用 window 前缀。

要使用 `clearTimeout()` 方法, 你必须在创建超时方法中（setTimeout）使用全局变量:

myVar = setTimeout("javascript function",milliseconds);

如果函数还未被执行，你可以使用 clearTimeout() 方法来停止执行函数代码。

实例：以下是同一个实例, 但是添加了 `“停止弹框”` 按钮:

<p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
    <p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
    <button onclick="myFunction()">点我</button>
    <button onclick="myStopFunction()">停止弹框</button>
    
    <script>
    var myVar;
    
    function myFunction(){
        
        myVar=setTimeout(function(){
        
        		 alert("Hello")
        	  },3000);
    }
    
    function myStopFunction(){
        
        clearTimeout(myVar);
    }
    </script>

## JavaScript Cookie ##

Cookie 用于存储 web 页面的用户信息。

**什么是 Cookie？**

Cookie 是一些数据, 存储于你电脑上的文本文件中。

当 web 服务器向浏览器发送 web 页面时，在连接关闭后，服务端不会记录用户的信息。

Cookie 的作用就是用于解决 “如何记录客户端的用户信息”:

当用户访问 web 页面时，他的名字可以记录在 cookie 中。
    在用户下一次访问该页面时，可以在 cookie 中读取用户访问记录。

Cookie 以 `名/值对` 形式存储，如下所示:

username=Willem

浏览器从服务器上请求 web 页面时， 属于该页面的 cookie 会被添加到该请求中。服务端通过这种方式来获取用户的信息。

### 使用 JavaScript 创建 Cookie ###

JavaScript 可以使用 `document.cookie` 属性来创建 、读取、及删除 cookie。

JavaScript 中，创建 cookie 如下所示：

document.cookie="username=Willem";

您还可以为 cookie 添加一个过期时间（以 UTC 或 GMT 时间）。默认情况下，cookie 在浏览器关闭时删除：

document.cookie="username=Willem; expires=Thu, 18 Dec 2043 12:00:00 GMT";

您可以使用 `path` 参数告诉浏览器 cookie 的路径。默认情况下，cookie 属于当前页面。

document.cookie="username=Willem; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

### 使用 JavaScript 读取 Cookie ###

在 JavaScript 中, 可以使用以下代码来读取 cookie：

var x = document.cookie;

> document.cookie 将以字符串的方式返回所有的 cookie，类型格式：  
> cookie1=value; cookie2=value; cookie3=value;

### 使用 JavaScript 修改 Cookie ###

在 JavaScript 中，修改 cookie 类似于创建 cookie，如下所示：

document.cookie="username=Willem Gw; expires=Thu, 18 Dec 2043 12:00:00 GMT; path=/";

旧的 cookie 将被覆盖。

### 使用 JavaScript 删除 Cookie ###

删除 cookie 非常简单。您只需要设置 expires 参数为以前的时间即可，如下所示，设置为 Thu, 01 Jan 1990 00:00:00 GMT:

document.cookie = "username=; expires=Thu, 01 Jan 1990 00:00:00 GMT";

注意，当您删除时不必指定 cookie 的值。

### Cookie 字符串 ###

document.cookie 属性看起来像一个普通的文本字符串，其实它不是。

即使您在 document.cookie 中写入一个完整的 cookie 字符串, 当您重新读取该 cookie 信息时，cookie 信息是以名/值对的形式展示的。

如果您设置了新的 cookie，旧的 cookie 不会被覆盖。 新 cookie 将添加到 document.cookie 中，所以如果您重新读取 document.cookie，您将获得如下所示的数据：

cookie1 = value; cookie2=value;

如果您需要查找一个指定 cookie 值，您必须创建一个JavaScript 函数在 cookie 字符串中查找 cookie 值。

### JavaScript Cookie 实例 ###

在以下实例中，我们将创建 cookie 来存储访问者名称。

首先，访问者访问 web 页面, 他将被要求填写自己的名字。该名字会存储在 cookie 中。

访问者下一次访问页面时，他会看到一个欢迎的消息。

在这个实例中我们会创建 3 个 JavaScript 函数:

1 设置 cookie 值的函数
    2 获取 cookie 值的函数
    3 检测 cookie 值的函数

#### 设置 cookie 值的函数 ####

首先，我们创建一个函数用于存储访问者的名字：

function setCookie(cname,cvalue,exdays){
        
      var d = new Date();
      d.setTime(d.getTime()+(exdays*24*60*60*1000));
      var expires = "expires="+d.toGMTString();
      document.cookie = cname + "=" + cvalue + "; " + expires;
    }

函数解析：

以上的函数参数中，cookie 的名称为 cname，cookie 的值为 cvalue，并设置了 cookie 的过期时间 expires。

该函数设置了 cookie 名、cookie 值、cookie过期时间。

#### 获取 cookie 值的函数 ####

然后，我们创建一个函数用于返回指定 cookie 的值：

function getCookie(cname){
        
      var name = cname + "=";
      var ca = document.cookie.split(';');
      
      for(var i=0; i<ca.length; i++) 
      {
        
        var c = ca[i].trim();
        if (c.indexOf(name)==0) return c.substring(name.length,c.length);
      }
      return "";
    }

函数解析：cookie 名的参数为 cname。

创建一个文本变量用于检索指定 `cookie :cname + “=”`。

使用分号来分割 document.cookie 字符串，并将分割后的字符串数组赋值给 `ca (ca = document.cookie.split(‘;’))`。

循环 ca 数组 `(i=0;i<ca.length;i++)`，然后读取数组中的每个值，并去除前后空格 `(c=ca[i].trim())`。

如果找到 `cookie(c.indexOf(name) == 0)`，  
返回 cookie 的值 `(c.substring(name.length,c.length)`。

如果没有找到 cookie, 返回 `“”`。

#### 检测 cookie 值的函数 ####

最后，我们可以创建一个检测 cookie 是否创建的函数。

如果设置了 cookie，将显示一个问候信息。

如果没有设置 cookie，将会显示一个弹窗用于询问访问者的名字，并调用 setCookie 函数将访问者的名字存储 365 天：

为了方便大家学习，附上完整代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>菜鸟教程(runoob.com)</title>
    </head>
    <head>
    <script>
    function setCookie(cname, cvalue, exdays) {
        
        var d = new Date();
        d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
        var expires = "expires=" + d.toGMTString();
        document.cookie = cname + "=" + cvalue + "; " + expires;
    }
    
    function getCookie(cname) {
        
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
        
            var c = ca[i].trim();
            if (c.indexOf(name) == 0) {
         
                return c.substring(name.length, c.length); 
            }
        }
        return "";
    }
    
    function checkCookie() {
        
        var user = getCookie("username");
        if (user != "") {
        
            alert("欢迎 " + user + " 再次访问");
        }else {
        
            user = prompt("请输入你的名字:", "");
            if (user != "" && user != null) {
        
                setCookie("username", user, 30);
            }
        }
    }
    </script>
    </head>
    <body onload="checkCookie()">
    
    </body>
    </html>

[fcfb3189a9ef4f779d807f398ceaec7a.png]: https://img-blog.csdnimg.cn/fcfb3189a9ef4f779d807f398ceaec7a.png
[041aaf20b65e47ba8b326a62d221b088.png]: https://img-blog.csdnimg.cn/041aaf20b65e47ba8b326a62d221b088.png
[c30c4bf2341c427badb34ea0dbaf2840.png]: https://img-blog.csdnimg.cn/c30c4bf2341c427badb34ea0dbaf2840.png
[4941edb654434821a8ff31493b52c1dc.png]: https://img-blog.csdnimg.cn/4941edb654434821a8ff31493b52c1dc.png
[fe80458b34f747f0ba4fb9027fc5d40c.png]: https://img-blog.csdnimg.cn/fe80458b34f747f0ba4fb9027fc5d40c.png
[6527ed22cc964d41bbd690662740d8b0.png]: https://img-blog.csdnimg.cn/6527ed22cc964d41bbd690662740d8b0.png
[82f7ed49a6b04f61bbac52c7fe810928.png]: https://img-blog.csdnimg.cn/82f7ed49a6b04f61bbac52c7fe810928.png
[758f543c0bef4d9e8938abad6954d8e8.png]: https://img-blog.csdnimg.cn/758f543c0bef4d9e8938abad6954d8e8.png
[0080aa6984274fc2be813d986fa5bc7e.png]: https://img-blog.csdnimg.cn/0080aa6984274fc2be813d986fa5bc7e.png
[90fce1e1fdba45c1bfa8eea55dd0b6f3.png]: https://img-blog.csdnimg.cn/90fce1e1fdba45c1bfa8eea55dd0b6f3.png