assign	跳转，会保留历史记录，可以返回
replace	跳转，不会保留历史记录，无法返回
reload	刷新页面，传入 boolean 值，是否强制刷新，类似ctrl+F5

url 的组成

h t t p ://127.0.0.1:8080/logManager?pageIndex=1&pageSize=20#logDetails
└scheme┘  └──host──┘└port┘└──path──┘└─────────query─────────┘└fragment┘

scheme	通信协议	常用的http, ftp, maito等
host	主机	服务器(计算机)域名系统(`DNS`) 主机名或 IP 地址
port	端口号	整数，可选，省略时使用方案的默认端口，如 http 的默认端口为 80
path	路径	由零或多个'/'符号隔开的字符串，一般用来表示主机上的一个目录或文件地址
query	查询	可选，用于给动态网页传递参数，可有多个参数，用'&'符号隔开，每个参数的名和值用=符号隔开。例如：name=zs
fragment	信息片断	字符串，锚点

history 对象

页面前进后腿

forword()
back()
go()

navigator 对象

获取客户端版本信息navigator.userAgent

offset 系列属性

offsetLeft	获取到 offsetParent 左边缘的距离
offsetTop	获取到 offsetParent 上边缘的距离
offsetHeight	获取元素的高度，包括 border，padding，内容自身的高度
offsetWidth	获取元素的宽度，包括 border，padding，内容自身的宽度
offsetParent	获取距离自身最近的且带有定位（position 非 static）的父元素

client 系列属性

clientLeft	（没啥用）
clientTop	（没啥用）
clientHeight	获取元素的高度，包括 padding，内容自身的高度，不包括 border
clientWidth	获取元素的宽度，包括 padding，内容自身的宽度，不包括 border

scroll 系列属性

scrollLeft	获取内容向左滚出去的宽度
scrollTop	获取内容向上滚动出去的高度
scrollHeight	获取内容的高度，如果内容溢出，获取的也是整体内容的宽度（包括了溢出的内容），如果内同没有溢出，同 clientHeight
scrollWidth	获取内容的高度，如果内容溢出，获取的也是整体内容的宽度（包括了溢出的内容），如果内同没有溢出，同 clientWidth

提示

以上三个属性都是只读属性，只能获取不能设置，获取的都是不带单位的 number 类型的数据

轮播图

// 获取元素
var box = my$('box')
var screen = box.children[0]
var ul = screen.children[0]
var ol = screen.children[1]
// 箭头 arrow
var arr = my$('arr')
var arrLeft = my$('left')
var arrRight = my$('right')
// 图片的宽度
var imgWidth = screen.offsetWidth
// 1 动态生成序号
// 页面上总共有多少张图片 5 没有克隆的li
var count = ul.children.length
for (var i = 0; i < count; i++) {
  var li = document.createElement('li')
  ol.appendChild(li)
  setInnerText(li, i + 1)
  // 2 点击序号 动画的方式 切换图片
  li.onclick = liClick
  // 让当前li记录他的索引
  // 设置标签的自定义属性
  li.setAttribute('index', i)
}
function liClick() {
  // 2.1 取消其它li的高亮显示，让当前li高亮显示
  for (var i = 0; i < ol.children.length; i++) {
    var li = ol.children[i]
    li.className = ''
  }
  // 让当前li高亮显示
  this.className = 'current'
  // 2.2 点击序号，动画的方式切换到当前点击的图片位置
  // 获取自定义属性
  var liIndex = parseInt(this.getAttribute('index'))
  animate(ul, -liIndex * imgWidth)
  // 全局变量index 和 li中的index保持一致
  index = liIndex
}
// 让序号1高亮显示
ol.children[0].className = 'current'

// 3 鼠标放到盒子上显示箭头
box.onmouseenter = function () {
  arr.style.display = 'block'
  // 清除定时器
  clearInterval(timerId)
}
box.onmouseleave = function () {
  arr.style.display = 'none'
  // 重新开启定时器
  timerId = setInterval(function () {
    arrRight.click()
  }, 2000)
}
// 4 实现上一张和下一张的功能
// 下一张
var index = 0 // 第一张图片的索引
arrRight.onclick = function () {
  // 判断是否是克隆的第一张图片，如果是克隆的第一张图片，此时修改ul的坐标，显示真正的第一张图片
  if (index === count) {
    ul.style.left = '0px'
    index = 0
  }
  //
  // 总共有5张图片，但是还有一张克隆的图片 克隆的图片的索引是5
  // 4 < 5
  index++
  if (index < count) {
    // animate(ul, -index * imgWidth);
    // //
    // 获取图片对应的序号，让序号点击
    ol.children[index].click()
  } else {
    //如果是最后一张图片 以动画的方式，移动到克隆的第一张图片
    animate(ul, -index * imgWidth)
    // 取消所有序号的高亮显示，让第一序号高亮显示
    for (var i = 0; i < ol.children.length; i++) {
      var li = ol.children[i]
      li.className = ''
    }
    ol.children[0].className = 'current'
  }
}
// 上一张
arrLeft.onclick = function () {
  // 如果当前是第一张图片，此时要偷偷的切换到最后一张图片的位置（克隆的第一张图片）
  if (index === 0) {
    index = count
    ul.style.left = -index * imgWidth + 'px'
  }
  index--
  ol.children[index].click()
  // // 如果不是第一张的话 index--
  // if (index > 0) {
  // index--;
  // // animate(ul, -index * imgWidth);
  // ol.children[index].click();
  // }
}
// 无缝滚动
// 获取ul中的第一个li
var firstLi = ul.children[0]
// 克隆li cloneNode() 复制节点
// 参数 true 复制节点中的内容
// false 只复制当前节点，不复制里面的内容
var cloneLi = firstLi.cloneNode(true)
ul.appendChild(cloneLi)

// 5 自动切换图片
var timerId = setInterval(function () {
  // 切换到下一张图片
  arrRight.click()
}, 2000)