《智能社：JavaScript教程——从入门到精通》第30~31集笔记坐标和cookie-黄运鑫的博客

笔记目录
详细内容

笔记目录

本文为原创，转载请注明：https://blog.xinpapa.com/2017/12/20/zhinengshe30-31/

详细内容

1.BOM基础

open

例子（网页上运行代码的功能）：

  <body>
      请输入html代码：<br/>
      <textarea id="txt1" rows="10" cols="40"><h1>123</h1><h2>456</h2></textarea><br/>
      <input id="btn1" type="button" value="运行"/>
  </body>

  window.onload = function () {
      var oTxt = document.getElementById("txt1");
      var oBtn = document.getElementById("btn1");
      oBtn.onclick = function () {
          //点击后返回一个新窗口,将内容发送到新窗口
          var oNewWin = window.open("about:blank", "_blank");
          oNewWin.document.write(oTxt.value);
      };
  };

close
- 代码如下（注：火狐只能关闭open方式打开的页面）：
```
  <input type="button" value="close" onclick="window.close();" />
```
常用属性
- window.navigator.userAgent：得到当前浏览器的版本信息
- widow.location：得到当前网页的地址

2.尺寸及坐标

窗口尺寸、工作区尺寸
- 可视区尺寸
  - document.documentElement.clientWidth
  - document.documentElement.clientHeight
- 滑动距离
  - 可视区顶部到页面顶部的距离
  - documeng.body.scrollTop：只有chrom兼容
  - document.documentElement.scrollTop：只有IE和火狐兼容

3.常用方法和事件

系统对话框
- 警告框：alert("内容")，没有返回值
- 选择框：confirm("提问的内容")，返回boolean
- 输入框：prompt()，返回字符串或null
window对象常用事件
- onload
- onscroll：滚动事件
- onresize：改变窗口大小事件

4.`cookie`基础

什么是cookie
- cookie就是页面用来保存信息的，比如：自动登陆、记录用户名
- cookie的特性
  - 同一个网站中所有页面共享一套cookie
  - 数量、大小有限，有过期时间
- JS中使用cookie
  - document.cookie

5.使用`cookie`1

设置cookie
- 格式：名字=值
- 不会覆盖
- 过期时间：expires=事件
  - 日期对象的使用
- 封装函数
读取cookie
- 字符串分割
删除cookie
- 已经过期

代码如下：

//setCookie("userName","张三",14);//设置cookie
alert(getCookie("user"));//获取一条cookie
//封装设置cookie的方法,iDay是过期时间
function setCookie(name, value, iDay) {
  var oDate = new Date();
  oDate.setDate(oDate.getDate() + iDay);
  document.cookie = name + "=" + valu + ";expires=" + oDate;
};
//封装获取cookie的方法
function getCookie(name) {
  //用“;”拆分cookie，得到一个数组
  var arr = document.cookie.split(";");
  for (var i = 0; i < arr.length; i++) {
      //用等号拆分得到每条cookie的name值
      var arr2 = arr[i].split("=");
      if (arr2[0] == name) {
          return arr2[1];
      }
  }
  return "";//如果没找到，则没有这条cookie
};
//删除cookie的方法
function removeCookie(name) {
  //调用设置cookie的方法
  //让这条cookie过期时间为-1，则系统会删除这条cookie
  setCookie(name, 1, -1);
};

5.使用cookie2

例子
- 用cookie记录上次登陆的用户名
  - 提交时记录用户名
  - windowonload读取用户名

代码如下：

  <body>
      <form id="form1" action="http://www.xinpapa.com" method="get">
          帐号：<input type="text" name="uname" /><br/>
          密码：<input type="password" name="psw" /><br/>
          <input type="submit" value="登陆" />
      </form>
  </body>

window.onload = function () {
  var oForm = document.getElementById("form1");
  var oUname = document.getElementsByName("uname")[0];
  oForm.onsubmit = function () {
      setCookie("uname", oUname.value, 14);
  };
  //加载页面后读取cookie的用户名
  var oUname = document.getElementsByName("uname")[0].value = getCookie("uname");
};
//封装设置cookie的方法,iDay是过期时间
function setCookie(name, value, iDay) {
  var oDate = new Date();
  oDate.setDate(oDate.getDate() + iDay);
  document.cookie = name + "=" + value + ";expires=" + oDate;
};
//封装获取cookie的方法
function getCookie(name) {
  //用“;”拆分cookie，得到一个数组
  var arr = document.cookie.split(";");
  for (var i = 0; i < arr.length; i++) {
      //用等号拆分得到每条cookie的name值
      var arr2 = arr[i].split("=");
      if (arr2[0] == name) {
          return arr2[1];
      }
  }
  return "";//如果没找到，则没有这条cookie
};
//删除cookie的方法
function removeCookie(name) {
  //调用设置cookie的方法
  //让这条cookie过期时间为-1，则系统会删除这条cookie
  setCookie(name, 1, -1);
};

做你害怕做的事情，然后你会发现，不过如此。

目录

笔记目录

详细内容

1.BOM基础

2.尺寸及坐标

3.常用方法和事件

4.cookie基础

5.使用cookie1

4.`cookie`基础

5.使用`cookie`1